Jump to content
Search Community

GSAP 3 — Dfferent Files

mimeartist test
Moderator Tag

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)

 

 

 

Link to comment
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.

Link to comment
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
Link to comment
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]')

Link to comment
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
Link to comment
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

Link to comment
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?

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.
×
×
  • Create New...