Jump to content
GreenSock

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

Using ScrollTrigger and gsap.from() to fade in multiple sections on page on scroll

Recommended Posts

Hi there,

 

I've got a weird issue that is probably because I'm doing something wrong and was hoping someone could help point me in the right direction.

 

I've used an array to create a gsap.from() with scrolltrigger on the element of the array so that when you reach the section it will fade it in using the gsap.from(). However this only works if I load the codepen directly in the screen by clicking "run" otherwise if I just reload the page it doesn't do anything. I noticed this behaviour while working on a client project where if I opened the page in a new tab it wouldn't load the animations on scroll.

 

I added an onComplete to see if it's working on it does log the section as it's being scrolled through however the animation itself just doesn't function. If I put a gsap.to in the onComplete it works, but that seems wrong.

 

I've made a small video to help you see what I'm showing in the codepen: https://www.loom.com/share/be4e15ce7d454e54b9291df1b4e6dc20.

 

Please let me know if you have questions and if you can help. Thank you!!

 

See the Pen PoOQLYY by julienkos (@julienkos) on CodePen

Link to comment
Share on other sites

I did notice that if I add immediateRender:false it fixes it. I am not sure why though. If someone could explain and also confirm that that's the correct way to proceed with this. Thanks!

Link to comment
Share on other sites

Hello there!

 

There's a regression in that version which is causing the strange behaviour - 
 

 

This link may also help if you have immediate render questions. ☺️
 

 

Link to comment
Share on other sites

Thank you Caissie! I will see if adding lazy: false fixes it for me. So glad to have access to such amazing support with you guys. Have a great weekend!

  • Like 1
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.
×