Jump to content
Search Community

ScrollTrigger keep items in center with fade in/out effect

jonias test
Moderator Tag

Recommended Posts

In order to do that you'll need to make sure your css is set up to have panels be on top of each other

 

I just took GreenSock's sliding panel demo

See the Pen qBdzqmR?editors=1010 by GreenSock (@GreenSock) on CodePen

 

and made the pen below by removing the blue panel and changing the tweens to opacity

See the Pen ZEpbbpQ?editors=1010 by snorkltv (@snorkltv) on CodePen

 

  • Like 4
Link to comment
Share on other sites

another approach I use for this type of thing is the " @shshaw grid layering technique " 

 

static version of multiple fullscreen divs sitting on top of each other

 

See the Pen JjYJpgw?editors=1100 by snorkltv (@snorkltv) on CodePen

 

here I apply it to list items with some animation

 

See the Pen 0d22106a0c7dca4d4e01a583bb739d37?editors=1100 by snorkltv (@snorkltv) on CodePen

  • Like 4
Link to comment
Share on other sites

Hoping I can quickly jump in here - this actually helps with something I've just started working on, so thank you. Although I'm currently stumped on how to track when a particular panel has entered the viewport (to trigger another timeline) if they're all absolutely stacked on top of each other.

 

Is there an easy way to do this without having to calculate the height of each?

 

Thanks!

Link to comment
Share on other sites

Hey @JoshM and welcome to the GreenSock forums.

 

Carl's second demo in his first post shows how to do that sort of thing. But there are other approaches as well, the best depends on your setup and needs. I recommend creating a minimal demo of your situation that clearly shows what you're trying to do and the issue that you're running into and then create a new thread asking about it.

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