Timeline step by step?

[Peach2tm]

I have this simple timeline and would like to have the following 3 buttons:

">" play next step and pause

"<" go one step back - or maybe if possible play latest step in reverse - and pause

"autoplay" play the remaining timeline without pausing.

 

I have tried adding .pause() after the first .to() to my timeline, but it seems that the .pause is called before the first .to() is finished.

 

Can anyone point me in the right direction?

 

Thanks

See the Pen xxdGVrJ by anders-wibroe (@anders-wibroe) on CodePen

[mikel]

Hey @Peach2tm,

 

There are different options / ways.
Here are a few

 

See the Pen 3e1f3430764662349f3009efbfa2c064 by mikeK (@mikeK) on CodePen

 

Sorry it is still the old GSAP syntax!

 

Happy tweening ...

Mikel

 

[Peach2tm]

Thanks again. This is exactly what i was hoping for. I'll figure out how to update it to current syntax

[Carl]

@mikel's approach has all the bells and whistles.

 

this reminded me of a tutorial I have on using addPause()

 

it uses next and previous buttons to navigate through a simple timeline that has addPause() calls added after each number animates in.

 

See the Pen oNXNEJQ by snorkltv (@snorkltv) on CodePen

 

Your post prompted me to explore adding an autoPlay feature to that demo.

My initial autoPlay solution was similar to Mikel's where I'd check if autoPlay was true and if so I would just continue playing. In the context of my demo it just made the timeline speed by with each number coming in and out in rapid sequence.

 

I added a feature that when autoPlay is enabled the timeline would hold on each section, show a progress bar, and then move to the next animation when the time expires.

 

See the Pen 5e63e8b990367720da762db0a16d84ac?editors=0011 by snorkltv (@snorkltv) on CodePen

 

In the demo above hitting next or prev will disable the autoPlay feature and the user can navigate at their own pace. 

When the timeline ends autoPlay is automatically disabled and the user can either hit next or autoPlay to restart.

This will most likely be covered in detail in a new CreativeCodingClub.com lesson in the near future. In the meantime, hopefully these demos from Mikel and I help.

 

 

[Peach2tm]

 

@Carl

Thanks dude, that looks really nice too!

 

What if your step 3 was a .call(removeBox)

Function removeBox(){
    var elem = document.getElementsByClassName("b0")[0];
    elem.remove();
}

 

How would you make that work with next step and previous step? I image you would have to do something like:

 

function removeBox(){
    if(!tl.reversed()){
        var elem = document.getElementsByClassName("b0")[0];
        elem.remove();
    }
    else{
        //create the element again
    }
}

 

Or maybe instead of removing it, you would just detach the element from the DOM and keep it around incase the user wanted to go in reverse? I imagine you might have a more elegant way of solving this.

[Peach2tm]

Come to think about it maybe instead of removing the element i should just set visibility:hidden

[Carl]

yes, visibility hidden is MUCH better to manage than adding and removing elements. 

[Peach2tm]

Okay, but what about combining .call() and .addPause() in a timeline, that is controlled step by step:

 

See the Pen RwVPMYp by anders-wibroe (@anders-wibroe) on CodePen

 

As you can see, the pause on line 29 (before the .call()) is not observed. For it to work i have to add an empty Tween before the .call() like this:

 

.addLabel("Step4")

.to("#box3", {})
.call(addBox,["MyBox"])
.addPause("+=0", checkAutoPlay)

 

Is that working as intented, or have I miss understood how to use .call() and .addPause()?

[Peach2tm]

@Carl

 

Does it have to do with the "+=0" in addPause() on line 30 can't point to a .call() and therefore points back to the prevoius .to("#box3", { y: -100 })Thereby overlaping with the .addPause() on line 26?

[Carl]

Call() and addpause() are tricky as they don’t have durations.    

 

Putting them at the same time could get interesting. Maybe the function you use in the addpause should run both your autoplay and addbox. 

 

I’m not around a computer for a few days and can’t really help any further but perhaps someone else can shed more light if necessary. 
 

 

[OSUblake]

4 hours ago, Carl said:

Maybe the function you use in the addpause should run both your autoplay and addbox. 

 

Yeah, I'm not sure what you're trying to achieve, but if you need to two functions to run at the same time, then combine them.

 

[Peach2tm]

I'm trying to make a timeline which can be step-by-stepped in both directions, where events are add on the fly in real time via ajax.

 

Some events require creating/deletion of new element like such:

function addElement(id,element,parentId,append){
    let elementExists = document.getElementById(id);
    if (elementExists) {
        elementExists.remove();
    } else {
        let parent = $('#'+parentId);
        if(append)
            parent.append(element)
        else
            parent.prepend(element)
    }
}

 

You are right that i could add tl.pause() to the end of addElement (or in case of the codepen "addBox") and that removes the need for a dummy-tween before the .call() when stepping forward.

 

Problem is, i still need a dummy tween after the .call() when stepping backwards for it to work.

 

It looks stupid, but surrounding the .call() with dummy tweens works:

See the Pen KKmddQR by anders-wibroe (@anders-wibroe) on CodePen

 

[OSUblake]

1 hour ago, Peach2tm said:

It looks stupid, but surrounding the .call() with dummy tweens works:

 

Have you tried a small delay to your pause, e.g. +=0.0001?

 

1 hour ago, Peach2tm said:

I'm trying to make a timeline which can be step-by-stepped in both directions, where events are add on the fly in real time via ajax.

 

Not sure that is really a good fit for a timeline. I would probably use some type of data structure, like a linked list so I could add in more logic for handling complicated task like ajax requests.

 

Demo of a linked list.

See the Pen GRmpory by GreenSock (@GreenSock) on CodePen