Animation Lettering Reveal

[kobracode]

Hello, i am trying to reproduce the animation of this https://siloridge.com of the red text under the slider. i used lettering js to break text into lines(<span></span>),(good still here) and then i am trying to create the animation but i cant find out what animation settings on the transform, easiing and rotation should apply .

gsap.set($(elem).find('span'), {
	rotation: 2,
	y: "100%",
	alpha: 0,
});
 gsap.to($(elem).find('span'), {rotation:0, y: 0,alpha:1, duration: 1.2,stagger:0.01, ease:'power4.inOut'});

Any suggestions?

Regards,

Dimitris

[PointC]

I'm not sure I follow the question. Are you saying the animation is working, but you're not sure about which properties to animate? Maybe you could make a demo?

 

 

Just FYI, GreenSock has the SplitText plugin available for your lettering animation needs.

https://greensock.com/docs/v3/Plugins/SplitText