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

Web Animations API: reset animation on demand

I have a complex animation as a combination of KeyframeEffect's grouped into GroupEffect and SequenceEffect. In a very simplified version it looks something like presented in this JSBin https://jsbin.com/denucaq/edit?html,js,output The problem is…
spliter
  • 12,321
  • 4
  • 33
  • 36
1
vote
1 answer

How to get paper-menu-button to work?

I keep getting errors complaining about not being able to run animations when locally serving the following demo. Although it does work in my jsBin. http://jsbin.com/kadugokade/edit?html,console,output
1
vote
1 answer

Angular 4 animation state changes

I have an animation applied to two divs to animate them in and out of the void state. See: https://plnkr.co/edit/uCdBafYG7NZxVVppiTpo?p=preview Html:
lanky393
  • 292
  • 4
  • 12
1
vote
1 answer

Angular4 | Routetransitions - FadeIn / FadeOut

I'm trying to do a fade-in / fade-out on every route transition in Angular 4.0.1. I've seen countless 'slide-in/slide-out' tutorials, but those haven't worked for me. This is my app.component Component: @Component({ selector: 'app', …
L.querter
  • 2,332
  • 2
  • 13
  • 23
1
vote
1 answer

Web Animations API - Timing Animation in image-changer with delay/ endDelay

I try to create an image-changer with the WAAPI. There's a loop of pictures where delay is supposed to increase and endDelay to decrease, but it doesn't work in iterations: var changer = document.querySelector( '#gallery' ), children =…
1
vote
1 answer

Unicef web animations

Can someone tell me anything about gate animation and zoom page transition from this Unicef web, I want to try to make this cool animation. At least give me "keyword" how to find it. Are those made with html5 ?
Remn
  • 251
  • 1
  • 3
  • 13
1
vote
0 answers

d3.js Animation not working for all the iterations of loop

I am building a d3js liquid fill visualization as mentioned in http://jsfiddle.net/zm5p9LLe/. The example shows one liquid fill gauge. I am looping in and creating multiple gauges. But, the animation works only for last iteration of the loop. Is…
vinay
  • 11
  • 2
1
vote
1 answer

Web Animation inside SVG breaks when used as a background image

I just generated myself an SVG-based loading indicator using an online service, but every time a page loads that uses it I get a warning from Chrome which informs me that SMIL animations are getting deprecated, which is rather obnoxious. In an…
SeinopSys
  • 8,787
  • 10
  • 62
  • 110
1
vote
0 answers

Web Animations API w/ Promise Pattern - Code Cleanliness

I have a scenario where I'm trying to chain together web animations using promises (bluebird). By web animations I mean element.animate style animations. I've created a generic Animation Promise wrapper like this: function…
richie
  • 457
  • 1
  • 6
  • 19
1
vote
0 answers

Polymer Slide Up Animation in Neon Animated Pages

Im trying to add animation to neon-animated-pages like so:
1
vote
1 answer

How to set an exact size-text after the animation text?

This is my first approach to html5/css3 animations. I have a fadeIn and scale effect on text. When animation is finished, I have a problem. The text is resized. I dont want this. I wish that the text remains the same size at the end of the…
rul3z
  • 173
  • 1
  • 16
1
vote
0 answers

Skrollr's Smoothness is Breaking From data-top to data-top-bottom

I have a skrollr animation that basically slides in a H2 tag from the bottom going up and a div from the top going down at the same time. They are both fixed positioned and aligned to meet up horizontally centered on the screen when their parent is…
Brady
  • 733
  • 1
  • 6
  • 16
1
vote
3 answers

Javascript Animation Framework

I am looking for a javascript animation framework. I have found some: http://www.pixijs.com/ http://phaser.io/ http://paperjs.org/ These all are good. But I would like a GUI based animation creater framework, so that I can create translation,…
1
vote
1 answer

How can SVG animations be optimized regarding CPU load?

I am developing explanatory line animations using SVG/SMIL and encounter high CPU loads when watching the animations in Firefox. Are there any best practices for SVG itself and for declarative animations with regard to CPU performance? Since…
hlg
  • 1,321
  • 13
  • 29
1
vote
1 answer

Web animations API callback function

I've just discovered the Web Animations API, and I'm trying to figure out how to introduce a callback function for these animations..I've tried using the following $('.box_wrapper')[0].animate([ { right: '-100%' }, { right: 0 } ], { …
Novocaine
  • 4,692
  • 4
  • 44
  • 66