Mobile Card Animation

[Nomili]

Hello all, 

I have built an element that consists of 3 rows. My goal is that when a certain position of the individual rows is reached, the respective card animates. First the height should animate and then the text and the image.  So far it seems to work, but I am at the end of my knowledge how to determine exactly the position when the respective card animates and the others close. Also, they all open at the same time and there is a strangely large gap at the end of the image.

 

I also think that the animation could be a bit more "elegant", but I'm not getting anywhere there either. 

In the picture I have marked when the animation of the individual lines should begin approximately. 

 

 

 

See the Pen ZEVGjKN by msadak (@msadak) on CodePen

[Nomili]

Here is another approach I tried to get the whole thing to work. Instead of working with display:none and block, I went the way of max-height and gave the individual .card divs additional classes to identify them better. But here too there are only problems.

 

See the Pen MWZwBrd by msadak (@msadak) on CodePen

[Rodrigo]

Hi,

 

Maybe the examples created by @Cassie in this thread can provide a good starting point:

 

Hopefully this helps.

Happy Tweening!

[Nomili]

thank you for the tip @Rodrigo. i have adapted the code and completely dispensed with jquery, so that the animation works completely with gsap. 

So far everything is great, but I'm trying to solve the whole thing without the pin: true. If I set it to false, the animation trigger no longer seems to work properly and the individual cards do not animate correctly. I would like to get rid of this "sticky" effect.

 

 

See the Pen gOZpEQe by msadak (@msadak) on CodePen

 

 

 

[Nomili]

i create a demo version of my idea in webflow. so no use of gsap. Just for better understanding what i mean

 

https://ttttt-8f61bb.webflow.io/

[Rodrigo]

Hi,

 

Something like this maybe:

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

 

Hopefully this helps.

Happy Tweening!

[Nomili]

Thanks for your help @Rodrigo  What it does is open the accordion-copy class while scrolling. If you stop halfway, the accordion-copy is only halfway open. 

My goal is that, as in your example, the trigger for accordion-copy starts, the .accordion-copy opens completely, and when the next .accordion-copy is reached, the top one closes completely and the next one opens completely. So it doesn't determine the height of the .accordion-copy based on how far I just scrolled. Just like in the webflow example 

 

[Rodrigo]

Hi,

 

You can use ScrollTrigger Batch for each accordion item:

https://greensock.com/docs/v3/Plugins/ScrollTrigger/static.batch()

 

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

 

Hopefully this helps.

Happy Tweening!

[Nomili]

Thank you @Rodrigo for your help so far. After a few days of experimenting, I have figured out how to solve the animation (without the batch function). So far great, only one last thing I can't solve. How do I get the height of the .card to change only downwards and not upwards? Currently it is proportionally the same and the .card changes height in both directions.

 

See the Pen KKbVjRR by msadak (@msadak) on CodePen

[Cassie]

Hi there!

 

So 'height' isn't a transform (like scale/x/y/rotation) It's a layout property. So transformOrigin has no effect on it.

You currently have a centering layout effect on your card due to flexbox -  justify-content: center; If you change that to  justify-content: flex-start; then your elements will scale from the top.

You currently have height:0 and your padding is taking up the whole element height so this may have to be styled a little differently, but here's a start.

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