bramus / scroll-driven-animations-debugger-extension

Browser extension to debug Scroll-Driven Animations
40 stars 1 forks source link

When using the view timeline value from a different element, the minimap is not very useful #28

Open kizu opened 1 year ago

kizu commented 1 year ago

https://codepen.io/kizu/pen/QWzppBd (in debug mode) the header uses the timeline of another element. I imagine it could be helpful to see the original used element there, maybe as an option to toggle betwen or showing both?

raphaelgoetter commented 1 year ago

Hi,

Same here : https://codepen.io/raphaelgoetter/pen/wvReGKK

bramus commented 1 year ago

I imagine it could be helpful to see the original used element there

Typically the tracked subject does get drawn, see https://scroll-driven-animations.style/demos/stacking-cards/css/ for example

image

When inspecting https://codepen.io/kizu/pen/QWzppBd, the problem is that the subject is a pseudo-element, which seems to be the problem here.

bramus commented 1 year ago

Same here : https://codepen.io/raphaelgoetter/pen/wvReGKK

In this demo the tracked subject gets drawn as well:

image

There is another issue at hand here though, where the animated element should be a child of the subject. This is tracked in https://github.com/bramus/scroll-driven-animations-debugger-extension/issues/30