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

98 questions
0
votes
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
  • 3
  • 3
0
votes
1 answer

How to use WAAPI Document.getAnimations() function to get only WAAPI animation objects

According to the Mozilla Web Animations API docs, "The getAnimations() method of the Document interface returns an array of all Animation objects currently in effect whose target elements are descendants of the document. This array includes CSS…
Nancy Collins
  • 157
  • 2
  • 9
0
votes
1 answer

Image slider with Web Animations API

I've used WAAPI to create an image slider for a (kind of) sing along game. The slider is linked with a song, so the animation timing is very important. Using WAAPI keyframes (which are very similar to CSS keyframes) the timing offset is on a scale…
Nancy Collins
  • 157
  • 2
  • 9
0
votes
0 answers

How to manipulate WAAPI animation objects to loop through specific points in the animation timeline

I'm using Web Animations API to animate some img DOM elements to make an image slider for a (kind of) sing along game. The image slides represent bars in sheet music, and each slide contains two bars. The slides currently animate starting at slide0…
Nancy Collins
  • 157
  • 2
  • 9
0
votes
1 answer

Why does Web Animation API reverse() cause my animation to jump?

Docs everywhere say that calling reverse() while animation is playing is the same as setting playbackRate to -1, but my animation jumps like crazy when reverse() is used. playbackRate works fine. I would really like to use reverse() because it is…
jlkiri
  • 99
  • 6
0
votes
1 answer

Web Animations API - Setting Keyframes?

I have been playing around with the Web Animations API and have found it to quite intutive to get going. From my point of view, I want to make a pretty simple animation, where a element is rotated in one direction and after a button press is rotated…
niklas_den
  • 9
  • 7
0
votes
1 answer

What are the waapi valid css properties

Is there a difference in the general Animatable CSS properties listed here? Certain CSS properties can be animated using CSS Animations or CSS Transitions. Animation means that their values can be made to change gradually over a given amount of…
MaximilianMairinger
  • 1,308
  • 1
  • 9
  • 27
0
votes
1 answer

Compounding Value within an object used to slide dot across the page incrementally

I am unable to get a variable to function properly as the translateX value within my object. I am wanting to make the dot scroll across the page each time the next button is clicked. My code is only able to move it back and forth for the first…
idontwantnoscrubs
  • 205
  • 2
  • 11
0
votes
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
  • 15
  • 3
0
votes
1 answer

Waapi easing useing custom timeline in chrome is bugged

Introduction TLDR: https://codesandbox.io/s/elated-jennings-6budz. Why does red not do the same as blue in chrome? Is this a bug? Im useing chrome version: 76.0.3809.132. In firefox everything works as expected. Question Im using the waapi to…
MaximilianMairinger
  • 1,308
  • 1
  • 9
  • 27
0
votes
1 answer

Web Animation, how to animate the background rgba color

I want to animate the background color in rgba for a modal so it fades in. I cant use opacity as the div inside the modal I dont want to be transparent. I cant use Jquery but I am using React. I'm not getting an error by the below does not…
Bill
  • 2,602
  • 2
  • 35
  • 68
0
votes
1 answer

How to support vendor prefixes with anime.js

I am animating the clip path which works great until I get to safari, I need the -webkit- prefix. I know I can animate this using css, but I need to dynamically allocate variables into the clip path for the location. Something that cannot be done in…
Carl Piper
  • 71
  • 1
  • 9
0
votes
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
  • 57
  • 2
  • 9
0
votes
1 answer

Complex custom JS interactive animations - and how to create them?

I have been tinkering with JavaScript (React JS), Python, HTML and CSS for a while now. While doing so, I came across some occasional animations - most of them were standard css animations (e. g. transition: width 2s;). But more and more I am…
Xen_mar
  • 4,549
  • 4
  • 24
  • 40
0
votes
0 answers

Interactive web application with python

I am trying to make a web application that can run biochemical simulations, and I want to display an interactive animation of the simulation while it is running. However, the actual simulator is already made in python, and I'm worried that…
katzjm
  • 1
1 2 3 4
5
6 7