scrollmagic-plugin-gsap

scrollmagic-plugin-gsap copied to clipboard

I am using scrollmagic and gsap in svelte component like this:

//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>

I load the Component like this:

<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"/>

So but when i start scrolling i get the error: tween was overwritten by another I know the scrollmagic guide about this but the solutions doesn't work in my environment.

Any ideas, how can i fix that?

@epranka Update: the error seems to be related to GSAP3 When I use GSAP version 2, I don't get this warning...

any updates?

tagging @epranka