Scrollmagi c + GSAP = Твин был переписан другим в Svelte - PullRequest
0 голосов
/ 12 марта 2020

Я использую scrollmagi c и gsap в компоненте svelte следующим образом:

//Hero Component
<script>
   import { onMount } from 'svelte'
   import ScrollMagic from 'scrollmagic'
   import { TweenMax } from 'gsap'
   import { ScrollMagicPluginGsap } from "scrollmagic-plugin-gsap";

   ScrollMagicPluginGsap(ScrollMagic, TweenMax);

   let imgContainer;
   let image;

   onMount(() => {
        TweenMax.defaultOverwride = false;
        var controller = new ScrollMagic.Controller();
        var imageScene = new ScrollMagic.Scene({
            offset: 0,
            duration: 500
        })
            .setTween(TweenMax.fromTo(imgContainer, 0.2, {scale: 2.1}, {scale: 1, overwrite: false}))
            .addTo(controller);
    })
</script>

<div bind:this={imgContainer}>
  <img bind:this={image} src="/path/to/image" />
</div>

Я загружаю компонент следующим образом:

<script>
    import { onMount } from 'svelte';

    let MyComponent;

    onMount(async () => {
        const module = await import('my-non-ssr-component');
        MyComponent = module.default;
    });
</script>

<svelte:component this={MyComponent} foo="bar"/>

Так что, когда я начинаю прокрутку, я получите ошибку: tween was overwritten by another Я знаю руководство scrollmagi c об этом , но решения не работают в моей среде.

Есть идеи, как мне это исправить?

...