wildsol Posted June 8, 2020 Share Posted June 8, 2020 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 1 Link to comment Share on other sites More sharing options...
PointC Posted June 8, 2020 Share Posted June 8, 2020 I'd use the SplitText 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 2 Link to comment Share on other sites More sharing options...
wildsol Posted June 8, 2020 Author Share Posted June 8, 2020 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? animation-responsive.mp4 Link to comment Share on other sites More sharing options...
ZachSaucier Posted June 8, 2020 Share Posted June 8, 2020 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 More sharing options...
wildsol Posted June 8, 2020 Author Share Posted June 8, 2020 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 comment Share on other sites More sharing options...
PointC Posted June 8, 2020 Share Posted June 8, 2020 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 More sharing options...
mikel Posted June 9, 2020 Share Posted June 9, 2020 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. 1 Link to comment Share on other sites More sharing options...
wildsol Posted June 9, 2020 Author Share Posted June 9, 2020 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 More sharing options...
ZachSaucier Posted June 9, 2020 Share Posted June 9, 2020 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. 1 Link to comment Share on other sites More sharing options...
wildsol Posted June 9, 2020 Author Share Posted June 9, 2020 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 More sharing options...
ZachSaucier Posted June 9, 2020 Share Posted June 9, 2020 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. 1 Link to comment Share on other sites More sharing options...
wildsol Posted June 9, 2020 Author Share Posted June 9, 2020 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 comment Share on other sites More sharing options...
ZachSaucier Posted June 9, 2020 Share Posted June 9, 2020 GSAP can change class names (which is pretty much all Vue is doing there), sure. Link to comment Share on other sites More sharing options...
wildsol Posted June 9, 2020 Author Share Posted June 9, 2020 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 More sharing options...
ZachSaucier Posted June 9, 2020 Share Posted June 9, 2020 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. 1 Link to comment Share on other sites More sharing options...
wildsol Posted June 9, 2020 Author Share Posted June 9, 2020 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 1 Link to comment Share on other sites More sharing options...
OSUblake Posted June 9, 2020 Share Posted June 9, 2020 Vue is doing FLIP animations. 5 Link to comment Share on other sites More sharing options...
Recommended Posts
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 accountSign in
Already have an account? Sign in here.
Sign In Now