Trying to loop Timelines

[hellehs90 1 Likes (Newbie)]

Hi guys, I have these timelines that's very similar and I'm wondering if it's possible to loop through them or something to have a cleaner code? This is what I'm working with: 

    var rt_step1 = $('.contact_module2016 .step1'),
        rt_step2 = $('.contact_module2016 .step2'),
        rt_step3 = $('.contact_module2016 .step3'),
        rt_step4 = $('.contact_module2016 .step4'),
        rt_step5 = $('.contact_module2016 .step5'),
        step1Timeline = new TimelineMax(),
        step2Timeline = new TimelineMax(),
        step3Timeline = new TimelineMax(),
        step4Timeline = new TimelineMax(),
        numbers = ["step1Timeline", "step2Timeline", "step3Timeline", "step4Timeline"];

    step1Timeline.to(rt_step1, 0.6, {autoAlpha: 0, display:'none', ease: Expo.easeInOut, y:-30})
                 .to(rt_step2, 0.6, {autoAlpha: 1, display:'block', ease: Expo.easeInOut, y:0});
    step1Timeline.pause();  
    
    step2Timeline.to(rt_step2, 0.6, {autoAlpha: 0, display:'none', ease: Expo.easeInOut, y:-30})
                 .to(rt_step3, 0.6, {autoAlpha: 1, display:'block', ease: Expo.easeInOut, y:0});
    step2Timeline.pause();  
    
    step3Timeline.to(rt_step3, 0.6, {autoAlpha: 0, display:'none', ease: Expo.easeInOut, y:-30})
                 .to(rt_step4, 0.6, {autoAlpha: 1, display:'block', ease: Expo.easeInOut, y:0});
    step3Timeline.pause();   
    
    step4Timeline.to(rt_step4, 0.6, {autoAlpha: 0, display:'none', ease: Expo.easeInOut, y:-30})
                 .to(rt_step5, 0.6, {autoAlpha: 1, display:'block', ease: Expo.easeInOut, y:0});
    step4Timeline.pause();

This is what I'm trying to do but I get the error that numbers is not a function. Anyone done this before? 

    for (i = 0; i < numbers.length; i++) {         
        numbers[i].to(rt_step1, 0.6, {autoAlpha: 0, display:'none', ease: Expo.easeInOut, y:-30})
                  .to(rt_step2, 0.6, {autoAlpha: 1, display:'block', ease: Expo.easeInOut, y:0});
        numbers[i].pause();       
    }

Thanks so much for your attention and all the help

 

[OSUblake 9,990 Likes (Superhero)]

Your timelines are global, so this is how you'd reference them...

window[numbers][i].to(rt_step1, 0.6, {autoAlpha: 0, display:'none', ease: Expo.easeInOut, y:-30})

How about this...

var timelines = [new TimelineMax(), new TimelineMax(), new TimelineMax(), new TimelineMax()];

timelines.forEach(function(tl, i) {  
  tl.to(".contact_module2016 .step" + (i + 1), 0.6, { autoAlpha: 0, y: -30 })
    .to(".contact_module2016 .step" + (i + 2), 0.6, { autoAlpha: 1, y: 0 })  
    .pause();
});

Demo - 

See the Pen f2b0146bc75cc756d3b03247ca648a71?editors=0010 by osublake (@osublake) on CodePen

 

 

You could create your timelines first, and then put them in the array. Doesn't matter. But it helps looping through an array of actual objects and not a string. Here's a similar thread about that.

http://greensock.com/forums/topic/14948-generating-a-timeline-using-javascript-object/

 

Also, you don't need to change the display with autoAlpha.

[hellehs90 1 Likes (Newbie)]

Thank you so much again learning so much from you guys!