GreenSock Animations on span elements

Question

Iam Performing simple Greensock animations, Iam unable to perform any animation on span elements..even any animation i performed its just blinking can any one help. Is there any problem with my span elements defining.

Here is the code.

<div id="prac">
    <div><span>1</span><span>2</span><span>3</span><span>4</span></div>
  </div>

CSS Style

#prac span{padding:20px;border:1px dashed blue;background:violet;margin:5px;}

JS TweenMax.staggerFrom($("#prac").find("span"), 0.4, {scale:0, rotation:-360, autoAlpha:0}, 0.1)

score 7 · Accepted Answer · edited May 23 '17 at 10:34

7

You need to make your span a block or inline-block as it is inline by default, and hence, it fails to animate.

Related Question of mine

edited May 23 '17 at 10:34

Community

1
1

answered Sep 23 '13 at 12:17

Mr. Alien

153,751
34
298
278

score 0 · Answer 2 · answered Dec 22 '14 at 10:24

SPAN elements are styled as "inline" by default and won't move independent of their parent element.

You need to set the "display" property in the CSS to either "block" or "inline-block".

Try this:

#prac span{padding:20px;border:1px dashed blue;background:violet;margin:5px;display:block}

Or alternatively, you could change from a SPAN to a DIV.

GreenSock Animations on span elements

2 Answers2