When I refresh the page the scroll trigger animation already loads for elements before the current position

[jafar70]

Hi all,

This is my first post so bear with me.  I am trying to add a class to elements once they come into view. I am using the ScrollTrigger plugin to do this. The problem is when you refresh the page on Chrome it saves the position before you refresh but the elements above their current position have the class added to it which is not the goal. I want the class "effect--ready" to be added to the effect class once the user scrolls up or down from their current position after reloading the page.

 

I did not use ToggleClass because I only wanted the class to be added once. 

See the Pen MWxevrV by mrsalami (@mrsalami) on CodePen

[mvaneijgen]

Hi @jafar70 welcome to the forum!

 

That will require some custom logic and some more setup to get that exact effect. What I would do is create two ScrollTriggers Edit: I've combined them to one ScrollTrigger, I've removed your gsap.to() tween because you didn't animate anything and created two ScrollTrigger instances. One for adding the class and one for removing the class. Then I've used the Observer plugin to check if the visitor has scrolled already (didn't see a better way to check if the visitor has already scrolled and this seemed like the easiest solution). Then if the visitor has scrolled set some value to true so that we know not to remove the class any more. 

 

I've also add an onEnterBack call back to your first ScrollTrigger, so that it also works scrolling backwards. I’ve placed some comments in your JS to better explain things, please be sure to read through them!

 

As a side note when you're getting serious using GSAP in your project I would highly recommend paying attention to these kinds of lines in your CSS transition: all 2s ease 0.2s; Personally I never use all, and only target the properties I want to animate also background is a shorthand for a lot of properties, so I find it better to be really specific when writing CSS eg change background to background-color especially when animation is in the mix

transition: background-color, opacity; // Comma seperated list of all the properties
transition-duration: 0.2s;
transition-timing-function: ease;

You should never apply CSS transitions to anything that JavaScript is animating because not only is it horrible for performance, but it'll prolong all the effects because whenever JavaScript updates a value (which GSAP typically does 60 times per second), the CSS transitions interrupt and say "NOPE! I won't allow that value to be changed right now...instead, I'm gonna slowly make it change over time". So it disrupts things, adds a bunch of load to the CPU because you've now got CSS and JS both fighting over the same properties, but let's say you've got a 1-second tween and the CSS transitions are set to take 1000ms...that means what you intended to take 1 second will actually take 2 seconds to complete. 

 

Hope it helps and happy tweening! 

 

See the Pen YzgWrgE?editors=0010 by mvaneijgen (@mvaneijgen) on CodePen

[jafar70]

3 hours ago, mvaneijgen said:

Hi @jafar70 welcome to the forum!

 

That will require some custom logic and some more setup to get that exact effect. What I would do is create two ScrollTriggers Edit: I've combined them to one ScrollTrigger, I've removed your gsap.to() tween because you didn't animate anything and created two ScrollTrigger instances. One for adding the class and one for removing the class. Then I've used the Observer plugin to check if the visitor has scrolled already (didn't see a better way to check if the visitor has already scrolled and this seemed like the easiest solution). Then if the visitor has scrolled set some value to true so that we know not to remove the class any more. 

 

I've also add an onEnterBack call back to your first ScrollTrigger, so that it also works scrolling backwards. I’ve placed some comments in your JS to better explain things, please be sure to read through them!

 

As a side note when you're getting serious using GSAP in your project I would highly recommend paying attention to these kinds of lines in your CSS transition: all 2s ease 0.2s; Personally I never use all, and only target the properties I want to animate also background is a shorthand for a lot of properties, so I find it better to be really specific when writing CSS eg change background to background-color especially when animation is in the mix

transition: background-color, opacity; // Comma seperated list of all the properties
transition-duration: 0.2s;
transition-timing-function: ease;

You should never apply CSS transitions to anything that JavaScript is animating because not only is it horrible for performance, but it'll prolong all the effects because whenever JavaScript updates a value (which GSAP typically does 60 times per second), the CSS transitions interrupt and say "NOPE! I won't allow that value to be changed right now...instead, I'm gonna slowly make it change over time". So it disrupts things, adds a bunch of load to the CPU because you've now got CSS and JS both fighting over the same properties, but let's say you've got a 1-second tween and the CSS transitions are set to take 1000ms...that means what you intended to take 1 second will actually take 2 seconds to complete. 

 

Hope it helps and happy tweening! 

 

 

 

Thank you so much. I have spent weeks trying to figure it out. Thank you again.