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

Animate children when hover at parent with Framer-motion

Using framer motion I want to animate my Icon component to rotate 90 degrees when hovering at the parent element which is a button. Visit our Industry {/*Animate this Icon to…
ArchNoob
  • 3,946
  • 5
  • 32
  • 59
10
votes
3 answers

How do I perform infinite animations in Angular 2?

Basically, I want to make use of the web-animations-api polyfill in angular (4 currently) to perform infinite animations on elements. Let's see a basic non-angular example: var ball = document.getElementById('ball'); ball.animate([ {…
Mauro Aguilar
  • 1,093
  • 13
  • 22
9
votes
2 answers

Creating a transition when changing properties in angular 2/4

I want to create a transition effect whenever I change the value of a property. I tried doing the following @Component({ selector: 'image-holder', template: `
Bazinga777
  • 5,140
  • 13
  • 53
  • 92
7
votes
0 answers

Angular 2 dynamic values in animation

I've just recently started messing around with Ng2 and I'm now developing an app with ionic2. I'm digging into the animation part for the first time and I've ran into some issues. I have a ngFor that basically repeats s with different widths. Each…
tiansivive
  • 506
  • 1
  • 4
  • 16
5
votes
2 answers

Animate DOM properties (scrollTop) using Web Animations

Web Animations is a new w3c spec, just to be clear what we're talking about. Either way, I wanted to scroll to a certain element smoothly. Using jQuery's Animate function this was always a no-brainer, but this seems to not be as simple with Web…
David Mulder
  • 26,123
  • 9
  • 51
  • 114
4
votes
2 answers

Composite Web Animations

Im trying to composite some animations using the Web Animations API (https://developer.mozilla.org/en-US/docs/Web/API/Element/animate). I want to play an intro animation which scales my item, then have it react to hoover and click events to play…
Martijnh
  • 333
  • 2
  • 10
4
votes
0 answers

Angular animation not working for iOS 7

I'm having an issue in my Angular 5 app: I have the trigger for an angular-animation placed in a ul tag, which is meant to change its height from 0 to *, and it does work well in all devices eccept for devices running iOS 7. When testing those, and…
Cyberpunker
  • 113
  • 1
  • 2
  • 9
4
votes
3 answers

Angular 4 component responsive animations

I am working on an Angular responsive app, which on mobile it has a drawer. I love Web Animations API implementation in Angular, but I can't find a place where I can configure animations based on my media-queries breakpoints. All I can find is…
neoswf
  • 4,730
  • 6
  • 39
  • 59
4
votes
0 answers

Long frame times are an indication of jank

Google and their developers say you should test for performance and get as close to 60fps, but the tool seems to be broken or they do a shitty job at this too: Visit google.com and search for something Open chrome developer tools, Go to timeline…
Adrian Florescu
  • 4,454
  • 8
  • 50
  • 74
4
votes
1 answer

Polymer curved motion path

As I was making some animations according to the Material Design Guidelines, I got stuck while making the curved motion path. First of all, I am using Polymer to build as much of the project as possible. I want to implement an animation like shown…
Bart Koppelmans
  • 195
  • 1
  • 11
3
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
  • 531
  • 1
  • 6
  • 21
3
votes
1 answer

JS: how to sync timing of multiple animations?

When I dynamically add an item that animates with JS, how do I get them to be in sync on the same timeline as shown here: http://youtube.com/watch?v=AGiTmjFHs8M&t=9m23s ? I saw a tutorial that showed a benefit of using JS animation vs. CSS is…
RicardoAlvveroa
  • 226
  • 1
  • 8
3
votes
1 answer

Angular 5 Animations are not working on iOS 10.3 Safari

I'm using @angular/animations on my page. It works perfectly on Chrome, Firefox, Safari(Desktop) but the divs that has animation are not visible in Safari (iOS). I imported web-animations-js in my polyfills.ts file. **versions** npm 5.5.1…
Emre Alparslan
  • 1,022
  • 1
  • 18
  • 30
3
votes
3 answers

Animate an image swap in Angular 4 (Was ng-animate-swap in AngularJS)

I'd like to animate an image swap in an angular 4 app. As the controller replaces the img src property the old image should fade away and the new appear. In AngularJS this was possible by changing the opacity with ng-animate-swap. However, Angular…
duffy
  • 615
  • 1
  • 9
  • 25
3
votes
2 answers

override the styles set by web animation api

I am using web animations api to animate a div to a specific height. I am using fill mode 'forwards' to preserve the height post animation. However, later on I would like to manually set the height through CSS back to 'auto', but by setting the fill…
tt9
  • 5,784
  • 6
  • 42
  • 65
1
2 3 4 5 6 7 8