Я использую 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 об этом , но решения не работают в моей среде.
Есть идеи, как мне это исправить?