Jump to content
Search Community

SPAN vs DIV -Need help

cormack test
Moderator Tag

Go to solution Solved by Carl,

Warning: Please note

This thread was started before GSAP 3 was released. Some information, especially the syntax, may be out of date for GSAP 3. Please see the GSAP 3 migration guide and release notes for more information about how to update the code to GSAP 3's syntax. 

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

  • Solution

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 4
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.
×
×
  • Create New...