Jump to content
Leonardo Brito

Trying to reproduce font animation

Recommended Posts

Hi guys,


Im trying to reproduce the font animation from this webpage: https://fleava.com/


As you can see in the paragraph theres a small delay between each line.


I splitted all the paragraphs in two sections, big span and letter span.


The big span is a container for each line and the letter span its for each letter.


Using straggerFrom its showing the whole line at the same time... without the other letters playing the animation.


In the attachments theres a video of the animation i did and two screens of the gsap code.


Any feedback in what approach should i use or if im doing the things kinda right would be great!!


Thanks in advace!

2019-05-15 at 15-25-30.png

2019-05-15 at 15-25-57.png

Share this post

Link to post
Share on other sites

Welcome to the forums, @Leonardo Brito


I didn't quite understand your question. If you need some help, could you please provide a codepen? That'll greatly increase the likelihood that you'll get a quality answer. If you're not sure how, check this out: 


Also, I noticed that you're wrapping your CSS-related properties in a "css:{}" object which is totally fine, but also completely unnecessary because GSAP will do that for you automatically. Also, it's much better to use the shortcuts like x:0 instead of transform:"translateX(0)" and xPercent:-100 rather than transform:"translateX(-100%)". Also, I'd recommend against animating "left" and "top" properties, and instead animate "x" and "y" (transforms) because they're typically more performant and the browser offers sub-pixel rendering for those. 


Happy tweening!

  • Like 1

Share this post

Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.


  • Recently Browsing   0 members

    No registered users viewing this page.