Skip to main content
Filter by
Sorted by
Tagged with
-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 ...
Muhammad Rahim's user avatar
-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 ...
Muhammad Rahim's user avatar
-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 ...
GobsRuiz's user avatar
  • 518
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 ...
Fabrizio Calderan's user avatar
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 ( ...
Izabela Marinova's user avatar
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"> <...
domrost's user avatar
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 ...
C.F.G's user avatar
  • 1,424
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() ...
slim.mckins's user avatar
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 ...
valve's user avatar
  • 25
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 ...
spots 727's user avatar
-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....
ludog's user avatar
  • 150
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 ...
Fahad Khan's user avatar
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 : ...
Marian07's user avatar
  • 2,522
-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 ...
Sree Raj's user avatar
-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 ...
Luiz Henrique's user avatar
-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 ...
Fantasterei's user avatar
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 ...
kirvel's user avatar
  • 671
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 ? ( ...
Rajesh's user avatar
  • 1
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 ...
Ottena Ot Rowe's user avatar
-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. ...
shane strange's user avatar
-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: ...
Rifa Fatima's user avatar
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%; ...
kerner1000's user avatar
  • 3,486
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 ...
Kousha's user avatar
  • 35.6k
-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 ...
David's user avatar
  • 1
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 ...
jmancherje's user avatar
  • 6,603
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 ...
Will P.'s user avatar
  • 8,727
-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 ...
Joe Walker's user avatar
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 ...
TUSK ACT 4's user avatar
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 ...
Eva Aggarwal's user avatar
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 ...
Jurgita-ds's user avatar
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"&...
Wh1t3r0s3's user avatar
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, ...
Савва Трубаев's user avatar
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 ...
Mohammed Malleck's user avatar
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 ...
G_S's user avatar
  • 3
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!...
Kimberly Cagalingan's user avatar
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; } ...
DA2.'s user avatar
  • 67
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: ...
Yulia Ivanska's user avatar
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:...
ucsendre's user avatar
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 ...
GoldenJoe's user avatar
  • 7,982
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" ...
Danish Shakeel's user avatar
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"> ...
ECD's user avatar
  • 9
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:...
Mo Beigi's user avatar
  • 1,745
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 ...
Eryk Wróbel's user avatar
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 ...
Everton Marinho's user avatar
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 ...
smaica's user avatar
  • 797
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 ...
Elikill58's user avatar
  • 4,772
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. ...
Dan's user avatar
  • 5,956
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 ...
user26412111's user avatar
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 ...
Nilton Schumacher F's user avatar
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 ...
Christopher Mellor's user avatar

1
2 3 4 5
154