Jump to content


I'm stuck in timeline ordering :(

Recommended Posts


excuse me, I'm a real noob when it comes to complex animations.


What I'm trying to do:


Whenever I scroll past a trigger (ScrollMagic), a DIV ('.step') should fade in and the svg inside ('.animate-svg') should be animated.

I have 3 divs and therefor 3 animations.


Also, outside of this function, I have created 3 different timelines (called "step1" to "step3").


Activating the trigger, fading in the DIV and the SVG inside work fine, however, I just can't get the svg timelines to play.

I don't know where I'm going wrong, I'm trying for a while now and have reached the state where I can't see anything anymore.


Any help is appreciated (sorry, I could not create a Codepen as it just wouldn't save...)


Kind regards


$('.step').each(function(i) {
        console.log( i );

	//this is fading in the divs and svgs, working fine
      var tl = new TimelineMax();
      tl.fromTo(this, 0.4, { y: 100, opacity: 0 }, { y: 0, opacity: 1, ease: Power2.EaseInOut })
        .fromTo($(this).find(".animate-svg"),0.4, { opacity: 0 }, { opacity: 1, delay:0.5, ease: Power2.EaseInOut })
        //this should play the svg animations but is not working at all

      var scene = new ScrollMagic.Scene({
        triggerElement: this,
        triggerHook: 0.6,
        reverse: false


Link to comment
Share on other sites

I think this should work for you:

window["step" + i].play()


However,my approach would be to put those additional timelines into an array and play the appropriate one from there. This thread can offer some guidance.

Happy tweening.



  • Like 2
Link to comment
Share on other sites

Genious, thank you. Yep, an array looks much more cleaner, will surely do that!


Kind regards

  • Like 1
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.