marvxkiyi
KPCKevin Powell - Community
•Created by marvxkiyi on 3/17/2025 in #front-end
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! 🚀
2 replies
KPCKevin Powell - Community
•Created by marvxkiyi on 11/18/2023 in #front-end
How to achieve a scrolling upwards effect, while parts of prev one still in view
I have this animation that i would like to recreate using js and css based on a list of words from a cms. I lack animation skill, and am in desperate need of help in modifying my code to recreate the wanted behavior.
My code: https://codesandbox.io/s/2v85nk?file=/src/TextSlider.js
4 replies
KPCKevin Powell - Community
•Created by marvxkiyi on 11/13/2023 in #front-end
How can I make a sticky, pill-shaped button that expands on click to show more navigation links?
Found Nav while searching for inspiration and thought to attempt to recreate it. Turned out to be more complicated than I thought. Is there someone on here that knows how to achieve this? This is how far I got 😓 https://codesandbox.io/s/dynamic-button-tmft35?file=/src/styles.scss
This is where I found the sticky button: https://studiorotate.com
9 replies
KPCKevin Powell - Community
•Created by marvxkiyi on 10/21/2023 in #front-end
Infinite loop Scrolling Image Slider with buttons for navigation
How to create an infinite card/image slider that has a a smooth and uninterrupted slide that loops. Once a user interacts with slider, it should stop sliding and from then on only able to navigate by using prev/next buttons or drag-able on mobile.
Should work like this https://codesandbox.io/s/embla-carousel-github-issue-105-i2gji?file=/src/js/EmblaCarousel.js or the gif bellow (with buttons for navigation)
https://user-images.githubusercontent.com/273716/93586286-5e4abe00-f9a8-11ea-936b-6b09393e631a.gif
14 replies