Giters

jlmakes / scrollreveal

Animate elements as they scroll into view.

Home Page:https://scrollrevealjs.org/

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

Distance and origin parameter not working on spans

hrvstr opened this issue · comments

commented

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

  • Operating System: macOS 11.2.3 (20D91)
  • Browser Version:
    • Safari Version 14.0.3 (16610.4.3.1.7)
    • Firefox 86.0.1 (64-Bit)
  • ScrollReveal Version: 4.0.9
commented

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

commented

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.