[Letters Animate On Scroll and also collapse]

will make a codepen demo and upload below in this post how I make this animation

[Letters Animate On Scroll and also collapse]

On 5/25/2024 at 2:14 PM, Betts said:

Hi! I want to create the same animation got inspo from the same website! Did you figure it out? I have been working with framer motion and matter js and got a bunch of cool text animations but not quite there yet with the desired outcome. 

bro I do this with simple JS, yeah it takes my 4 to 5 days to understand things and finally i do this in simple js with GSAP ScrollTrigger

[Letters Animate On Scroll and also collapse]

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

[Letters Animate On Scroll and also collapse]

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

[Letters Animate On Scroll and also collapse]

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

[I want to make parallax mousemove effect like this...]

hi, thanks for your response, Actually I wanted to do that on that day, so I made logic on my own, and I did my job within an hour, thanks man

[I want to make parallax mousemove effect like this...]

Hey there! can you please guide me how to make make image moves on mouse move parallax effect like a website I mentioned below

 

https://www.rockmuse.co/

 

Check the hero section of this website, I want to make like this,

 

I make something like this with core js but it is not exactly like this, I don't know how they do this using gsap...

[GSAP Scrolltriger Pinning being Jumpy]

Thank you very much man, it's working @akapowl