search

jlmakes / scrollreveal

Animate elements as they scroll into view.
https://scrollrevealjs.org/
22.3k stars 2.26k forks source link

Distance and origin parameter not working on spans #533

Closed hrvstr closed 3 years ago

hrvstr commented 3 years ago

I tried searching the GitHub issues but couldn't find anything relevant. Sorry if I missed something.

I am trying to animate a span but for some reason it will not apply the distance and origin parameter. Is it because a span is an inline element? When I change it to a div everything works as expected.

span demo div demo

Environment

jlmakes commented 3 years ago

This is a great question, thanks @hrvstr.

According to https://drafts.csswg.org/css-transforms/#transformable-element

A transformable element is an element in one of these categories:

  • all elements whose layout is governed by the CSS box model except for non-replaced inline boxes, table-column boxes, and table-column-group boxes [CSS2],

  • all SVG paint server elements, the clipPath element and SVG renderable elements with the exception of any descendant element of text content elements [SVG2].

So looks like you were spot on: non-replaced inline elements aren't "transformable elements." (However some are, such as img which is a replaced element. Here's a list of replaced elements.)

hrvstr commented 3 years ago

Thanks for the in depth answer and links. Looks like I have to change the templates of the theme I am using quite a bit.