Jump to content
Search Community

How to autoplay Multiple Timelines

mrowka3d test
Moderator Tag

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

Hello Animation Friends,

 

I simply don't know how to go further with my next task, and I hope I don't have to start all over with the way my timelines are structured.

 

I'm wondering if it's possible to get this codepen to play like a carousel. You will see I have buttons that open my content on click. But in my initial state, I would like them to take turns opening automatically like a carousel. And once the user starts interacting with this glorified carousel, it would stop auto opening and closing.

 

I'm brand new to greenSock and can't seem to wrap my head around how to go about doing this. Any ideas? I'm thinking that i may need to make a master timeline that plays everything. Also, where's a good place to learn about nested timelines? I haven't done this before, but I know it's possible.

 

Thanks guys,

Gregg

 

See the Pen GmroOY by mrowka3d (@mrowka3d) on CodePen

Link to comment
Share on other sites

Hi @mrowka3d :)

 

Your idea of nesting those timelines into a master would certainly work. After page load, the timeline could start playing and as soon as the user clicked a button, you can interrupt that playback. You can then play to a new label or time. Pretty much whatever you want. Creating nested timelines is one of the most powerful features of GSAP and it allows you to quickly make changes. 

 

Regarding your question about how to create a nested timeline -- it's fairly simple. You create a timeline in a function, return the timeline and then add it to the master. The master can hold the nested timeline, but you can also add labels, callbacks, position parameters, etc. just like a regular timeline. Here's a pen that shows you the basic mechanics of how they work. 

 

See the Pen ZLxdXz by PointC (@PointC) on CodePen

Hopefully that helps.

 

Happy tweening.

:)

  • Like 2
Link to comment
Share on other sites

UPDATE: I just added an label to my master timeline and that did help get everything to play all at once, but why doesn't my master play all my items in sync? It looks to me that my master timeline is stuck.

Link to comment
Share on other sites

Hello! @mrowka3d!

 

Forgive my intrusion but I am trying to earn some brownie points in the leaderboard and thus I shall be stealing as many threads as I can from the others :D

 

In your pen there's a little reference error,  "dot1_path" is not defined. In your updated version you have omitted the pathDataToBezier declarations. Add them back in and your circles will start moving.

 

Note that you are adding infinite timelines inside other timelines, that will cause problems as noted in other threads:

 

 

I also noticed that you had some repeating functions. You can consolidate them into just a single one that takes different parameters.

 

Other comments, the paths for your dots seem to be all the same. You can save yourself a tiny bit of code and use the same but reverse the animation. Or make different paths to justify them.

 

See the fork of your pen for my take on your issue:

 

See the Pen pPaKMK?editors=0010 by dipscom (@dipscom) on CodePen

 

  • Like 3
Link to comment
Share on other sites

When I first mentioned a master timeline, I was actually referring to your tl_click timelines being combined into one. As @Dipscom pointed out, you have infinitely repeating tweens in those dot timelines so that makes it difficult to add to a master. My thinking was leaving those pulsing dots as you had them, but combine the big animation timelines that those dots control. 

 

Happy tweening.

:)

  • Like 1
Link to comment
Share on other sites

OK guys, Awesome, thanks!

 

I now know about the multiple infinite loops about creating the error. Yes, I tried adding everything into one timeline. Thanks guys.

 

Dipscom, thanks for your code. I'll be scrutinizing it and checking out what you've done. lots of changes there, thanks for the time you put into it. I'll reach out with any questions I may have.

 

I appreciate your time guys, thanks a ton.

 

  • Like 1
Link to comment
Share on other sites

1 hour ago, Dipscom said:

Hello! @mrowka3d!

 

Forgive my intrusion but I am trying to earn some brownie points in the leaderboard and thus I shall be stealing as many threads as I can from the others :D

 

In your pen there's a little reference error,  "dot1_path" is not defined. In your updated version you have omitted the pathDataToBezier declarations. Add them back in and your circles will start moving.

 

Note that you are adding infinite timelines inside other timelines, that will cause problems as noted in other threads:

 

 

I also noticed that you had some repeating functions. You can consolidate them into just a single one that takes different parameters.

 

Other comments, the paths for your dots seem to be all the same. You can save yourself a tiny bit of code and use the same but reverse the animation. Or make different paths to justify them.

 

See the fork of your pen for my take on your issue:

 

See the Pen pPaKMK?editors=0010 by dipscom (@dipscom) on CodePen

 

 

 

 

You get extra brownie points here! Thanks for stopping by :)

  • Like 1
Link to comment
Share on other sites

Hey guys,

 

FIRST: to @Dipscom , I understand that my code is very redundant, but I had to revert back to my old code so I can understand what's going on first. Once I have my UI working and complete, I'll take a look at understanding what you did to clean it up. Sorry, my coding skills aren't the best.

 

With that in mind I have a new codepen attached here with my understanding of things. However, my UI isn't running properly and I'm having trouble visualizing what's happening to my timelines. I come from Flash, so I'm really used to having a GUI with my timelines :P

 

So, here's my new codepen with comments where I'm having trouble. The comments also explain what I'm trying to accomplish.
 

See the Pen GmQbLQ?editors=0010 by mrowka3d (@mrowka3d) on CodePen

Please let me know if I'm going down the wrong path for pausing and resuming all these different timelines.

Link to comment
Share on other sites

Hi there @mrowka3d!

 

Thanks for the updated pen. It really helps us to help you.

 

I can understand how you feel. There are plenty of occasions where I see something someone else has written and no matter how hard or how long I stare at it, I just can't grasp it. We're all in the same boat drifting around in the sea of knowledge.

 

Having said that, I do feel that we can work with that. Part of the issue here is because you are tackling three dots at once. How about we tackle just one?

 

There is an issue of how you are structuring everything. There is no particular reason to have one single master timeline controlling all the animations. Sometimes, it's actually better to create new tweens/timelines depending on what needs doing.

 

Yours is such case. You are already halfway there by using functions to create your animations. You just need to jiggle your code a bit and all will be well.

 

I shall come back later on with a Pen showing what I mean. Unfortunately, I am being called upon before I can finish writing it. Just bear with me, yes?

 

 

 

 

  • Like 1
Link to comment
Share on other sites

@Dipscom,

 

Hey man, this is really nice of you to go step by step with me. Thanks! I looked at your code and I wasn't even familiar with, or had forgotten a while ago,  about function parameters. When I looked at them at your first codepen, I was admittedly confused as to what they were doing. But I see now that you create a timeline in line 34 by just stating your function and populate the parameters. You are doing this because the rest of the path timelines are exactly the same, right?

 

I've taken what you've done, and I added the other two dots. Did I do it the proper way/most efficient?

See the Pen NjYBNa?editors=0010 by mrowka3d (@mrowka3d) on CodePen

 

Also, I have some observations/questions in the comments. Just to show you my limited understanding :P

Link to comment
Share on other sites

Exactly.

 

Regarding your question in the pen: If you look at your dots, their topmost element are:

 

<svg class="dot dot--placement1 js-dot-one" width="85" height="85" viewBox="5 5 92 92">
<svg class="dot dot--placement2 js-dot-two" width="85" height="85" viewBox="5 5 92 92">
<svg class="dot dot--placement3 js-dot-three" width="85" height="85" viewBox="5 5 92 92">

 

In another words, they are the same.

 

And the path that you are using as a guide is also the same in all your dots. When you use MorphSVGPlugin.pathDataToBezier, it converts the path into a bezier relative to the target SVG thus, they're all the same. So, you can just use that one if you don't mind them having the same movement.

 

There are other little things you can change to tidy the SVG a bit more but I'll leave for another day.

 

Now let's move on to step 2.

 

There are very small changes from the previous step into this one but they are quite important. See if you can work it out:

 

See the Pen qmoyMO by dipscom (@dipscom) on CodePen

 

  • Like 1
Link to comment
Share on other sites

Good morning @Dipscom,

 

This one was a bit trickier for me. I'm understanding a bit of it, but there's something that is tripping me up.

1. how is bez working? It's acting backwards to me. It looks like a variable of a variable. because in the timeline (line 56) I see that it's a variable of dot1_path that is in the place holder of bez (line 11).  But in line 18, you are pointing to bez, but shouldn't that be dot1_path? It seems to me that dot1_path and bez are the same thing, but I don't know how.

 

Also, in my user interface, I want my dot to keep pulsing on the hover state. So, i thought it would be best to make a separate timeline function. they technically never need to stop pulsing because when the X shows up on click, it's larger then the pulse and you'd never notice the pulsing stop.

 

I have attached a new pen on what I thought would work. However, when I hover, both timelines (dot1_path_idle & dot1_pulse_idle) stop.

 

See the Pen qmYbXr?editors=0010 by mrowka3d (@mrowka3d) on CodePen

Happy Friday :)

  • Like 1
Link to comment
Share on other sites

Hello! Making good progress, right?

 

Thank you for the wishes for a happy Friday. Unfortunately, food poisoning did ruin the day.

 

Anyhow, I'm able to walk away from the toilet now so, let's get cracking.

 

dot1_path and bez appear to be the same thing because we are still only working with one dot and a single path to use as a bezier. If you were to have different paths to use as beziers in different dots, then, you would probably see the difference.

 

In line 18, bez refers to bez in line 11, the function argument. And that value will be whatever path you pass on when you invoke the said function. That way, the function is flexible and can be used with different paths for bezier curves, not just dot1_path.

 

Your dot1_pulse_idle timeline does not play because you are not instantiating a new TimelineMax/Lite when invoking tl_pulse(). You need to declare the var tl = new TimelineLite() inside the functions you are using in order to create new timelines (it's to do with JS and Scope. That's another rabbit hole we don't want to go down just yet) otherwise, you are just adding more tweens to the singe tl timeline you created right at the top. So, it makes perfect sense for all animation to stop when you hover over.

 

Since you want the pulse to continue animating even on mouse over, you are correct, we need a different tween/timeline to control that.

 

We can revert back to using Tweens because we are back to controlling a single element at a time.

 

See the Pen qmYmVy by dipscom (@dipscom) on CodePen

 

  • Like 1
Link to comment
Share on other sites

OK, wow. We have gone down a rabbit hole that is pretty advanced for me. I see everything you're doing, and it's making sense, but this is advanced stuff I'm not familiar with.

 

But hey, I added two lines of code here to get the other two dots to move. Wow, that was easy.

See the Pen vmjZXO?editors=0010 by mrowka3d (@mrowka3d) on CodePen

Sorry for the Food Poisoning :( Yuck!

 

  • Like 1
Link to comment
Share on other sites

By the end of this, you'll have Advanced GSAP Powers(c)!

 

I'm happy to hear that things are making sense and you can see the benefits of setting things up more modularly.

 

Onto the next step:

 

Having the hidden items show automatically. This is pretty much more of the same as we've been doing so far. 

 

Create a function that will generate the animation you need in a manner that you can reuse after. But read slowly as we are now adding logic to handle the mouse interaction.

 

See the Pen KmRmrW by dipscom (@dipscom) on CodePen

 

  • Like 1
Link to comment
Share on other sites

PS I did not like how the white X disappeared from "clearProps:"fill""

 

So, I tried to animate the opacity on the X and set its opcaity in the CSS to 0. It looks to work fine, was this the best way to go about it?

Link to comment
Share on other sites

You say it's getting complicated and yet says it's easy. Are you developing your superpowers yet?

 

As for the opacity. Look at you making maverick moves... For the situation at hand, using opacity is fine however, we always recommend using autoAlpha. Have a read at the docs for the detailed description

 

I'll be back later for our last step. :D

 

Well done on your leveling up so far.

  • Like 1
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.
×
×
  • Create New...