Creating a next/previous to play different timeline sequences

[mfewcar]

I'm trying to break down different timelines into different functions, and then call them from an array on next/prev click. Currently they play automatically, and I'm trying to get them to play only when they are called from the array. Not sure what I'm doing wrong. 

See the Pen rNORgoR?editors=1010 by manuelwebdev (@manuelwebdev) on CodePen

[ZachSaucier]

Hey mfewcar. Let's take a second and understand what's going on in your code.

gsap.timeline();

You create a timeline (not paused)

var arr = [step1(), step2(), "baz"];

The above code calls both step 1 and 2 functions. Looking at one of those functions:

let step1 = () => {
  return tl.to("#item1", 2, { x: 300 });
  console.log("step1");
};

You are creating a tween and adding it to the not-paused timeline. You do the same thing with the step 2 function.

 

Then you're expecting it to not play immediately... See where you're off? To have it not play immediately, add paused: true to the timeline:

gsap.timeline();

However, this isn't exactly what you're wanting in terms of the effect. You just want standalone animations to fire when the index is reached. So why use a timeline at all?

 

Another issue is that you are using relative tweens, which means that after the first animation, if you call the function again it will try to go to the same value. But if it's already at the same value, then it won't appear to do anything! This may be what you want but I kind of doubt it. If you want the animation to replay, you can use one of the approaches that I outlined here:

 

Not knowing anything else about your project (there may be a better method if we know the full context), here's how I might set it up:

See the Pen gOayeje?editors=0010 by GreenSock (@GreenSock) on CodePen

 

However, even then you have some duplication and unnecessary functions. You could just keep the tweens themselves in an array and restart them in the click listener. And pass in an index to a function to only have one that deals with the incrementing and decrementing:

See the Pen zYvXWMr?editors=0010 by GreenSock (@GreenSock) on CodePen

 

The GSAP documentation should help you understand any of the methods that I used, but feel free to ask if you have questions  

[beau_dev]

Super helpful