Jump to content
Search Community

Tabs + Timelines

smallio 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

Trying to learn a bit about more about complex animation. 

 

I've setup a little tab example here. Each section has a background & I'd trying to fade that in, once it's ready. I'm trying to start the correct timeline for the page, if a timeline is already playing it needs to reverse it & play the new one. Sounds super easy, but I've been stuck on the logic for a while now lol.

 

Seems like I need to figure out how to attach a letter or number to each link & have it correspond to timelines.

 

How would one go about doing this?  Perhaps someone could show me with different coloured boxes or something?

 

Cheers,

Smallio

 

See the Pen JaQLGa?editors=1010 by smallio (@smallio) on CodePen

 

 

 

See the Pen EezBNe?editors=0010 by smallio (@smallio) on CodePen

 

  • Like 1
Link to comment
Share on other sites

@PointC

 

Aha, I've been lurking :) Hope you are well! 

 

A few points in response... 

 

a) this is exactly what I need!! ... however somewhat complex to learn from, do you have any previous versions where it's trimmed down slightly? If not don't worry! 

b) how would one treat each timeline separately so you can have different items on each page but still navigate? I plan to have a few core elements stay the same from page to page, but everything else changing. Does that get a lot more complex?

 

 

Thanks :)

Link to comment
Share on other sites

Sure, here's a basic version before I added the stretchy stuff and color selector. Just a basic bubble tab slider.

 

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

 

If I understand what you're asking, yeah, you could have different timelines for each tab. I'd need to see a bit more of what you're doing before I can offer the best advice. Maybe you can fork my basic slider and start modifying it to your needs and we'll go from there.

 

Happy tweening.

:)

 

  • Like 2
Link to comment
Share on other sites

On 9/25/2018 at 6:36 PM, PointC said:

Sure, here's a basic version before I added the stretchy stuff and color selector. Just a basic bubble tab slider.

 

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

If I understand what you're asking, yeah, you could have different timelines for each tab. I'd need to see a bit more of what you're doing before I can offer the best advice. Maybe you can fork my basic slider and start modifying it to your needs and we'll go from there.

 

Happy tweening.

:)

 

 

Ah awesome thank you! :)

 

I'm working through understanding all of it & then i'll see what I can do.

 

Cheers,

Smallio

  • Like 1
Link to comment
Share on other sites

If you still need a unique timeline for each slide, here's a fork of the example I posted earlier in the thread. You can see that I created an array of timelines and manually created one for each article. That is then added on to the end of the animation timeline created each time you click a tab. I also modified the tab indicator a bit to make it into a popper instead of a bubble slider. This one gets a bit bigger so it will look best on CodePen in full page mode.

 

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

 

Hopefully that gives you some ideas. Happy tweening.

:)

 

  • Like 6
Link to comment
Share on other sites

  • 3 years later...
  • 4 weeks later...

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