Jump to content
Search Community

Trying to reproduce font animation

Leonardo Brito test
Moderator Tag

Warning: Please note

This thread was started before GSAP 3 was released. Some information, especially the syntax, may be out of date for GSAP 3. Please see the GSAP 3 migration guide and release notes for more information about how to update the code to GSAP 3's syntax. 

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

Link to comment
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
Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.
×
×
  • Create New...