I'd like to make a CSS animation where the timeline is based on the view of the element. However, it won't work, I already searched for it but no results. I got a page with a container. In this container,…
I've created a hover effect for containers via css animations. It's not so much about the color change, as the final solution is to switch images instead of divs. The loop works, but the timings don't work as expected in…
i would like to create a framer motion animation in React that removes and element on click and visualizes another element. Here is an example example This is my code: {!tileOpen ? ( <motion.div whileHover={{ scale: 1.2 }} onClick={handleTrigger} className={styles.tile}…
I am trying to make a button that will expand when you hover over it with the mouse. However, i cannot seem to get the button to change sizes. I have tried to use animations but that also didn't work.…
I have multiple background images, which should change by animation. Here is a MWE: * { margin: 0; padding: 0; box-sizing: border-box; } .container { height: 100vh; width: 100%; position: relative; } .overlay { background-color: rgba(0, 0, 0, 0.5); height:…
I have a custom SVG for the letter CG. I want to add a "loader-spinner" animation that fills and unfills the letters C and G. I've managed to get an animation where the outline of these letters is drawn/undrawn, but…
I tried a lot of stuff, but I cannot figure this one out. I want to make a small red line that goes around a box of content indefinitely and stays basically inside the border. However, as the animation progresses,…
I would like to apply a shimmer animation to a collection of HTML elements but have it be in unison as if it is one shimmer running through all the elements. I have seen this done with animations within Text…
I made this animation using CSS and JavaScript. When I hover on the div, the background-color changes with a circle animation. This code is working: <!DOCTYPE html> <html lang="it"> <head> <style> #d1 { width: 300px; height: 300px; background-color: lightblue; position:…
My goal is to start a number counter from 0 to 100 as soon as the number enters the viewport. With my current solution, I have two issues: The number jumps back to 0 once it finished counting to 100…