I'm stuck in timeline ordering :(

[wildfang]

Hi,

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) {
        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
        .play('step'[i]);

      var scene = new ScrollMagic.Scene({
        triggerElement: this,
        triggerHook: 0.6,
        reverse: false
      })
        .setTween(tl)
        .addIndicators()
        .addTo(controller);
    });

 

[PointC]

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.

 

[wildfang]

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

 

Kind regards