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
2
votes
1 answer

use Web Animations to create right slide and fade out single instance animation

I'm looking to create a web animation with the new spec and polyfill. The animation I am trying to create is have an element move 1024 px to right right and fade out. And then that is it, it doesn't reset, the animation just ends. I'm trying to…
wordSmith
  • 2,993
  • 8
  • 29
  • 50
2
votes
1 answer

Animate element over a curve with element.animate()

I need to animate translations of elements over paths such as the one shown below: Right now I am using a requestAnimationFrame callback that calculates the position on a De Casteljau curve and then sets the element position via an inline CSS…
Razor
  • 27,418
  • 8
  • 53
  • 76
1
vote
1 answer

Animation commitStyles does not actually set styles

I'm trying to call commitStyles() after an animation is complete so that the styles are retained at the end (by adding to the inline styles) in a way that is performant. However, nothing seems to happen from calling commitStyles, the element just…
user21950483
  • 23
  • 3
1
vote
1 answer

Web Animations API - does negative playback rate impact iterations?

I'm following along with MDN's Web Animations API docs here (full pen here) and I'm running into the following: I notice that the 'scenery' animations finish despite being created as follows: const sceneryKeyframes = [ { transform:…
Aaron Parisi
  • 464
  • 7
  • 15
1
vote
0 answers

How to make part of text that is on an image a different color on hover

example of what I'm trying to achieve https://dribbble.com/shots/15453707-Si-Design-P-C-Homepage-Motion I saw this example on dribbble where if you hover over the image, the text appears. The text is black on the white background and white on the…
Junk Mail
  • 19
  • 1
1
vote
0 answers

Toggle playbackRate on animation using web animations API (waapi) on several elements

I'm trying to make a toggle button that controls an SVG animation. It needs to toggle between normal and fast playback speed. Ideally, the end goal is to also set a timer so that it slow starts/stops as well - but I can't seem to get the…
Max
  • 11
  • 1
1
vote
2 answers

Would 'will-change' applied via the Web Animations API have the desired effect?

According to Google: The general rule of thumb is that if the animation might be triggered in the next 200ms [...] then having will-change on animating elements is a good idea. For most cases, then, any element in your app’s current view that you…
Slbox
  • 10,957
  • 15
  • 54
  • 106
1
vote
1 answer

anime.js animation not working, (the animation doesn't get initiated)

I just started with anime.js and wrote this basic code, but it doesn't work.
supragya27
  • 93
  • 2
  • 7
1
vote
1 answer

How to make Houdini's Animation Worklet work?

I finally got around to do some scroll-bound animation with the Animation Worklet, just to find out that Surma's demo is not working. Not even the one in the article. Is the API still behind a flag? Or did it change somehow?
Daniel Birowsky Popeski
  • 8,752
  • 12
  • 60
  • 125
1
vote
1 answer

Steps in Web Animations API

I was wondering if there is a way of making a web animation go step by step using the web animation API without having to manually declare offsets for the start and end of each frame. Obviously you can do this in CSS animations. This is for…
Wwjdtd
  • 11
  • 3
1
vote
1 answer

Is web-animations-api abandoned?

I've been interested in implementing animations in JavaScript recently, and I've been interested in waapi. So I studied the relevant parts and there were too many problems. First, there was virtually no support in the browser, and second,…
Code Dirty
  • 55
  • 4
1
vote
1 answer

Start angular animation when a mat-tab is active

I'm trying to animate a simple div inside a tab. The content of a tab is a different component. Parent component:
Marco Ripamonti
  • 77
  • 2
  • 12
1
vote
2 answers

Read style information from JavaScript Web Animations API, mid state

Given a web animation, such as the one over here: https://codepen.io/arxpoetica/pen/aXqEwe How do I get CSS or style information based on state between keyframes at any given point and time? Sample code: