Hey there, this is my first self-initiated Javascript project. I’m a designer who started this little project to learn more about controlling the DOM, animation, and timing with Javascript.
Here’s a link to the project:
My goal was to create a looping text replacement effect with full control over timing and animations.
I’m posting because although I think what I did works, i’m almost certain there’s a better way to do it. Was hoping someone could guide me in the right direction.
I also noticed a visual bug where you can see the next word in the last frame of the animate-out transition. I think this is because the animation ends at the exact time the replacement happens but can’t figure out how to fix it. Any help on that would be appreciated as well.
Lastly, I also noticed sometimes, the animation will play oddly when going from the last item in the array back to the first and haven’t been able to figure out why that’s happening.
Really cool bezier curves, great job! The rest looks a bit hardcoded - you put too much effort in controlling CSS with JS and it might be a problem as you’re using 2 different clocks that are not synchronized. It might be done in simpler and more declarative way:
This is so much more elegant and simple of a solution. I hadn’t realized you could apply unique timing functions to steps of a single animation, that’s awesome. Animationiteration is also great!
If you don’t mind, could you tell me more about how this part works? I can’t seem to wrap my head around what this is doing. ++iterationCount % textArray.length
edit: Ahhh… i think I get it. Dividing by the length of the array and returning the remainder ensures your always referencing a number 0-6, even when the iteration count is higher.
Correct! But you have to mind that in JS it only works in one way - forward. To work in both ways (for sliders for example) you need real modulo formula: