Jump to content
GreenSock

Search In
  • More options...
Find results that contain...
Find results in...
mafox296

stagger not working as expected

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

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

Link to comment
Share on other sites

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

  • Like 4
Link to comment
Share on other sites

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

Link to comment
Share on other sites

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

  • Like 3
Link to comment
Share on other sites

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

  • Like 5
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.
×