Upgrade to gsap3

[jonkwheeler]

@janpaepke Mind checking this out with you can?

• [x] Added GSAP 3 files
• [x] Updated various test files for GSAP 3 (when necessary)
• [x] Updated animation.gsap.js to allow for both GSAP 3 and GSAP 1.14
  • [x] setTween works for Tweens and Timelines

Please let me know if I need to push any edits. Thanks!

[OSUblake]

In v3, onOverwrite has been to changed to onInterrupt. https://greensock.com/forums/topic/21986-gsap-3-and-scrollmagic-with-npm/?tab=comments#comment-103673

[jonkwheeler]

@OSUblake That link didn't work for me, as it's saying I don't have permission? https://greensock.com/forums/topic/21986-gsap-3-and-scrollmagic-with-npm/?tab=comments#comment-103597

[OSUblake]

I updated the link.

[jonkwheeler]

@OSUblake Thanks. Is it fair to say then...

var methodUsed = GSAP3_OR_GREATER ? 'onInterrupt' : 'onOverwrite';

thisTween.vars[methodUsed];

?

[OSUblake]

Yep.

[jonkwheeler]

@OSUblake Added. Thanks!

[bojandurmic]

@janpaepke would you mind looking into this?

[janpaepke]

Hey guys, sorry - I was super busy. Looking through this now...

[janpaepke]

good stuff.

1. pls remove minified file from pr (only updated with releases) - I tried removing it from pr through github, but I think it deleted the file instead...
2. pls also remove assets/js/lib/greensock if not needed anymore?

[jonkwheeler]

@janpaepke I did delete the minified file. It’s on my second commit. “Revert ...”

I felt it was important to add the necessary library of gsap 3, and now the examples reference both versions of gsap 1.4 and 3.

Lemme know if you need anything. 👻

[janpaepke]

what I'm saying is, it shouldn't be deleted. it should not be part of the pr (left untouched) :)

[jonkwheeler]

@janpaepke alright! I'd check it one more time.

[janpaepke]

Hey Jon, I'm sorry but it seems I'm not making myself clear enough. No dist files should be part of the PR. This concerns all files in /scrollmagic.

Now instead of removing scrollmagic/minified/plugins/animation.gsap.min.js from the PR you also added scrollmagic/uncompressed/plugins/animation.gsap.js

Both of them should remain untouched and will only be updated with a new release, which also results in a version bump.

[jonkwheeler]

Ah, shall I just copy pasta the latest version online of both /minified and /uncompressed and push that? You want both files, just to be the exact same as online (untouched).

Sorry for the confusion.

[janpaepke]

yes, perfect. :)

sorry - language can be tricky sometimes. ;)

[janpaepke]

I'll probably make a release in the next couple of days to include these changes.

thank you! :)

[lukemoody]

When will upgrade-to-gsap3 be released ? : )

[humet]

I'd be interested in getting this new release too.

[jonkwheeler]

@janpaepke was the release made yet?

[celliGit]

@janpaepke Hi, checking in on the release. Still getting errors while using GSAP 3 with Scroll Magic.

[jonkwheeler]

I think I might fork this and release a new instance.

[OSUblake]

I think I might fork this and release a new instance.

Then I would recommend doing it just like I suggested here. This PR will load gsap twice if the user is using es-modules, thus doubling gsap's module size. A plugin should NOT directly import gsap.

[jonkwheeler]

@OSUblake 100%. I already do this in my local code instance. We need something more ESM compatible. Here's to finding time to do this.

[jonkwheeler]

Alright @OSUblake I made a new package that makes all of this stuff much easier to do. https://github.com/jonkwheeler/ScrollScene

Maybe we can connect via slack or email.

[celliGit]

Does this fix the errors while using GSAP3 and scrollMagic? Are there any files to download that shows a basic example of what additional .js files to load to make this work ? I see everything on Storybook, but I am just unsure what additional files to add to make ScrollMagic work with GSAP3.

[jonkwheeler]

There’s no additional files really. You just need to install the packages you wish to use. gsap, scrollmagic, scrollscene would be all 3. They are independent of one another.

Do not add animation.gsap.js.

[celliGit]

@jonkwheeler is there a way to include scrollscene like a regular .js file instead of installing packages like ?

[jonkwheeler]

Not currently, no. Maybe I’ll add it, but The goal of it was to make is more ESM compatible.

[celliGit]

okay, thanks. That's what I'd be looking for to use it along with scrollMagic and GSAP3. I hope ScrollMagic will be updated to work with GSAP3, or I can use an additional script like this.

[jonkwheeler]

I’d suggest not doing it that way. Gsap does too. If you aren’t using ESM yet, I’d look into a compiler to build your own js files.

[Elabbasy00]

I changed all the codes mentioned and still get the same mistake Invalid property onOverwrite set to undefined Missing plugin? gsap.registerPlugin()

@jonkwheeler

[jonkwheeler]

@Elabbasy00 this isn't my library. I'm not sure ScrollMagic is maintained anymore, or if my PR here was even merged. If you want to use my version, ScrollScene, feel free to file an issue over there.

[Elabbasy00]

I know it's not your library but I've seen the changes you've made and I think it might solve the problem so I asked you I want to finish this project first and then I will permanently delete this library @jonkwheeler

[Elabbasy00]

oldCallback = thisTween.vars.onInterrupt; thisTween.vars.onInterrupt = function () {

This works

[pierredarrieutort]

Perhaps you could use the new GSAP ScrollTrigger plug-in: https://greensock.com/docs/v3/Plugins/ScrollTrigger 🤔

[jonkwheeler]

I'd certainly push people towards using that. In the future I'll be deprecating ScrollMagic's usage within ScrollScene. However, I'll still make easy additions to the ScrollTrigger like I did with ScrollMagic.