SPAN vs DIV -Need help

[cormack 4 Likes (Newbie)]

Hi,

 

Im doing a very simple test, but i start trying to animate a span instead a div and something goes wrong (or, as i think, i do something wrong), but the same runs fine in a div but does not as a span.

 

I add the CodePen.

 

Don't be too rude, i am stupid and a newbie

 

 

See the Pen aOxYmV by Cormack (@Cormack) on CodePen

[Shaun Gorneau 1,503 Likes (Superhero)]

Spans are inline elements, divs are block-level elements. They are treated differently with regard to width, height and position properties.

 

You can certainly make a span behave like a div, however, with CSS - "display: block";

 

See the Pen bdJvod by sgorneau (@sgorneau) on CodePen

[Carl 9,066 Likes (Superhero)]

First, thanks for the pen. 

That is exactly the simplified type of thing we love seeing.

 

The problem relates to the fact that span tags are inline elements and transforms don't work on those.

To fix the problem, you can add display:block to the CSS for text1.

 

This is just the way CSS works, not a GSAP bug at all. Definitely not stupid to ask about it.

 

fixed: http://codepen.io/anon/pen/WvWzdr

 

Don't worry, you're not the first to wonder about this:

https://css-tricks.com/forums/topic/transforms-on-span-elements/

http://stackoverflow.com/questions/14883250/css-transform-doesnt-work-on-inline-elements

http://stackoverflow.com/questions/24961795/how-can-i-use-css3-transform-skew-on-a-span

[cormack 4 Likes (Newbie)]

Thanks Carl and Shaun!!

 

Great forum with a very positive and warm ambient,, something that its not easy to find this days in the internet