How to tween multiple h tags with a class attibute

[fs_tigre]

Hi,
 
I was trying to tween three differnent H1 tags one after the other but I cannot make it work.
 
HTML
 

<h1 class="item-1">Hi, I'm the first h1 tag</h1>
<h1 class="item-2">Hola, I'm the second h1 tag</h1>
<h1 class="item-3">And I'm the third H1 tag </h1>

js - This doesn't work  

var timeLine = new TimelineLite();

timeLine.from(".item-1", 1, {scale:0.5, alpha:0})
.from(".item-2", 1, {scale:0.5, alpha:0})
.from(".item-3", 1, {scale:0.5, alpha:0})

This DOES work but of course it plays all of them at once.  

var timeLine = new TimelineLite();

timeLine.from("h1", 1, {scale:0.5, alpha:0})
.from("h1", 1, {scale:0.5, alpha:0})
.from("h1", 1, {scale:0.5, alpha:0})

I also tried selecting them like this...

.from($("h1 .item-1"), 1, {scale:0.5, alpha:0})

but no luck.

 

Again, what I want is to animate all three H1 tags but one after the other not all of them at the same time.
 
Thanks a lot.

[Carl]

Hi,

 

Some of your code works great with the latest version of GSAP. I suspect that you may be using an older version, but I'm really not sure.

 

Here is a demo of your exact code running fine:

http://codepen.io/anon/pen/btxBn

 

The reason the forums prompt you for a CodePen is so that we can better figure out what is wrong, as explained in greater detail here:

http://greensock.com/forums/topic/9002-read-this-first-how-to-create-a-codepen-demo/

 

If you want to pass in selector strings other than IDs you must be using a recent version of GSAP or have jQuery loaded OR specifiy your selector engine using TweenLite.selector = someSelectorEngine

[fs_tigre]

That's wired. Here is my CodePen which doesn't work unless I change item-1 to h1 as follow.

 

Change ...

timeLine.from("item-1", 1, {scale:5, alpha:0})
.from($("item-2"), 1, {scale:0.5, alpha:0})

to ...

 

timeLine.from("h1", 1, {scale:5, alpha:0})
.from($("h1"), 1, {scale:0.5, alpha:0})

Any idea? Thanks a lot for your help.

 

See the Pen vJGke by fs_tigre (@fs_tigre) on CodePen

[Carl]

Thanks for the CodePen demo, very helpful.

 

try this code

var timeLine = new TimelineLite();


timeLine.from(".item-1", 1, {scale:5, alpha:0})
.from($(".item-2"), 1, {scale:0.5, alpha:0})

note if you are selecting an element by class, you need to use the preceding dot ( . ) as in  ".className" just like an ID would be "#someID"

[fs_tigre]

Thanks a lot for your help.