7,688
questions
-1
votes
0
answers
11
views
How to Create a Smooth Scrolling Timeline Animation in ReactJS? [closed]
I need help creating an animation in ReactJS. Does anyone have any ideas or experience with this? Here’s an example of the animation I'm aiming for: UCLA Timeline Animation. Please check it out and ...
-1
votes
0
answers
8
views
Seeking Guidance on Creating Animation in ReactJS
I need help creating an animation in ReactJS. Does anyone have any ideas or experience with this? Here’s an example of the animation I'm aiming for: UCLA Timeline Animation. Please check it out and ...
-2
votes
0
answers
27
views
animation on the same axis in a circle [closed]
I need to make an animation of a conversation bubble that rotates in a circle on the same axis, but I'm having tremendous difficulty doing this smoothly. I don't know how to search, because I can't ...
0
votes
0
answers
40
views
transform-origin applied to a <clipPath> is wrong on retina displays
Context:
I'm trying to reveal an element on page scroll using the shape of a "blob" with a CSS animation-timeline animation, so at this moment, this code must be tested on a recent Edge or ...
0
votes
0
answers
52
views
CSS animation acts weird for one particular item
I have a green circle with many images inside of it.
Upon loading, the images have a simple animation in which they show up and bounce back at the positions I have set up. However, one of the images ( ...
0
votes
0
answers
64
views
How do different browsers calculate a CSS translate animation containing images?
I am building a small app with a horizontal infinite scroll animation containing a set of images. In essence, it looks like this:
index.html
<!doctype html>
<html lang="en">
<...
0
votes
0
answers
11
views
Camtasia timestamp-like dynamic caption timing in the saved project file
Dynamic caption of Camatsia is an easy and AI-based way that convert speech to text and generate animated caption for the video. But there is no way to edit wrong or not-detected parts of speech. So I ...
0
votes
0
answers
41
views
anime.js elements enter from bottom and animate vertically up out of viewport
Using anime.js how can targeted DOM elements be animated to enter the viewport from the bottom, move vertically upward, and exit the viewport off the top? Is a timeline required or a simple anime() ...
0
votes
1
answer
32
views
Keyframe Css animation not working in Nextjs 14
I wanted to apply based css animation using keyframe. While I was able to get it to work using taiwind css. I was unable to get it to work using css. Maybe I am missing something. I would like to know ...
0
votes
2
answers
62
views
I can't figure out why view based animation is not working
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 ...
-1
votes
1
answer
40
views
ffmpeg invalid pts <= last "Error submitting frame to the encoder"
I'm using this command to extract keyframes from long videos (full movies).
ffmpeg -i data/full_videos/pleasantville_1998.mp4 -filter:v "select='gt(scene,0.1)',showinfo" -vsync 0 frames/%05d....
0
votes
0
answers
40
views
Curved div infinite scroll buble cover image animation
I want to create an animation where bubbles scroll infinitely from right to left in the background. The animation should have a curved path with space between the bubbles, similar to the example shown ...
3
votes
1
answer
63
views
Convert CSS animation-timeline to JavaScript cross-browser
I have written a CSS animation/parallax effect that works with animation-timeline and I like the result.
This is the code
[data-section-id="66d153c7fa59f85ae17bdd36"] video {
position : ...
-1
votes
0
answers
20
views
Auto scrolling down when clicking on animation buttons
I am designing a website and I have a slider animation in the second section. When I click on buttons in the animation, the page is automatically moving down a bit to the next section. When this ...
-1
votes
0
answers
84
views
Stacking Cards on Scroll
'm trying to recreate a stacking cards effect on scroll similar to this example on Awwwards. My goal is to have each card stay pinned at the center of the screen while scrolling, and only move out of ...
-1
votes
2
answers
76
views
Animation-Delay in Infinite Loop aren't consistent
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 ...
1
vote
1
answer
91
views
Make the element sticky untill the scroll driven animation is finished
Here's what I'm trying to achieve:
-when the elements become visible to the user, the scroll-driven rotate animation starts on them one-by-one,and all 3 elements become sticky (meaning that they do ...
0
votes
2
answers
48
views
framer-motion gesture animation
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 ? (
...
0
votes
1
answer
40
views
How can I fix my 3d rotation cards animation so my header and footer aren't smooshed togeather?
I'm trying to make a website for my husbands business. I have been messing around with different looks and layouts and he really likes this card animation but it messed up my entire page now my header ...
-1
votes
3
answers
45
views
How to expand a button using :hover in CSS? [closed]
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. ...
-2
votes
1
answer
53
views
Issue in opacity animation [closed]
I am trying to build an animation where three dots display a loader.
Please refer the Code pen link : codepen
@keyframes dot-elastic-1 {
0%, 33.33%, 100% {
transform: scale(1, 1);
opacity: ...
1
vote
2
answers
55
views
CSS animation starts delayed
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%;
...
4
votes
3
answers
97
views
SVG/CSS Loader spinner animation of filling/unfilling letters
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 ...
-2
votes
1
answer
93
views
CSS sliding strip animation
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 ...
6
votes
2
answers
138
views
How to apply a CSS shimmer animation to a collection of HTML elements together
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 ...
1
vote
1
answer
54
views
CSS @counter-style similar to toLocaleString
Is it possible to have a list counter style that behaves like number.toLocaleString()? Or at the very least, show commas in the thousands places?
Basically to show like 1,234 (or ideally 1.234 ...
-1
votes
1
answer
62
views
Surely there is an easier way to do this? HTML, CSS, JS
I'm creating some animated lines that run from one side of the page to the other, while they are doing this they change in size, there are currently 5 animated lines and I may add more, but i also ...
1
vote
0
answers
64
views
i want to make an animated arrow in html/css
I want to make this arrow animation. I want it to be centered and align the three lines that make the arrow shape. I want it to be smooth.
I'd like the three lines (that make the arrow) to align ...
0
votes
0
answers
27
views
How to ensure my CSS animation doesn't restart onClick
I made a small CSS animation of a vinyl record png picture being rotated with the following code:
.vinyl-record-playing {
height: 500px;
width: 500px;
animation: spin 10s linear infinite ...
0
votes
0
answers
27
views
Text wrapping around an object in the center while using css animation
I have created the below animation that contains 3 side by side text columns (newspaper style) continuously scrolling up and a separate div element with some text appearing later in the center of the ...
0
votes
3
answers
34
views
Clip-path animation with JavaScript doesn't work with classList but only changing style property
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"&...
0
votes
1
answer
41
views
Video MP4 does not work in the mobile version of the site
I have an animation saved as MP4 video file and it does not work in the mobile version of the site, although through the element explorer in the smartphone browser, everything is fine.
On the phone, ...
0
votes
0
answers
21
views
Why is Animationend firing after a delay with timing function as linear?
I simply want the animationend event to fire as soon as the animation completes visually.
The most similar answer I could find for this was this, but unfortunately using linear in my cases did not ...
0
votes
1
answer
58
views
SVG animation applied with mask
I'd like to apply an SVG animation to my download button.
In my practice, the arrow is supposed to scroll down recursively in the red box.
It would be something like this.
The animation still expects ...
0
votes
0
answers
25
views
Changing the code so that the gradient animation only applies to the top 15% of the page
I got this code through a CSS animated gradient and I was wondering if there's a way to make sure only the top 15% of the page has the animated gradient, while the rest of the page stays black? Thanks!...
0
votes
1
answer
19
views
Hide element until animation delay is done?
I am animated some elements with keyframe animation. The animation is shifting opacity from 0 to 1:
@keyframes example {
0% { opacity: 0; }
10% { opacity: 0; }
11% { opacity: 1; }
12% { opacity: 0; }
...
0
votes
0
answers
46
views
CSS issue with animation-back of nth-of-type
I'm trying to target every nth-of-type for returning to the original position sequentially like moving to the right in this way. I'm new to programming.
I tried to assign to each different transform: ...
0
votes
1
answer
42
views
svg inline css animation keyframes timing
I want to make an animated svg logo using css animation with keyframes.
The animation works well, but I can not find a way to properly time the keyframes.
I want to achieve the below timeline:
step 1:...
0
votes
0
answers
36
views
How can account for variable timing of adding words in this Javascript+CSS message animation?
I'm writing an animation for a streaming text response in a messaging service. Each word drops in to the bubble, which resizes dynamically.
It looks good with the right timing values, but try setting ...
1
vote
2
answers
48
views
Border bleed on a button with slide animation
Problem
I am trying to create a button with a sliding animation. The button has a border-radius and uses pseudo-elements to achieve the effect.
Here is the markup:
<div role="button" ...
0
votes
0
answers
43
views
Run css loading animation on hover once (at page loading)
I am making a css loading animation for a div that will show movie details on hover. Here is my html code:
<div class="tooltips "><img src=".." alt="img">
...
0
votes
0
answers
22
views
Text Blurring Issue with react-tooltip and react-modal when using opacity/transform animations in Chrome
I am working on a project using two libraries: react-modal and react-tooltip.
Goal:
I want to create a reusable React component that provides a simple modal window, which renders its children.
Problem:...
0
votes
0
answers
26
views
Pull effect when at end of overscroll element
How to achieve in CSS that pull effect when reaching the end of the content of a scrollable container?
I was browsing my website on mobile, and I am frustrated when at the end of the horizontal scroll ...
0
votes
0
answers
26
views
Problems with the animation of my drag & drop interface
The drag and drop animation was expected to happen when trying to move a card from one container to another.
I'm using dnd-kit to build a kanban board, but I'm having problems with the card animation ...
0
votes
1
answer
61
views
Animate Count of Number when element in Viewport in pure CSS
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
...
1
vote
1
answer
38
views
Added content to fixed height make it not viewable, and using null height break animation
I have a button that should hidden area with nice animation. It's using height attribute to make the animation.
The issue is, when I add content to the "hiddenable" area, the content isn't ...
0
votes
1
answer
30
views
Sequentially cycle through unknown number of words using CSS animation
I'm looking to make a word rotator, whereby an unknown number of words slide in for 1 second, pause for 3 seconds, then slide out for 1 second, one after another, then repeat, using CSS if possible. ...
0
votes
0
answers
32
views
Fusion animation with Javascript driven by scroll (GSAP)
i have this animation where the plasmid (circle thing) moves towards a row of objects (blue lipids) and i want the lipids to form a circle around the plasmid while it is passing through the row.
I ...
0
votes
1
answer
55
views
Text fill effect but controlled by percentage
I'm attempting to create a text fill effect that will be controlled by a useState.
I have the following text:
According to a state I want it to be filled from left to right, although the last letter ...
1
vote
4
answers
118
views
Animate on removal from dom
What is the correct way to do animations when removing something from the DOM?
It seems like no matter what I do, when I remove something form the dom, it doesn't trigger a re render until the items ...