Jump to content
Search Community

SplitText animation

clieee test
Moderator Tag

Recommended Posts

Hi,

 

See my attached video clip, Im trying to find a good way to create this with SplitTextPlugin. My requirements are:

- this text should support multiple lines (I will use it as a "headline component")

 

What I'm having trouble understand the best way to accomplish is how they should come in / grow from the right within their word. Like a right: 0 as a starting point for each character within their word... ?

 

 

Link to comment
Share on other sites

Hey clieee. This animation has multiple things happening at the same time:

  • Scaling each letter (it looks like the origin is something like "center right").
  • Translating each letter in the x direction.
  • Rotating each letter in the y direction.
  • Blurring (this is not performant in a browser - I'm betting you'll have to drop it for performance reasons).

It looks like the origin for each letter is the bottom right of each word. So you likely want to split by letter and word so that you can have a container for each word. Absolutely positioning each letter is probably a good idea but you need to set an explicit width and height of each word before you set that (so it doesn't collapse its sizing). 

 

GSAP's staggers can help you with the timing. You'll want to stagger both by word and by letter (two staggers).

  • 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...