Jump to content
Search Community

Fade in-fade out effect for sections with scrollTrigger

ivevil test
Moderator Tag

Recommended Posts


I need an advice about my codepen. I want to have a few sections with scrollTrigger and in between them to have fade in-fade out effect so you don't actually see that they are positioned from top to bottom. I want to achieve a feeling for a user when scrolling that sections are more like over each other just appearing and disappearing than to see edges of the sections and have a feeling that they are positioned like they are from top to bottom.
The thing is when I set my ScrollTrigger like this - also the first section is having fade in effect from beginning and I want it - if first to be shown immediately and the last section not to have fadeout at the end of the scrollbar.
I tried to achieve that with selectors :first-child and :last-child like added in the code but then not whole timeline is working in a proper way.

Total goal of my page should be - having multiple sections with fade in/fade out transition in between.

See the Pen rNvrmvz by ivevil (@ivevil) on CodePen

Link to comment
Share on other sites

Hi @ivevil,


If I understood you correctly this should work as expected:

See the Pen YzLBawQ by GreenSock (@GreenSock) on CodePen


Basically you have to check the index of each loop in the forEach method. If the index is 0 don't have a fade in animation and if the index is equal to the amount of section minus one (remember that arrays have zero index) don't have a fade out animation.


Let us know if you  have other questions.


Happy Tweening!

  • Like 1
Link to comment
Share on other sites

Wow, thanks! The answer was so simple and obvious, but I wasn't sure about "repeating" the same timeline, but now I see. Thanks Rodrigo.

I have two more questions - so, I wanted to add a text with transition like here:

See the Pen rNvPpRv by ivevil (@ivevil) on CodePen

And it is perfectly working but only on the first section, the rest of them are short and not showing the text as expected. (Expectation is to have more sections with the same text animation, some of them are going to have different text animation). 
Should I proceed with adding different classes to them and then separate them, or can I have still the same code for all of them?

The other question is regarding the fade in-fade out effect - now the whole section just blinks and not show the section as expected or sometimes you can see the edge of the section, so should I make longer duration of the particular sections or what do you suggest here?

I really appreciate your help and answers!

Link to comment
Share on other sites



I'm literally on my way out now, so I don't have time to get to this right now.


The thing you could try is create an array with the animations and add them to the loop. Another option is create an array of the timelines for each slide's text animations and add each timeline on the for each loop.


Also beware of durations of timeline instances in a ScrollTrigger setup, @Cassie just created this short video explaining how to proper work in a ScrollTrigger setup:


Happy Tweening!

  • 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.
  • Create New...