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! 🚀
1 Reply
maybe check out "Franks Laboratory" on youtube . he has some cool interactive particle & text effects (canvas) which may help you get further. He explains everything very well tutorial wise
https://www.youtube.com/@Frankslaboratory
YouTube
Franks laboratory
Creative coding experiments, generative art & game development with vanilla JavaScript & HTML canvas.
No frameworks and no libraries. Every project is explained line by line as I write the code using just plain vanilla JavaScript & HTML5 canvas element.
If you want to SUPPORT me you can use the links below and get some one my EXTENDED classe...