I have created this page and when the “got it” button on the top panel is clicked, the panel will slide up and disappear while the page will also move up to cover the panel space. I have noticed that when the animation plays, it is not that smooth as white space can be seen in the split second tha…
Tag: css-animations
How to Fade In and Insert Element then Fade Out and Remove Element?
Description I have a <button> that, when clicked once, sets the class of a <div> element to “fade-in” and inserts the <div> element in the DOM. This visually fades in the <div> element after insertion into the DOM. When the button is clicked again, the button sets the class…
How to make a pure-CSS animation of CLOCKWISE rotation past 359 degrees
I’m having an issue with pure CSS-based rotation using transform: rotate() coupled with transition: transform. When rotating past 360 degrees, the transition causes a counter-clockwise rotation. See code below or on CodePen. I know I can just keep increasing/decreasing the degree value (e.g. 356->360…
Timing in my React text animation gets worse on subsequent loops through an array
I have React code with a CSS animation in a codesandbox and on my staging site. You will notice that over time, the animation timing drifts. After a certain number of loops it presents the text too early and is not in sync with the animation. I have tried changing the timing making the array switch happen fas…
CSS chain multiple animations from different classes
I am developing a ReactJs app, I need to animate a bus in a visual path. The bus should make stops. So the bus first go from A -> B , then when the user click a button it goes from B -> C , ect.. I have already made the animations and the logic Here I add classNames based
SVG stroke animation not working in Safari
My JS code goes over each path, and adds a stroke-dasharray and stroke-dashoffset according to path length: Then, My CSS just animates the dashoffset to 0, while lowering the stroke opacity and raising the fill opacity: This works perfectly in Chrome – the animation shows the paths being drawn, but in S…
svg stroke-dashoffset animation with percentage values
I have been successful in animating stroke-dashoffset with value as <length> as folllowing However, I am trying to figure out how can I calculate the exact % value in css if I decide to use <percentage> instead of value. I came to know from this post that percentages are calculated in respect to t…
REACT : getting error while re-rendering components using setState hook
I’m trying to change an inline style property of several items that have position info stored in a useState hook as well on the style property of each item rendered. I wanted to change the CSS value of all the items except the one I clicked on. I devised a function to do so, however when I try to update
How to make floating text onclick like cookie clicker?
When clicking the “big cookie” in cookie clicker, there is a popup showing how many cookies you earned (+276.341 septillion in this image), which slowly moves upward and fades out. I wanted to implement a similar feature in my game, I sucessfully made the moving up and fading out part with css ani…
Smooth animation when turning off a conditionally rendered component in React
My App.js is as below I set the state of ordering variable using a checkbox Then I use this to conditionally render the QuantityChange component like so All this works fine & the component is render as desired. I want to have a smooth transition of entry & exit of this component. The animation on entr…