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
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
  • 675
  • 1
  • 6
  • 15
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,…
swapnilagarwal
  • 960
  • 7
  • 15
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,257
  • 12
  • 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,197
  • 3
  • 38
  • 59
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

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
  • 34,715
  • 41
  • 148
  • 226
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
  • 34,715
  • 41
  • 148
  • 226
0
votes
0 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
  • 43
  • 4
0
votes
2 answers

React v17.0.1 - How can an animation be triggered when a div comes into viewport?

I am working on a web-app which I'm building by using React.js. I want to trigger an animation when the div comes into the viewport. Currently, I am able to run the animations but the animations don't wait for the div to enter the viewport. Let us…
noob_nerd
  • 373
  • 3
  • 16
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
  • 1
  • 2
0
votes
0 answers

Swup.js animations cover every other elements on the page

So I've been experimenting with Swup a little bit lately (passing from keyframes to javascript Swup animations by the way) and evertime I place an animation on text or else, it goes over every other element on the page. I tried using z-index to…
Celoufran
  • 55
  • 7
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
  • 2,844
  • 3
  • 25
  • 51
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,110
  • 26
  • 42
0
votes
0 answers

Editing an animation video text with JavaScript in a simple webpage

I was given a job to edit a text in an animation video and make it downloadable, I tried exporting the animation as a Lottie file, rendering it as svg then making the edits but I could not convert the edited svg back to video and i could not render…
Prospee
  • 1
  • 3
0
votes
0 answers

How to use animate.css in angular transition?

I am trying to use animate.css animation css class to use in different angular transition, Like, may be for :enter i like to use animate__fadeIn and for :leave may be animate__fadeOut Any suggestions or snippets to use ?
Parkar
  • 1,709
  • 2
  • 10
  • 23
1 2 3
4
5 6 7