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
0
votes
2 answers

Loading failed for web-animations.min.js

I have used Pagination in a part of my page form this site. I follow its instruction and now bellow are my related files in project: app.item.html
helenDeveloper
  • 624
  • 3
  • 8
  • 15
0
votes
1 answer

Independently animating transform properties with web animations api

Is it possible to animate the different parts of the transform property independently in one animation? for example: const lineAnimation = [ { transform: 'scaleX(0)', offset: 0 }, { transform: 'translateX(0%)', offset: 0 }, { transform:…
tt9
  • 5,784
  • 6
  • 42
  • 65
0
votes
1 answer

How to move an icon through different points?

This website has an excellent animated map showing the migration patterns of wildebeest in the Serengeti. Unfortunately, they animated their map using Flash. I wanted to know whether there were alternatives for doing something similar, perhaps with…
DDiran
  • 533
  • 1
  • 6
  • 23
0
votes
2 answers

How to animate the text and not the with CSS

I have made a menu navigation with Bootstrap and I have added a simple transition to hyperlinks inside the menu... See it here. As you can see when you hover over the right links of the menu, they will go left because I have set the CSS like this: …
user8055404
0
votes
1 answer

How to add an onclick function to a button in Hippo Animator

I wonder if you are familiar with Hippo Animator.. This software can create web animation easily and basically you can add html buttons and etc to it. Now currently I have added a button and on it's properties I need to add an On Click function so…
user7424490
0
votes
1 answer

Angular2 animate event emitter removal of child component

I have a child component that is removed with an event emitter and i want to add an animation on it's removal. My thinking was to animate from a wildcard state to void: @Component({ selector: 'content-attendee', styleUrls:…
rhysclay
  • 1,645
  • 3
  • 22
  • 42
0
votes
1 answer

Simulating additive animations using Web Animations API issue with getComputedStyle(element).transform

I need to "simulate" additive animations using Web Animations API. As described in the documentation additive animations are not supported yet and the use of getComputedStyle(element) is suggested. The problem I am facing is that the matrix3d…
GibboK
  • 71,848
  • 143
  • 435
  • 658
0
votes
0 answers

ionic2 - web animation with setInterval

I am following this tutorial and using the web animation in my ionic2 project. I have a set the animation in my @component: @Component({ selector: 'page-feed', templateUrl: 'feed.html', // providers: [DirectiveZHeader] , animations: [ …
sooon
  • 4,718
  • 8
  • 63
  • 116
0
votes
1 answer

Polymer "animate" function no longer working in Chrome

Paper-dialog uses entry/exit animations but Chrome deprecated this function. Is there a work around??? Do I need to update web-animations-js?
J.Keefe
  • 100
  • 1
  • 9
0
votes
1 answer

web animation API queue

I have an animation that when one part is finished the other is started and it can be very long queue. I put the code here: https://jsfiddle.net/homa/qub7ejd1/ As you can see to have the queue, I have this code: newMessage('HA HA HA HA…
Homa
  • 3,417
  • 2
  • 19
  • 24
0
votes
1 answer

Will WebAnimations support vector shape transformations

We have been using SVG path animations (SMIL), since CSS is very limited and have now heard that SMIL will soon vanish from all browsers. Does anyone know whether WebAnimations will support vector shape animations and not just classic…
Shai Kimchi
  • 746
  • 1
  • 4
  • 22
0
votes
1 answer

SVG Textpath - animate startOffset (text to slide down SVG path) - in JS

How can I animate the SVG textpath startOffset parameter in WebAnimation/JS (NOT CSS!): I want to let the text slide down the path... I tried numbers,%, px with no success.
ajo
  • 1,045
  • 4
  • 15
  • 30
0
votes
1 answer

`player.animate( [ {transform: "rotate(10)"`?

I'm trying to use web animation/JS (but not CSS!) to transform SVG. I can't get the transform: rotate(10) to work--not sure why. In the example playerT (scale) and playerT3 (strokeWidth) are fine, but playerT2 doesn't seem to do anything--why?
ajo
  • 1,045
  • 4
  • 15
  • 30
0
votes
1 answer

Create a 3D object to animate in html page

I am building a web page right now and my manager wants to have a specific earth (mean: shadow, and specific earth design) spinning on it. We have a team specialise in 3D models and they are ready to build the object. But nor them or I know how to…
Jay Cee
  • 1,855
  • 5
  • 28
  • 48
0
votes
1 answer

Where to start to achieve this animation effect

How can i achieve this kind of animation effect (see link below) and where do I need to start learning, is this part of css or html5 or plugins, etc.. I have a startup knowledge in css and html5, but I have no idea how to achieve the…
cracker_chan
  • 93
  • 1
  • 3
  • 11
1 2 3 4 5 6
7
8