Animation inspector sometimes doesn't properly replay animations

NEW
Unassigned

Status

()

Firefox
Developer Tools: Animation Inspector
P2
normal
2 years ago
2 years ago

People

(Reporter: pbro, Unassigned)

Tracking

Firefox Tracking Flags

(Not tracked)

Details

(Whiteboard: [btpp-fix-later][polish-backlog][difficulty=hard])

Attachments

(2 attachments)

(Reporter)

Description

2 years ago
Created attachment 8657923 [details]
transitions.html

STR:
- open the attached test case
- open the animation-inspector
- move your mouse slowly from right to left over the red elements
- each element you hover should cause a couple of transitions to be displayed in the inspector
- once you reach the first element, you should see 10 transitions still displayed in the inspector
- grab the scrubber (vertical red line) and drag it towards the left

Expected: all transitions should replay as you move
Actual: elements all stay red until you reach the start of the timeline when they all sort of turn black to various degrees.
(Reporter)

Comment 1

2 years ago
Created attachment 8657924 [details]
transitions.gif

Probably easier to understand with this.
(Reporter)

Comment 2

2 years ago
Worth noting first: the inspector only shows 1 timeline per element and per transition/animation.
If element #id1 has an animation 'anim' that's displayed in the inspector and if this animation is restarted later, it won't appear twice in the inspector, the older one will go away and will be replaced with the new one.
Similarly, if element #id1 has a 'background-color' transition on hover, moving the mouse over the element plays it and a timeline is displayed in the inspector, but moving out plays the same transition, in the opposite direction, and this replaces the timeline.
(Reporter)

Updated

2 years ago
Blocks: 1201278
(Reporter)

Updated

2 years ago
Whiteboard: [polish-backlog]
Priority: -- → P1
(Reporter)

Updated

2 years ago
Whiteboard: [polish-backlog] → [polish-backlog][difficulty=hard]
(Reporter)

Comment 3

2 years ago
Another STR:
- open http://jsbin.com/rexitapari/edit?js,output
- using the inspector, select the <body> element in the output area
- take a look at the animation-inspector --> you should see the 4 animations, sequenced one after the other
- try to scrub back in the timeline.

==> the 4 animations going back one after the other in reverse order, they just play back all together at the same time.
(Reporter)

Comment 4

2 years ago
The main problem comes from the way we use setCurrentTime on animations when the user scrubs back.
Right now, we use a timeline-relative time, we should really be using an absolute time and we should subtract the animation's startTime.

The other problem is if you press the "play" button again in the toolbar, then all animations play at the same time. So we need to make sure the sequence. Brian Birtles suggested a great solution, see here:

http://jsbin.com/bidiyubesi/edit?html,js,output
(Reporter)

Updated

2 years ago
Component: Developer Tools: Inspector → Developer Tools: Animation Inspector
(Reporter)

Comment 5

2 years ago
This isn't actively being worked on. No need for this to be a P1.
Filter on CLIMBING SHOES.
Priority: P1 → P2
Whiteboard: [polish-backlog][difficulty=hard] → [btpp-fix-later][polish-backlog][difficulty=hard]
You need to log in before you can comment on or make changes to this bug.