ScrollMagic to ScrollScene code conversion

[n355]

Hi, I had issues with a ScrollMagic + gsap animation and browserify.

Errors when scrolling the animation:

(ScrollMagic.Scene) -> (animation.gsap) -> WARNING: tween was overwritten by another. To learn how to avoid this issue see here: https://github.com/janpaepke/ScrollMagic/wiki/WARNING:-tween-was-overwritten-by-another ScrollMagic.js:2815 Invalid property onOverwrite set to undefined Missing plugin? gsap.registerPlugin()

So, I digged a little bit into similar issues and seen your plugin but I'm not understanding how to make it works and if it concerns this type of warnings.

Here is the original code producing errors (without ScrollScene):

import { TimelineMax } from 'gsap';
import ScrollMagic from 'scrollmagic';
import { ScrollMagicPluginGsap } from 'scrollmagic-plugin-gsap';
ScrollMagicPluginGsap(ScrollMagic, TimelineMax);

let tl = new TimelineMax({
  onUpdate: updatePercentage
});
tl.from(<...>)
  .from(<...>);

const controller = new ScrollMagic.Controller();
const scene = new ScrollMagic.Scene({
  triggerElement: '.scroll-container',
  triggerHook: 'onLeave',
  duration: '100%'
})
  .setTween(tl)
  .setPin('.scroll-container')
  .addTo(controller);

function updatePercentage() {
  tl.progress();
}

Could you help me convert the code above so that it works with your plugin? Thank you !

[jonkwheeler]

Have you taken a look at the README? It addresses all this 🤠

Give this a shot and let me know how it goes: https://github.com/jonkwheeler/ScrollScene/blob/master/README.md

There's tons of information here.