Letters Animate On Scroll and also collapse

[shahbazliaquat]

Hello there, I want to make animation in gsap which I want to follow but still can't achieve by doing multiple things and coding,

 

When I scroll letters animate,

every letter has its animation

they collapse with each other while animating,

 

here is the reference website that I want to make like that... https://raxo.co/

 

check the hero section on this website, I want the same as this...

 

if any body helps me with this, I am very grateful. Thanks

[GSAP Helper]

We love helping with GSAP-related questions, but unfortunately we just don't have the resources to provide free general consulting, logic troubleshooting, or "how do I recreate this cool effect I saw on another site?" tutorials. Of course anyone else is welcome to post an answer - we just want to manage expectations.  

 

What have you tried already? We love to see minimal demo's, that way we can see your thought process and thus better help you understand the tools!

If you're new to GSAP check out this awesome getting started guide https://gsap.com/resources/get-started/

 

You are welcome to post in the "Jobs & Freelance" forum for paid consulting, or contact us directly. 

[Rodrigo]

Hi,

 

Actually if you inspect that section of the page you'll see that is a lottie animation:

Is always a good idea to inspect the HTML with dev tools in order to know a bit more about how things are being done in a specific page, that is one of the best tools in a developers' tools set.

 

Another approach would be to use matter js:

https://brm.io/matter-js/

 

Good luck with your project!

Happy Tweening!

[shahbazliaquat]

Thank you @Rodrigo I did my complete research, and when I felt helpless with any animation then I came to communities regarding my questions,

 

I checked all possible ways, So I did this work 80% the best way I use, use splittext, and then select every word individually in JS and apply animations on every individual element so that they behave individually like I mentioned example in my question,

 

But,

 

But, one thing that I want to do, and I can't do that, is .... see (in example website) how words animate when they collapse with each other, and animate according to that collision,

 

Yes I make animation nearly the same, but I couldn't apply collision and after deep research from my side I can't understand how I do this with minimum code (because our end goal is always to make the site speedy,)

 

I will mention what I did yet in my next answer by attaching codepen,

 

I just want to make words animate on collision, that overall thing is...

[Rodrigo]

Hi,

 

Collision detection and physics momentum is not what GSAP was made for, the closest tool we have for that are the Physics2D and PhysicsProps Plugins:

https://gsap.com/docs/v3/Plugins/Physics2DPlugin

https://gsap.com/docs/v3/Plugins/PhysicsPropsPlugin

 

Beyond that you'll have to come up with the custom logic for that. @OSUblake came up with this simple approach a few years ago:

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

 

Maybe that can help somehow.

Other than that I know nothing on the subject so you should be looking in google or youtube to see how other developers approach this.

 

Happy Tweening!

[shahbazliaquat]

Yeah, I try to do this on core JS, lets see, If I do, I will attach codepen in this thread...