Panel stack, first one in place then animation on scroll

[Antonio78]

Hi everyone, 

I am trying to achieve an effect similar to the card stack effect seen in another thread. In my case it is panels rather than cards, but I need the first panel to be already in place and the others to have the animation applied.

The panels have a two-part animation, they need to go up first and then scale.

What I can't get is that when the second panel starts the animation, the first one scales, that is, it only does the second part of the animation. At the end of the animation the 4 panels have to be stacked and scaled.

Then when the whole sequence is finished, the page can start scrolling again.

I hope I have made myself clear.

 

Thank you.

 

See the Pen XWygEjz by antonio78 (@antonio78) on CodePen

[kanguyen-vn]

Hi! Hopefully I understood your question correctly, but it seems like this Pen does exactly what you want to accomplish:

 

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

[Antonio78]

This is the pen I was referring to, it is similar to what I want to achieve, but I need the panels already stacked at the beginning except for the first one (as in the image on the left). Perhaps it is a starting point, but I do not understand whether my approach is on the right track or completely to be redone.

[mvaneijgen]

Is all you are looking for now to have the first element scale down?

 

I've just add a class to your first element and target that at the start of the timeline. I've just put in some arbitrary number for the scale, just to show it working. Was that all you're looking for or am I missing something from your question?

 

See the Pen RwqgqoO?editors=1010 by mvaneijgen (@mvaneijgen) on CodePen

[Antonio78]

Thank you for your reply.
The first panel should start shrinking when the second one starts coming up, so that you can't see the gap between the first one and the others.

[mvaneijgen]

Ok, then just add your "start" label the the tween right?

 

Have you written the code from your pen yourself? Or have you picked it from some other demo? There is nothing wrong with that, but I strongly encourage you to break it by changing code around and think of ways you could add to it, this way you learn what the code can do and how far you can take it.

 

I feel that is the best way to learn, codepen is an amazing place for this! Personally I use codepen to try out new ideas, I usually then just keep forking my pen to try out different ideas, either because I think it could be better or my original idea was not working. Usually at version 10 I got something I'm happy with. Creating forks of your pen will allow you to fall back at earlier ideas if something new is not working.

 

Also check out the following post to help kick start your learning:

https://greensock.com/get-started/
https://greensock.com/get-started-2

 

See the Pen RwqgqoO?editors=0010 by mvaneijgen (@mvaneijgen) on CodePen

[Antonio78]

The code is mine; it is a simplified version of an animation I am developing for a website.

You know how it is, sometimes I get a good result but I miss that little bit that I would never think of. For example, I would never think of adding a step to the same animation but before and outside the loop. It is a simple solution, but you need someone to show you that it can be done.

Thank you.

[Antonio78]

Just out of curiosity, might it be better to develop a reverse logic than I have done so far?

Instead of starting from the initial situation, setting the position of the panels via css and animating them with timeline.to, could I set the final position and then animate with timeline.from?

[Rodrigo]

7 hours ago, Antonio78 said:

Just out of curiosity, might it be better to develop a reverse logic than I have done so far?

Instead of starting from the initial situation, setting the position of the panels via css and animating them with timeline.to, could I set the final position and then animate with timeline.from?

Well that depends on the flow you have and if it will affect the initial load with a Flash of  Unstyled Content:

 

Also you should consider if a from instance could affect some other tween on the same element down the line, which could affect that instance's initial state.

 

The best approach, as always, is test and see how it works, everyone has a different approach and ways of working and setting up their projects. My goto approach is always set initial state with CSS and then use GSAP. In specific situations you might have to use a combination of CSS styles and a GSAP set() instance before creating the animations, but again that will depend on the way you're setting up your project.

 

Hopefully this helps.

Happy Tweening!