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

If you thought things were getting complicated... You haven't seen it all yet.

 

Don't rip your hair out if you can't make this work with all three dots. Do try but just focus one what this step is introducing. 

 

In all honesty, I haven't thought the next step completely through so, there's a chance the code might change when we try to have all slides opening and closing individually.

 

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

 

  • Like 1
Link to comment
Share on other sites

Hey Pedro,

 

Well, we're really close. The main thing I failed in trying  to work was to get the other two slides to close when you clicked on one of the dots. Everything seems to work great if you open a slide the immediately close it before opening another one. But since they are all running in the same timeline, I can't quite imagine how to do this.

 

I also added a new functionality to this. I added an if statement on mouseleave because i'd like the dot to stay still if its slide is open. But there are some discrepancies and it's not working 100% as I'd like it.

 

But we're really close. Take a look:

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

 

 

Link to comment
Share on other sites

That is one heavy thumb. Sorry about that. 

 

So far you have managed to digest all the little steps we have been taking. It does look a lot of work and a big round about way of doing things but, with experience, half of it you will do it in your head as soon as you start thinking about the problem to be solved and the other half will be come more of a pattern you don't even think about. Just make sure you don't set yourself too comfortable in this patterns as to prevent you from seeing new, different patterns or resist ideas from others.

 

You have seen the benefits of grouping repetitive code into functions and how you can make it affect different elements and return different behaviours with some function arguments.

 

You were able to extend the code from affecting one element/group into the other two elements/groups.

 

Now we need to step out a little and put the last piece of logic to connect the three points and their slides so that the others know when you are interacting with each of them.

 

One last thing. There isn't just one way of achieving what you set out to do. And I am not giving you the ONE BEST WAY, just A way. Or the one I could think of at the moment. There will be other. There might even be someone else here who will have a more elegant alternative and, hopefully, will share with us.

 

Hoh, hum... My original idea did not work. It breaks. Let me go back to the drawing board and try again.

 

*shame*, *shame*, *shame*.

Link to comment
Share on other sites

Yes sir, what we have gone through has been so helpful for me as a coder. It's been a great journey. And I hear ya, I'm always rebuilding things when I find later down the path that it didn't take me where i wanted to go.

 

No shaming needed. It happens to all of us.

Link to comment
Share on other sites

At last!

 

In the end it was a logic issue. To be honest, I lost track of the order of things and probably had planned it poorly. 

 

It seems to work now and doesn't break too horribly. If you manage to break it, let  me know.

 

Luckily I did not have to change the underlying idea so, it builds on top of all we have worked in this thread. It is not the most elegant solution, there will be better ones, specially if we combine a different element structure but that would be beyond this challenge. Another day, who knows?

 

There are couple of things that have been moved but, apart from the clicking logic, all is the same as in previous stages. Have a look, see if it makes sense and let me know if you have any questions.

 

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

 

Hope you had fun in this journey.

 

Happy Tweening!

 

Pedro

 

  • Like 3
Link to comment
Share on other sites

Pedro,

 

Well, I have not been able to break it, so whether or not it's an elegant solution, it is a solution. And a fine one at that, it works perfectly.

 

It was an amazing journey and I learned a ton. A million thank yous for your time.

 

I'll inspect this further and if I have any questions, I'll reach out.

 

Thanks again,

gregg

 

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