Stack Overflow
Stack Overflow

Questions tagged [web-animations]

Web Animations defines a model for supporting animation and synchronization on the Web platform. It defines a programming interface to the model that may be implemented by user agents that provide support for scripting.

Official documentation, as published by CSS Working Group and SVG Working Group.

Github: https://github.com/w3c/csswg-drafts
IRC: ircs://irc.w3.org:6667/webanimations

108 questions
1
vote
1 answer

Polymer - Web Animations stagger AnimationSequence

I'm trying to stagger my AnimationSequence with a negative delay but the endDelay property does nothing when I use it on the AnimationSequence: var el = this.shadowRoot.querySelectorAll('.nav-item'); var animations = []; for (var i = 0; i <…
noiseisthis
  • 13
  • 3
0
votes
1 answer

Website animations lag on retina/higher resolution Macbook display but smooth on lower resolutions

We built website on React. Flawless on chrome, android and iPhones but Animations lag on safari macbook pro 16" default resolution 1792 x 1120. Website works amazing if display setting is one knotch down at 1650x1050. Display setting Is there a way…
93Lyn
  • 1
  • 1
0
votes
0 answers

.Lottie extension animations stop working after Webflow Code export

I built this website on webflow - Website The website contains 3 scroll based animations which are .lottie extension and 3 .json animations which are running on loop. Upon Code export, Only the .json animations are visible, .lottie animations do not…
Learner
  • 7
  • 3
0
votes
1 answer

Optimize simple CSS / WebAnimation, eg scale()

I've tried different solutions to animate a sidenav bar rise from bottom right corner. This is the last solution, maybe the best one ( because i'm animating the transform scale() ) in the previous ( width / height ) but the animation still sluggish…
cicciosgamino
  • 871
  • 3
  • 10
  • 29
0
votes
0 answers

Smoothly change text and width on hover

So I have a span element whose textContent changes when I hover over it. I want the old text to fade out, then fade in the new text. Also, since the new text is longer than the old one, the width of the span needs to increase smoothly to the new…
pgraf
  • 133
  • 4
0
votes
0 answers

How do I use Chrome's -webkit-mask-image in the web animations api?

I'm trying to animate the discrete [-webkit-]mask-image property, as shown below. The left image is animated with CSS3 properties which works in Chrome, Safari and Firefox. The center image is animated via the Web Animations API which works in…
patricksurry
  • 5,508
  • 2
  • 27
  • 38
0
votes
1 answer

what's the unsupported feature that breaks scroll timeline and web animations in mobile safari on ios 13 and below?

I'm trying to figure out why web animations API and scroll timeline are not working on mobile safari on ios 13 and below. Yes I know both features are not normally supported on those versions of safari, but I've added polyfills for both (can see…
Uche Ozoemena
  • 816
  • 2
  • 10
  • 25
0
votes
1 answer

What are the Performance/Efficiency implications of setting Web Animation API's currentTime property continuously?

What are the Performance/Efficiency implications of updating a Web Animation's currentTime property continuously within milliseconds? What I would like to do is tie a web animation's current point in its timeframe to the user panning their finger…
risingtiger
  • 851
  • 1
  • 11
  • 21
0
votes
1 answer

Incorrect animation progress when calling from setTimeout

I'm using Web Animations API to animate DOM elements. I want to display animation progress after 1 second. This is what I've tried. const animation = div.animate({ opacity: 0 }, { duration: 2000 }); setTimeout(() =>…
Ezys
  • 3
  • 1
0
votes
1 answer

Why does sharing a KeyframesEffect with two Animations cause one animation to never end?

In the following example, one animation will complete, and the other will keep going (because playState is not equal to finished): const keyframes = new KeyframeEffect(null, [ { // from opacity: 0, }, { // to opacity:…
trusktr
  • 44,284
  • 53
  • 191
  • 263
0
votes
0 answers

Get Animation KeyframeEffect property value for the current time?

How do we get the value of a property of an Animation KeyframeEffect for the current time? For example, suppose we have the following animation with a naive attempt to get a property's current value, without passing any element to the…
trusktr
  • 44,284
  • 53
  • 191
  • 263
0
votes
1 answer

JS: How to save chained animations as a variable to play, pause, etc

If i want to control a simple animation, I can set it to header variable and then do header.play() like this: let header= element.animate({ transform: ['scale(1)', 'scale(1.5)'] }, { duration: 1000, fill: 'both' }); …
RicardoAlvveroa
  • 226
  • 1
  • 8
0
votes
1 answer

I need a help to animated my web project with gsap staggerFromTo()

I want to popup my footer thumbnailed one by one with staggerFromTo() property. Here is my HTML code.
Nazmina
  • 17
  • 1
  • 1
  • 3
0
votes
1 answer

How to reverse an infinate animation in Web Animation API?

In Web Animation API, we can animate elements by Element.animate interface. The returned Animation object can be played, paused or reversed by .play(), .pause() and .reverse(). let img = document.querySelector('#happy-boy'); const boy_animation =…
amin
  • 3,672
  • 5
  • 33
  • 61
0
votes
1 answer

Web Animations API — how to play backwards rather than reverse?

The Web Animations API has the reverse method which allows the running animation to be played back in the opposite direction it is currently headed. However I have a scenario where I would just like to play a defined animation backwards. At present,…
Ben Frain
  • 2,510
  • 1
  • 29
  • 44
1 2 3 4
5
6 7 8