ScrollTrigger > Div must appear and disapear with opacity and without moving on the screen

[Korpin 0 Likes (Newbie)]

Hello green fellas!

 

What I'm trying to accomplish is I think very simple but I'm still stuck on it.

 

This is what I want when an user scroll :

-> while the user is scrolling, the div must appear slowly (with opacity) at the center of the screen

-> when opacity is at 1, keep it like that and do nothing for some defined px/vh while keep scrolling

-> when those px/vh are ended then change the opacity from 1 to 0 while user keep scrolling

-> go to next div/section and do the same

 

So the div must appear on the center of the screen and disapear on the center of the screen.

(And I need to do the same with the following div's).

 

Here is a codepen of what I tried.

 

 

Thanks a lot in advance for your help!

 

See the Pen poWRLeM by Korpinz (@Korpinz) on CodePen

[Cassie 3,706 Likes (Superhero)]

Hey there @Korpin

 

You'll want to do something like this...

 

See the Pen vYegjpw?editors=1111 by GreenSock (@GreenSock) on CodePen

 

Loop around and create a timeline for each section.

 

Hope this helps!