wildfang

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

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); });