Jump to content
GreenSock

cormack

SPAN vs DIV -Need help

Recommended Posts

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

Link to comment
Share on other sites

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

  • Like 4
Link to comment
Share on other sites

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

  • Like 3
Link to comment
Share on other sites

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

  • Like 1
Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.
×