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.
web-animations
111
questions
3
votes
1
answer
101
views
Way to determine the exact style properties currently being applied by a web animation (without being mixed in with all styles currently applied)
I'm working on a project where I'd like to be able to determine exactly what style properties an animation is currently applying to an element, and ideally only those changes imparted by the animation....
- 33
0
votes
0
answers
16
views
Webflow Page Load animations start too late
I have some interactions directly in the hero sections of multiple pages, which start on page load. My problem is that all of them start too late. The page loads and only after a second or so after it ...
- 1
0
votes
2
answers
53
views
Web animation api fill mode confusion, (affecting draggable element subsequent interaction)
so i have this bare bones example which imitates draggable piece in a chess board.
On pointerup i want to perform snapback animation to piece starting position.
And ok, it works if i don't specify ...
- 404
0
votes
1
answer
129
views
d3 wheel of fortune with infinite rotation or rotation till an event
I have spin wheel made using d3.js.
I want the wheel to rotate infinitely or for a given timer value.
On calling the spin() function under a setTimeout, the wheel does rotates infinitely but it stops ...
- 1,742
0
votes
0
answers
79
views
onScroll Effect using gsap React js
I have main section in I have a HERO section when I scroll down to horizantle-scroll-wrapper then these 3 boxes should slide from right 100% to 0% onScroll mean when I scrolled down hero then box 1 ...
0
votes
1
answer
120
views
Web animation API event
<!DOCTYPE html>
<html>
<body>
<div id="div1"></div>
</body>
<script>
const Divtarget = document.getElementById("div1");
class ...
1
vote
1
answer
186
views
Animation commitStyles does not actually set styles
I'm trying to call commitStyles() after an animation is complete so that the styles are retained at the end (by adding to the inline styles) in a way that is performant. However, nothing seems to ...
- 23
0
votes
1
answer
69
views
Website animations lag on retina/higher resolution Macbook display but smooth on lower resolutions
We built website on React. Flawless on chrome, android and iPhones but Animations lag on safari macbook pro 16" default resolution 1792 x 1120.
Website works amazing if display setting is one ...
- 1
0
votes
1
answer
55
views
Optimize simple CSS / WebAnimation, eg scale()
I've tried different solutions to animate a sidenav bar rise from bottom right corner. This is the last solution, maybe the best one ( because i'm animating the transform scale() ) in the previous ( ...
- 944
0
votes
0
answers
168
views
How do I use Chrome's -webkit-mask-image in the web animations api?
I'm trying to animate the discrete [-webkit-]mask-image property, as shown below. The left image is animated with CSS3 properties which works in Chrome, Safari and Firefox. The center image is ...
- 5,798
2
votes
1
answer
76
views
Do I include vendor prefixes when animating with WAAPI animate()?
Do I have to also include vendor prefixes for transform? Or is it handled automatically? If I have to include vendor prefixes for the animation how do I do it?
This is my current code:
document....
- 41
1
vote
1
answer
237
views
Web Animations API - does negative playback rate impact iterations?
I'm following along with MDN's Web Animations API docs here (full pen here) and I'm running into the following:
I notice that the 'scenery' animations finish despite being created as follows:
const ...
- 626
0
votes
1
answer
1k
views
what's the unsupported feature that breaks scroll timeline and web animations in mobile safari on ios 13 and below?
I'm trying to figure out why web animations API and scroll timeline are not working on mobile safari on ios 13 and below. Yes I know both features are not normally supported on those versions of ...
- 926
0
votes
1
answer
205
views
What are the Performance/Efficiency implications of setting Web Animation API's currentTime property continuously?
What are the Performance/Efficiency implications of updating a Web Animation's currentTime property continuously within milliseconds?
What I would like to do is tie a web animation's current point in ...
- 871
0
votes
1
answer
244
views
Incorrect animation progress when calling from setTimeout
I'm using Web Animations API to animate DOM elements. I want to display animation progress after 1 second.
This is what I've tried.
const animation = div.animate({
opacity: 0
}, {
duration: 2000
})...
- 3