Jump to content
GreenSock

Search In
  • More options...
Find results that contain...
Find results in...
wildsol

How to animate a word somewhere in a sentence?

Recommended Posts

In Vuejs there is css animation library that do this crazy thing so easy and clear. 
How to reach the same effect with gsap? Maybe there is ready-made methods for this?

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

  • Like 1
Link to post
Share on other sites
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 post
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 post
Share on other sites
Quote

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

Thank you for answer!

Yes, right now I'm using them both and i was wondering if I can use gsap everywhere.

 

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

 

YES you can!

 

See the Pen abdvXdP by mikeK (@mikeK) on CodePen

 

Happy splitting ...

Mikel

 

P.S.: The statement is a fake. I have no cars.

  • Like 1
Link to post
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 post
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 post
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 post
Share on other sites
3 minutes ago, wildsol said:

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

It's more so the magic of flexbox and CSS transitions. Vue isn't doing much.

  • Like 1
Link to post
Share on other sites
Just now, ZachSaucier said:

It's more so the magic of flexbox and CSS transitions. Vue isn't doing much.

May be... GSAP has CSS Plugin. Maybe it can do the same thing as on the demo?

Link to post
Share on other sites

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

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

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.

  • Like 1
Link to post
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 post
Share on other sites

Vue is doing FLIP animations. 

 

 

 

  • Like 5
Link to post
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.

×