Jump to content
GreenSock

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

Fade in and fade out elements sequentially with Scrolltrigger

Go to solution Solved by Carl,

Recommended Posts

Hello, 
I'm trying to start a fade in a sequence of different divs on specific section with scroll trigger. 
In few words when a I reach a specific section, a list of 5 divs should appear sequentially with a little delay.
I tried to combine gsap.to with scroll trigger without results.

Anyone can help to figure out? 

Thank you in advance!
 

See the Pen WNRRBvM by scavaliere (@scavaliere) on CodePen

Link to post
Share on other sites

Thanks for the demos.

There were a few problems:

  • the start position of the triggers was above the scroller-start on page load. In the demo below I added padding to the container to push the listones down
  • the page didn't have enough content or height to scroll anywhere. I gave your body a height of 500vh to make it scrollable
  • you were chaining a .to() tween to another .to() tween which is not allowed. Maybe you want a timeline? I commented the bad line out

in the demo below you will see some animation when you scroll now

 

See the Pen XWppLMN by snorkltv (@snorkltv) on CodePen

 

You may want to consider my course ScrollTrigger Express as it will walk you through the basics quickly and you'll get access to all my other courses with over 100 lessons to help you with beginner to intermediate GSAP concepts.

 

Carl

 

  • Like 5
Link to post
Share on other sites

Hello @Carl ! 
Thank you for your reply! I've used part of your reply to set what I really needed. Now on Codepen is working well and is updated so you can take a look.
However on my production site is not working and I get a console warning: 

gsap.min.js:10 GSAP target  not found.

referring to ".listone" div. But it is present in the section... I don't understand why on codepen is working and on my production site it gives me this warning. 

Any idea? 

Thank you again!

Link to post
Share on other sites

Hello again! 
I've activated markers and I noticed that, if on one hand the scroller-start and scroller-end markers appear, the start and the end trigger don't. 
I don't really understand why. It seems the trigger isn't active even if the div id is correct. 

Link to post
Share on other sites

I attach here the image of what it happen.
It seems the start and end markers are overlapped and stuck at the top of the page. 

8f9085d4-61fb-45c2-8d42-aa030d5158b8.thumb.png.8a47ce0706b9f4ebf6f82c7cd53f8ed5.png

Link to post
Share on other sites

Sorry, but I have no way of knowing what could be wrong. If your target isn't found my only guess is you are running your scripts before the DOM is present. Try loading your js at the bottom of the page in this order

 

  • gsap
  • scrolltrigger
  • your custom animation code that you wrote
  • Like 5
Link to post
Share on other sites

Hey @Carl ! Thank you for your prompt reply! 
Moving the script in the footer made it work. Really strange... 
Thank you again!

Link to post
Share on other sites
4 hours ago, scavaliere said:

Moving the script in the footer made it work. Really strange... 

It's actually not strange at all - if you try to animate an element that doesn't exist yet (because you have JavaScript that runs BEFORE the browser even parses your HTML and creates the elements), it won't work. See what I mean? That's why it's best to put your JS at the end of the <body> or you can just put your JS in an event handler that listens for when your page is done loading. Either "load" or "DOMContentLoaded". 

 

Happy tweening!

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

×