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
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
  • 4,726
  • 13
  • 44
  • 76
7
votes
2 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
  • 2,803
  • 3
  • 25
  • 51
7
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
  • 579
  • 7
  • 18
6
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
  • 448
  • 1
  • 4
  • 15
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
  • 24,033
  • 8
  • 45
  • 104
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
  • 93
  • 2
  • 8
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
  • 3,744
  • 6
  • 43
  • 67
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
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
  • 896
  • 13
  • 28
3
votes
1 answer

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
  • 475
  • 5
  • 22
3
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,269
  • 4
  • 35
  • 52
3
votes
3 answers

Avoiding jerky animation when using mouseover and mouseout

I am using Web Animation API to create a simple animation so that when a user moves the mouse on the target, the animation should start from left to right and when the user moves the mouse off the target, the animation should get reversed and the…
GibboK
  • 64,078
  • 128
  • 380
  • 620
3
votes
3 answers

How do you check if webanimation API is supported in the browser?

Is there a way to check if a browser supports the webanimation API so that we don't need to load the webanimations polyfill? The documentation on github talks about Element.animate and Playback Control. I can check for $0.animate on an element but…
Andreas Galster
  • 415
  • 3
  • 14
3
votes
0 answers

How animate path in WAAPI?

How (if at all) can I animate d in web animation? In the example stroke and strokeWidth are working, d doesn't?!
ajo
  • 895
  • 4
  • 13
  • 29
3
votes
0 answers

Animate width attribute (not CSS property) of a SVG rect element using web-animations

I'm using web-animations API to animate a SVG element by changing its width: var elem =…
user3202324
  • 133
  • 4
1
2 3 4 5 6 7