Jump to content
Search Community

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

Korpin test
Moderator Tag

Recommended Posts

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

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