How do i achieve this text particular animation
Hey everyone,
I'm working on a text animation effect and could use some guidance. I want the text to be revealed using "X" characters instead of dots or a fade-in effect. Ideally, these "X" characters would be rendered as a custom SVG.
Current Challenges:
The canvas feels too contained; I want the animation to feel more open and airy while keeping the text centered.
I need to implement a hover effect where each "X" slightly shifts or moves for a subtle interactive feel.
This is what i have currently:https://codepen.io/marv-ink/pen/NPWyvow
What I’ve Tried:
I came across Particles.js, which seems useful, but I haven't figured out how to use it effectively with text. A kind person previously shared some starting code, which I’ve adjusted, but I’m still refining the animation.
References & Inspiration:
Example of the desired hover effect: https://rosehip.griflan.com/
Related CodePen: https://codepen.io/chooking/pen/yLGbmxa
Looking for Suggestions:
Has anyone worked on something similar? Would GSAP or another library be a better approach for this effect? Any insights would be greatly appreciated!
Thanks in advance!
I'm working on a text animation effect and could use some guidance. I want the text to be revealed using "X" characters instead of dots or a fade-in effect. Ideally, these "X" characters would be rendered as a custom SVG.
Current Challenges:
The canvas feels too contained; I want the animation to feel more open and airy while keeping the text centered.
I need to implement a hover effect where each "X" slightly shifts or moves for a subtle interactive feel.
This is what i have currently:https://codepen.io/marv-ink/pen/NPWyvow
What I’ve Tried:
I came across Particles.js, which seems useful, but I haven't figured out how to use it effectively with text. A kind person previously shared some starting code, which I’ve adjusted, but I’m still refining the animation.
References & Inspiration:
Example of the desired hover effect: https://rosehip.griflan.com/
Related CodePen: https://codepen.io/chooking/pen/yLGbmxa
Looking for Suggestions:
Has anyone worked on something similar? Would GSAP or another library be a better approach for this effect? Any insights would be greatly appreciated!
Thanks in advance!
A friendly place for developers to meet other devs, ask questions, get help, and just have a good time 🙂.
36,263Members
Resources
Was this page helpful?
