stagger not working as expected

[mafox296 1 Likes (Newbie)]

I'm replicating a tweenMax staggerFromTo which should display  text one character at a time and changing the color of the characters. The color is irrelevant. Instead of doing this the full line of text just flashes once with no color change.

I've attached the full code. Please help.

thanks,

Michael

test1.html

[Carl 9,066 Likes (Superhero)]

It would be great if in the future you would create a CodePen demo

 

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

 

Much better than a single HTML file that is missing dependencies like jQuery.

 

Any way it was easy enough to paste your code into a CodePen.

 

Looks like your problem is that you are setting the opacity of $title1 to 0 which makes all of its children invisible

 

http://codepen.io/GreenSock/pen/EVxjEd

[mafox296 1 Likes (Newbie)]

I've actually made a codepen but hitting the run button does nothing so I don't know if it works. perhaps you can tell me how to run it.

URL:

See the Pen PPoqZo by mafox (@mafox) on CodePen

[OSUblake 9,990 Likes (Superhero)]

It's running...

 

Looks like your problem is that you are setting the opacity of $title1 to 0 which makes all of its children invisible

[Jonathan 5,176 Likes (Superhero)]

Yes mafox296, as Carl  and OSUblake advised your $title variable in the set() method is the culprit.. just move your obj1 var above your set() method and use the obj1 var in your to() tween.. then it should animate fine

 

See the Pen pjoRwx by jonathan (@jonathan) on CodePen

$(document).ready(function() {
  var $title1 = $('#title1');
  $title1.html($title1.html().replace(/./g, "<span>$&</span>").replace(/\s/g, " "));
  startAnimation();

  function startAnimation() {
    var obj1 = $title1.find("span"); // move var obj1 here
    TweenLite.set(obj1, {
      opacity: 0
    }); 
    // var obj1 was here   
    TweenMax.staggerFromTo(obj1, 0.5, { // use the obj1 var here as your target
      opacity: 0,
      color: "black"
    }, {
      opacity: 1,
      color: "blue",
      delay: 1
    }, 0.1);
  }
});

Also as a side note.. in codepen you dont need to add the head or body tags, since your contents of the HTML panel will be inserted in the body by codepen.

 

i hope this helps!