Jump to content
Search Community

ScrollTrigger Timeline Alternating Panels

vibe9 test
Moderator Tag

Recommended Posts

Trying to do a few things here and it seems I am close but not quite there yet. Certainly my lack of experience with GSAP is one thing standing in the way :-) Hopefully someone can help, with either some input on what to change or perhaps a working example I've somehow missed.

 

What I need this to do is animate according to the attached image (below). Where the panel slides in from the bottom as opposed to what it's doing now where it wipes upward and reveals from behind. I need it to slide in from the bottom and go upwards overtop.

 

Also, when you get to the last two panels, rather than the second last panel (panel 9) moving up and leaving a blank space, I want it to just end the scroll animation and let the page scroll down to the next section (ending the gsap timeline there).

Screen Shot 2021-11-29 at 3.30.55 PM.png

See the Pen JjrjJRb by vibe9 (@vibe9) on CodePen

Link to comment
Share on other sites

  • vibe9 changed the title to ScrollTrigger Timeline Alternating Panels

Ok, I've updated my pen and managed to flip the direction by changing the CSS bottom property to -100% and changing the z-index value from negative to positive. 

 

The only issues I'm having now are:

1) I need it to start without a blank space, I need the first two panels to be showing already as soon as the wrapper container enters view.

2) Panel #10 is not coming into view at all, so that somehow needs to be fixed

 

New Pen: 

See the Pen XWeWaXa by vibe9 (@vibe9) on CodePen

 

Link to comment
Share on other sites

Welcome to the forums, @vibe9!

 

Thanks a lot for the demo, good job so far.

 

1 hour ago, vibe9 said:

I need it to start without a blank space, I need the first two panels to be showing already as soon as the wrapper container enters

 

I would probably just slap a class on the first two panels, something like "initial" - that way you could just target all panels without that class using the :not()-selector like this .panel:not(.initial)

 

I used it in the pen below to create an array of those panels beforehand and store it in a variable. This way you can use the length of that array - the number of elements inside - to calculate the end of the ScrollTrigger, so you won't have to set it 'manually' - so now you can add more panels to your markup and it will still work the same without you having to worry about adjusting the end.

 

Instead of setting the panels down via the bottom property, I set those panels that are to be animated to yPercent: 100 via GSAP here (and tween them to 0 later on) - and I added a position: relative to your .panel-container in CSS, so the panels' position absolute will be in the right context. Personally, I would probably also apply an ease of "none" to the tweens, so the scrolling via mousewheel feels more natural, but I guess that is just a preference of mine.

 

 

1 hour ago, vibe9 said:

2) Panel #10 is not coming into view at all, so that somehow needs to be fixed

 

That is the case in your demo because you are looping over an array of panels that does not contain the last panel  (using the :not()-selector) when targeting the elements you want to create tweens for, so the last one never gets a tween created for and thus will never become visible.

 

Here's the pen I was talking about before - I hope it will be helpful.

 

See the Pen eeb000decaf611b9348e471fa746e6e7 by akapowl (@akapowl) on CodePen

 

  • Like 2
Link to comment
Share on other sites

Thanks very much @akapowl!  Believe it or not I joined this forum way back in 2016 but it's taken me half a decade to finally get into GSAP enough to finally post :-)

 

These are really, really helpful improvements and insight you've provided, and your Pen is perfect.

 

I am really looking forward to doing lots more with GSAP as I continue to learn. Thanks again for the thoughtful and quick response.

  • Like 3
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...