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
3
votes
2 answers

Use Web Animations API to expand div height 0 --> 'auto'

I'm trying to get my head around the web animations standard and their polyfill, as I saw it work nicely in the Angular animations library (you set an animation end value to '*' and this becomes 100% of the div size, but that uses a special Angular…
Simon H
  • 20,332
  • 14
  • 71
  • 128
3
votes
3 answers

Avoiding jerky animation when using mouseover and mouseout

I am using Web Animation API to create a simple animation so that when a user moves the mouse on the target, the animation should start from left to right and when the user moves the mouse off the target, the animation should get reversed and the…
GibboK
  • 71,848
  • 143
  • 435
  • 658
3
votes
3 answers

How do you check if webanimation API is supported in the browser?

Is there a way to check if a browser supports the webanimation API so that we don't need to load the webanimations polyfill? The documentation on github talks about Element.animate and Playback Control. I can check for $0.animate on an element but…
Andreas Galster
  • 415
  • 4
  • 17
3
votes
0 answers

How animate path in WAAPI?

How (if at all) can I animate d in web animation? In the example stroke and strokeWidth are working, d doesn't?!
ajo
  • 1,045
  • 4
  • 15
  • 30
3
votes
0 answers

Animate width attribute (not CSS property) of a SVG rect element using web-animations

I'm using web-animations API to animate a SVG element by changing its width: var elem =…
user3202324
  • 133
  • 4
2
votes
1 answer

Do I include vendor prefixes when animating with WAAPI animate()?

Do I have to also include vendor prefixes for transform? Or is it handled automatically? If I have to include vendor prefixes for the animation how do I do it? This is my current code: document.querySelector('.ball').animate({ transform:…
Brian Hinkle
  • 41
  • 4
2
votes
2 answers

How does react-transition-group CSSTransition work?

So I'm trying to use react-transition-group to animate the transition between the different sections of an app. I have the component I want to animate in the CSSTransition component in the following way: return (
German Cocca
  • 669
  • 1
  • 9
  • 17
2
votes
2 answers

How to loop through a CSS Animation?

I'm learning how to do animations in CSS. I know I can set the iteration-count property to infinite and it will run indefinitely, but I want the loop to be smooth. After coming back to 0% in the keyframe the animation is not smooth and changes to…
Abhishek Satyavolu
  • 77
  • 1
  • 11
2
votes
1 answer

How do I getAnimations() on a HTML Element in Chrome?

I'm on Chrome Version 67.0.3396.99 (64-bit). Mozilla documentation on Web Animations API describes a method getAnimations() like so: document.getAnimations().forEach( function (animation) { animation.playbackRate *= .5; } ) But it doesn't…
Marvin Danig
  • 3,738
  • 6
  • 39
  • 71
2
votes
1 answer

web-animations-js giving error in IE 9 SCRIPT5007: Object expected; web-animations.min.js (15,23868)

I am using angular 5. Followed following steps: add web-animations-js as a dependency : npm install web-animations-js And uncomment the following line in polyfils.ts import 'web-animations-js'; // Run npm install --save…
Always_a_learner
  • 4,585
  • 13
  • 63
  • 112
2
votes
3 answers

angular animation not working on production build (skips to final state without actually animating)

I have an animation, which works fine on stackblizt (https://stackblitz.com/edit/burger?file=app%2Fburger%2Fburger.component.ts) as well as locally with ng serve --aot, but it seems to be skipping straight to the final state on production build (ng…
fxck
  • 4,898
  • 8
  • 56
  • 94
2
votes
4 answers

How to detect changes made by CSS3 animation or web animations API?

How can I detect changes made by CSS3 animations or web animations (Element.animate)?? (Sorry for my bad English! this is my first question in Stackoverflow) I know about MutationObserver, it responds only if I change the inline style or if I use…
Ibrahim Al Khalil
  • 143
  • 1
  • 10
2
votes
1 answer

Jittery text during scaling animations with JavaScript

When using scaling to change the size of an HTML element containing text, the text jitters during the animation, but only if being animated with JavaScript libraries. The jittering is most visible when the animation is slower and the text is…
Aaron Beaudoin
  • 1,107
  • 1
  • 10
  • 23
2
votes
1 answer

Web animations API with svg element

Zhaowei
  • 293
  • 1
  • 3
  • 8
2
votes
2 answers

Polymer animation get Keyframes error

I have created a simple animation for my elements, but instead of cool effects I get Uncaught TypeError: Keyframes must be null or an array of keyframes.