Jump to content
Search Community

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

utopian test
Moderator Tag

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

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...