GSAP 3 — Dfferent Files

[mimeartist 26 Likes (Newbie)]

Hi,

 

I've got a site that's not quite ready for launch and I thought I'd upgrade to gsap 3 before going live in a few weeks rather than updating at a later date... my question is which of these files do I need to replace, as a few seem to not be there anymore?

 

I'm currently using...

 

jquery-3.4.1.min.js

TweenMax.min.js  (replacing this with gsap.min.js)
Draggable.min.js  (replacing this with new draggable.min.js)
ThrowPropsPlugin.min.js (this doesn't exist in the download any more)
ColorPropsPlugin.min.js  (this doesn't exist in the download any more)

 

 

 

[mimeartist 26 Likes (Newbie)]

Ok, delved in (read) the docs and throwprops is inertia, and realised I needed to register them... 

[GreenSock 18,876 Likes (Superhero)]

Yep, you got it all right. ColorPropsPlugin probably isn't needed anymore - the core engine can handle colors quite well. Can you share how exactly you were using ColorPropsPlugin? Perhaps a code sample or a codepen? 

[mimeartist 26 Likes (Newbie)]

TweenMax.to('body', 0.4, { color:recklessFG, backgroundColor:recklessBG,overwrite: true });

 

I've found that since I updated, I've had to use overwrite:true as things that were in order were going out of order? I have a lot of rollovers that all impact a few divs... e.g. rolling over a piece of text changes the background etc. and hides text, and the rollovers can happen very quickly.

[mimeartist 26 Likes (Newbie)]

PS Do these two need registering?

 

gsap.registerPlugin(ScrollToPlugin, EasePack); 

[GreenSock 18,876 Likes (Superhero)]

4 minutes ago, mimeartist said:

I've found that since I updated, I've had to use overwrite:true as things that were in order were going out of order? I have a lot of rollovers that all impact a few divs... e.g. rolling over a piece of text changes the background etc. and hides text, and the rollovers can happen very quickly.

The only way I can think of that would cause behavior like that is if your rollout/rollover tweens have different durations, such that one finishes before the previous one does. If you want overwrite:"auto" (the old default), you can simply set that as the default like this: 

 

gsap.defaults({overwrite:"auto"});

 

6 minutes ago, mimeartist said:

gsap.registerPlugin(ScrollToPlugin, EasePack); 

Technically yes, but if you load GSAP first and you're loading the files into a browser, the plugins will attempt to auto-register but it's still a good habit to get into (registering them) because when you're working in build tools/bundlers, tree shaking can bite you if you have zero references in your code to the plugins. 

[mimeartist 26 Likes (Newbie)]

Thanks Jack...

 

I'm getting this error, when I try and do the following - I've checked the div #section4 exists, so thought it might be from not registering it (I don't know what tree shaking means)

 

gsap.to(window, 1, {scrollTo:"#section" + whichSectionJump});

 

TypeError: null is not an object (evaluating 'f[n]')

[ZachSaucier 7,162 Likes (Superhero)]

4 minutes ago, mimeartist said:

I'm getting this error, when I try and do the following - I've checked the div #section4 exists, so thought it might be from not registering it (I don't know what tree shaking means)

 

gsap.to(window, 1, {scrollTo:"#section" + whichSectionJump});

 

TypeError: null is not an object (evaluating 'f[n]')

Can you please try to create a minimal demo on CodePen? This thread can help you get it set up:

 

[mimeartist 26 Likes (Newbie)]

Hi Zach,

 

I have.. but it works on there  - Going to check for unclosed DIVS etc I think

 

See the Pen dyyqbJe by mimeArtist (@mimeArtist) on CodePen

[mimeartist 26 Likes (Newbie)]

I've resorted to using... as can't work out the issue

 

 $('html, body').animate({
        scrollTop: $(theSectionToJump).offset().top
}, 1000);

 

This is the error that was coming up - just in case it's useful

 

[ZachSaucier 7,162 Likes (Superhero)]

2 hours ago, mimeartist said:

I've resorted to using... as can't work out the issue

 

 $('html, body').animate({
        scrollTop: $(theSectionToJump).offset().top
}, 1000);

Ooh, don't use jQuery's .animate() function. It has really bad performance.

 

You could at least do that much with GSAP:

 

See the Pen rNNZMeR?editors=0010 by GreenSock (@GreenSock) on CodePen

[mimeartist 26 Likes (Newbie)]

9 minutes ago, ZachSaucier said:

Ooh, don't use jQuery's .animate() function. It has really bad performance.

 

You could at least do that much with GSAP:

 

 

 

 

Hmm... I'm confused now... I thought ScrollTop has been removed in version 3?

 

[ZachSaucier 7,162 Likes (Superhero)]

5 minutes ago, mimeartist said:

Hmm... I'm confused now... I thought ScrollTop has been removed in version 3?

Good question. Draggable's type: "scrollLeft" and "scrollTop" have been removed because they can reproduced using only type: "x" or "y". But what I'm doing in the demo above is not that - document.documentElement selects the document element. scrollTop in the tween refers to the scrollTop property of documentElement. So we're just animating the scrollTop position directly, it's not anything inside of GSAP. Does that make sense?

[ZachSaucier 7,162 Likes (Superhero)]

Also, you should start using the simplified gsap object instead of TweenMax! And in GSAP 3 the duration goes within the vars parameter  

[mikel 4,782 Likes (Superhero)]

Hey @mimeartist,

 

It is still there. However, the codePen example still runs on V2 - here V3

 

See the Pen GRRXjwy by mikeK (@mikeK) on CodePen

 

Happy tweening V3 ...

Mikel

[ZachSaucier 7,162 Likes (Superhero)]

10 minutes ago, mikel said:

It is still there. However, the codePen example still runs on V2 - here V3

Updated it. There are a lot of demos, so we haven't gotten around to updating all of them yet