Falling menu items + waving path animations

[pieterh]

Hi, I'm wondering if and how these animations are possible with Greensock: https://d.pr/v/qn4r9M (a little bit smoother than in video, but not too smooth)

 

1. the menu items on the left fall down quickly while rotate a little bit (for example between -10deg and 10deg)

2. the spinner on the right moves on a waving path from bottom to top

 

Both animations should end at the same moment.

In the video the animations repeat one time, but that's not needed.

 

I know how (more basic) Tweens and Timelines work, but don't know where to start, if I need extra plugins for this one, ...

Maybe the menu items falling animation is only possible with css keyframe animation? 

 

Thanks in advance,

Pieter

[PointC]

GSAP is an animation engine. It can animate any numeric value. You wouldn't need any special plugins to accomplish that animation.

 

It would probably be easiest to use from() tweens and just bring each menu item in from a certain y distance and rotation. I'd suggest trying to create the animation in a demo and see how far you get. If you get stuck, we're happy to help with any GSAP parts of the project.

 

To end multiple animations at the same time, check out this post on the position parameter.

https://greensock.com/position-parameter

 

Happy tweening.