Jump to content
Search Community

How to animate a word somewhere in a sentence?

wildsol test
Moderator Tag

Recommended Posts

2 hours ago, PointC said:

I'd use the SpliText plugin and split by words. https://greensock.com/docs/v3/Plugins/SplitText

 

You can then use the getBoundingClientRect() method to find the width and move the words on each side accordingly.

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

 

 

Attached video with responsive animation.

If you shrink screen width until words come in tow rows, you'll see that the last word animating not only horizontal but also vertical.

I think with your solution it's very hard to make this kind of animation.Am i wrong or may be there is another solution?
 

Link to comment
Share on other sites

1 hour ago, wildsol said:

the last word animating not only horizontal but also vertical.

I think with your solution it's very hard to make this kind of animation.Am i wrong or may be there is another solution?

You will indeed have to build in support for that if you're wanting it. It's not too difficult with SplitText but it's not built in.

 

Why not just use the library that you're using in the demo above?

Link to comment
Share on other sites

Yeah, adding another row adds to the degree of difficulty, but it's just one more variable so it shouldn't be too bad.

 

2 minutes ago, ZachSaucier said:

Why not just use the library that you're using in the demo above?

I was gonna ask the same thing.

Link to comment
Share on other sites

1 hour ago, mikel said:

YES you can!

Thank you for your reply

If compare your solution with my codepen example, you'll see that the words after main word are move smoothly, but in your example they are move sharply

Link to comment
Share on other sites

54 minutes ago, wildsol said:

If compare your solution with my codepen example, you'll see that the words after main word are move smoothly, but in your example they are move sharply

Yep. You'd need to add logic to compare the position of the words before and after the change and then tween from one to the other.

  • Like 1
Link to comment
Share on other sites

22 minutes ago, ZachSaucier said:

Yep. You'd need to add logic to compare the position of the words before and after the change and then tween from one to the other.

Right now it's absolutely magic for me. How Vuejs did it by adding and removing classes without styling inline.

See the Pen vYLNMrM by wsjs (@wsjs) on CodePen

What calculation is under the hood is mystery for me... And I thought may be gsap has something like this in the engine :)

Link to comment
Share on other sites

1 minute ago, ZachSaucier said:

GSAP can change class names (which is pretty much all Vue is doing there), sure. 

Do you have any examples or link to documentation where I can search for solution - how to achieve same  effect with GSAP?

Link to comment
Share on other sites

1 minute ago, ZachSaucier said:

Rebuild the same class name switching that Vue does. Unfortunately we don't have the capacity to do every project that people request. You can change the class name by using className in GSAP. If you have GSAP-specific questions we're happy to help.

Thank you for your time. I'll continue searching answers

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