Jump to content
GreenSock

Search In
  • More options...
Find results that contain...
Find results in...
mimeartist

GSAP 3 — Dfferent Files

Recommended Posts

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)

 

 

 

Share this post


Link to post
Share on other sites

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

  • Like 3

Share this post


Link to post
Share on other sites

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? 

Share this post


Link to post
Share on other sites

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.

Share this post


Link to post
Share on other sites

PS Do these two need registering?

 

gsap.registerPlugin(ScrollToPlugin, EasePack); 

Share this post


Link to post
Share on other sites
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. 

  • Like 1

Share this post


Link to post
Share on other sites

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]')

Share this post


Link to post
Share on other sites
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:

 

  • Like 1

Share this post


Link to post
Share on other sites

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

 

image.thumb.png.81a3a3b7d458cce9ba2a6496c373b783.png

Share this post


Link to post
Share on other sites
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

Share this post


Link to post
Share on other sites
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?

 

Share this post


Link to post
Share on other sites
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?

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
Share on other sites
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 :) 

  • Like 2

Share this post


Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...

  • Recently Browsing   0 members

    No registered users viewing this page.

×