scroll-driven-animations-debugger-extension

scroll-driven-animations-debugger-extension copied to clipboard

E.g. https://cdpn.io/pen/debug/oNOMRav has an animation on `.inner`. When inspecting it’s not correctly positioned in the minimap as the minimap does not take all intermediary elements between the element itself and...

bramus

Animations are not detected on pseudo-elements

1

When there is an animation on a pseudo-element, it is not detected by the extension. Reading the announcement post, it seems that you're using the `$0` to get the element...

kizu

Range Editor: vh range values (and other non-absolute units) are shown as calculated pixel values

2

E.g. https://scroll-driven-animations.style/demos/cover-to-fixed-header/css/ When you inspect the`#sticky-parallax-header` element and edit the range, the `animation-range-end` shows up as a pixel value. This is not how it was declared in the CSS. The...

bramus

Minimap: SVG elements are incorrectly drawn

1

E.g. https://cdpn.io/pen/debug/bGORQMM/d1616ec346e06f09d7f34ec667571e2e (forked from https://codepen.io/raphaelgoetter/pen/wvReGKK by @raphaelgoetter to preserve a copy) The inspected elements don’t have the correct size because `SVGElement` doesn't have `offsetWidth`/`offsetHeight` properties, unlike `HTMLElement.

bramus

Some ideas: - Show the timeline-name (or anon if no name) that was declared. - Mention in the non-viz what the scrolller/element/subject are. - Add `inspect()` jumplinks to those elements...

bramus

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

3

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...

kizu

The extension doesn’t work with elements in iframes. It shows saying that there are no Scroll-Driven Animations attached to the element even though there are.

2

E.g. https://codepen.io/bramus/pen/vYvXWyv: inspect the parent page first, and then select `div.up` in the `iframe`. The extension incorrectly shows that there are no animations attached while there certainly are!

bramus

The extension doesn’t work with elements in iframes. It shows a _“Could not read the required data from the element.”_ error message

2

Go to any CodePen-based demo such as https://codepen.io/bramus/pen/vYvXWyv and right click the iframe’s contents and select Inspect. The extension will show a _“Could not read the required data from the...

bramus

Enabling scrolling on the example for the https://kizu.dev/position-driven-styles/#distributing-anything-property, then selecting an item and scrolling the container results in the element's transform change not being reflected on the minimap. https://github.com/bramus/scroll-driven-animations-debugger-extension/assets/177485/d54bf7cc-72e3-4671-8841-85e4811fb18e

kizu

Minimap is not redrawn when the range changes dynamically

1

First example here: https://kizu.dev/position-driven-styles/#linear-gradient Toggling the ”Use default range” is not reflected on the minimap, but the `ViewTimeline` value is updated (so, probably should be possible to redraw when that...

kizu