Jump to content
GreenSock

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

Trying to loop Timelines

Go to solution Solved by OSUblake,

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

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

 

Link to comment
Share on other sites

  • Solution

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.

  • Like 1
Link to comment
Share on other sites

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

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.
×