Update to GSAP 3 issue

[SimonLittleFly]

Hi,

I moved from GSAP 2 to 3 recently and the animation.gasp plugin stopped working, probably because Greensock changed API ( we have to use gsap instead of TweenMax): can you please help me with that? I'm using npm right now, for the moment I installed a previous version of GSAP.

Thanks, Simone

[jonkwheeler]

I second this.

[bojandurmic]

Also having this issue.

[jonkwheeler]

As a nice workaround right now...

This works for Playing forwards and backwards, and allows for a duration to be set.

const roundOff = progress => Math.round(progress * 100) / 100

const duration = 0

const tl = gsap.timeline({ paused: true })

tl.from(items, {...options})

new ScrollMagic.Scene({
    triggerElement: element,
    duration: `${duration}%`,
})
    .addTo(controller)
    .on('progress', function(event) {
        if (duration > 0) {
            tl.progress(roundOff(event.progress))
        } else {
            if (event.scrollDirection === 'FORWARD') {
                tl.play()
            } else {
                tl.reverse()
            }
        }
    })

[bojandurmic]

@janpaepke do you have any information if you are planning to update the library to support GSAP 3?

[SalyOne]

same problem :(

[pierredarrieutort]

Idem here :'(

[OSUblake]

I moved from GSAP 2 to 3 recently and the animation.gasp plugin stopped working, probably because Greensock changed API ( we have to use gsap instead of TweenMax):

TweenLite/Max and TimelineLite/Max are still available in gsap 3. But I don't see why you can't use the new syntax, like gsap.timeline().to(...) as the API is the same. https://codepen.io/mikeK/pen/WNNLbLZ

For importing with npm, I would recommend that ScrollMagic uses a solution like this. In v3, imports are no longer global. https://greensock.com/forums/topic/21986-gsap-3-and-scrollmagic-with-npm/?tab=comments#comment-103589

[jonkwheeler]

@OSUblake I think it's because ScrollMagic wants to load the other two. I'd do a PR but I'm a bit buried at the moment. And most of us want to do this as ESM, not script tags. Shoot holes in this if I'm wrong.

• https://github.com/janpaepke/ScrollMagic/blob/master/scrollmagic/uncompressed/plugins/animation.gsap.js#L31
• https://github.com/janpaepke/ScrollMagic/blob/master/scrollmagic/uncompressed/plugins/animation.gsap.js#L36

[OSUblake]

I don't know about the amd stuff, but for CommonJS, I think this will work for v2 and v3.

var gsap = require('gsap');
// TweenMax/TimelineMax will be global in v2. In v3, they will be on the gsap object
var TweenMax = TweenMax || gsap.TweenMax;
var TimelineMax = TimelineMax || gsap.TimelineMax;
factory(require('scrollmagic'), TweenMax, TimelineMax);

I would have the CommonJS stuff first, and AMD stuff second. AMD is kind of dying out.

But a better solution might be to to write everything as es-modules, and use rollup.js to create an es and iiffe bundle.

[OSUblake]

This line might need to be different. Depends on how the bundler resolves "gsap".

var gsap = require("gsap/dist/gsap") || require("gsap");

[jonkwheeler]

I got this working and made a PR

https://github.com/janpaepke/ScrollMagic/pull/920

[katerlouis]

Is this already part of master?

[jonkwheeler]

This never got released...

I made this to combat these issues https://github.com/jonkwheeler/ScrollScene