animation How do i achieve this text particular animation

[Marvdev]

Hey everyone,
 

Seeking Guidance on a Text Animation Effect

I'm working on a text animation where the text is revealed using "X" characters instead of traditional dots or a fade-in effect. Ideally, these "X" characters would be custom-rendered as SVGs.

Current Challenges

• The animation feels too contained—I want it to have a more open and airy feel while keeping the text centered.
• I need to implement a hover effect where each "X" subtly shifts or moves to add an interactive touch.

🔗 Current Progress:

See the Pen NPWyvow by marv-ink (@marv-ink) on CodePen.

What I’ve Tried

• Particles.js seems promising, but I'm still figuring out how to integrate it effectively with text.
• Someone generously shared some starter code, which I’ve tweaked, but I’m still refining the animation.

References & Inspiration

• Desired Hover Effect: Rosehip Example
• Similar Animation: Related CodePen

Looking for Suggestions

• Has anyone tackled a similar effect before?
• Would GSAP or another library be better suited for this animation?
• Any insights or suggestions would be greatly appreciated!

 

See the Pen yLGbmxa by chooking (@chooking) on CodePen.

Edited March 18, 2025 by Marvdev
To make clearer

[Rodrigo]

Hi @Marvdev and welcome to the GSAP Forums!

 

Maybe you're looking for the ScrambleText Plugin:

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

 

Give that a look and see what you can come up with.

 

Hopefully this helps

Happy Tweening!

[Marvdev]

Hey @Rodrigo,

Thanks for your response. Unfortunately, that's not the effect I'm looking for. It should resemble the video I've attached more closely.

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

 

If you're looking for ScrollTrigger effects, I'd recommend looking at the demos at https://codepen.io/collection/DkvGzg and https://codepen.io/collection/AEbkkJ - you may be able to use one of those as a jumping-off point. 

 

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

 

Otherwise, if you've got a GSAP-specific question just post that here along with a minimal demo and we'd be happy to take a look.