Jump to content
Search Community

Heading animation with multiple words

mdelp test
Moderator Tag

Recommended Posts

Hi all,

 

I'm looking for some feedback to find out if I can use GSAP to build a specific animation, based on what Sendgrid does in their hero (https://sendgrid.com/).

Basically I want to have multiple words inside a heading that change after x seconds and fire off some animations during each transition to a new word.

 

I wonder if this is possible with GSAP, specifically how to make sure the width of each word is calculated and how this would scale from mobile up to desktop.
I'm just starting out with GSAP so I'm still learning, any help or pointers are much appreciated!

Link to comment
Share on other sites

2 hours ago, mdelp said:

I wonder if this is possible with GSAP

 

Why wouldn't it be? If you can build it, GSAP can make it move.

 

2 hours ago, mdelp said:

specifically how to make sure the width of each word is calculated

 

You can use getBoundingClientRect.

https://developer.mozilla.org/en-US/docs/Web/API/Element/getBoundingClientRect

 

And combine that with a FLIP technique to animate the words spreading apart.

See the Pen oNveWXv by GreenSock (@GreenSock) on CodePen

 

The line animation can be done by animating the scaleX of a line from 0 to 1. Kind of like here when you focus on an input element.

See the Pen rQwwjj by osublake (@osublake) on CodePen

 

2 hours ago, mdelp said:

how this would scale from mobile up to desktop.

 

I don't think that animation will work well on mobile as there isn't enough room to put all the words on one line.

 

 

  • Like 3
Link to comment
Share on other sites

23 hours ago, mikel said:

Hey @mdelp,

 

You can animate almost everything:

 

 

 

 

Happy tweening ...

Mikel

@mikel is there a way to give an ease to the width change, e.g. if a word is longer than the previous, could you first animate the with change and then show the new word?

 

I'm new to both JS and GSAP, so all help is much appreciated!

Link to comment
Share on other sites

3 hours ago, mdelp said:

What I'd like to achieve is when the word changes, instead of the words "of the page" jumping to the right or left, give it a transition so it has a smooth animation.

First off, you need to set display: inline-block; on the span so that you can animate its width. Then you need to calculate the values it should animate to. I recommend putting it within a function so that you don't have to make a bunch of new tweens every time you want to add a word to the list:

See the Pen BaNyyVP?editors=0010 by GreenSock (@GreenSock) on CodePen

  • Like 2
Link to comment
Share on other sites

@ZachSaucier thank you very much, that was super helpful and something new I learned.

 

Just wondering now if there is a way to make sure the width calculation stays correct when the viewport is resized, maybe make sure to refresh everytime a resize was done or something?

Link to comment
Share on other sites

1 minute ago, mdelp said:

Just wondering now if there is a way to make sure the width calculation stays correct when the viewport is resized, maybe make sure to refresh everytime a resize was done or something?

What do you mean? The demo above doesn't change font-size or anything when the viewport changes size.

 

Are you talking about if the line has to wrap? That's a whole different beast and is a lot harder to setup but is doable still. I disabled the next text from wrapping in the demo above. 

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