Jump to content
GreenSock

smallio

Tabs + Timelines

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

Hey @smallio :)

 

We haven't seen you in a few weeks.

 

Coincidentally, I just made a demo for another thread that does what you need here. (I think it's what you need anyway).

 

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

 

Does that help or am I misunderstanding the desired outcome here?

 

Happy tweening.

:)

 

  • Like 5
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

Awesome demos, Craig. So silky smooth

  • Like 2
Link to comment
Share on other sites

  • 3 years later...

Hi @PointC

 

Any specific demo on codepen related tabs animation onscorll. Actually I am also working on same. There are 4 tabs on a page and I want to change these on scroll. So @PointC can you please suggest if there are any specific demo in your codepen?

Link to comment
Share on other sites

  • 4 weeks later...

Hi @PointC, I did updated the syntax to gsap3 and mixxed some new stuff here and there.

Just to let you know, before someone give you a poke on this.  😊

See the Pen YzeePYw by DedaloD (@DedaloD) on CodePen

  • Like 2
Link to comment
Share on other sites

@Dennyno Very cool. I love it. Nice liquid buttons and the particles are so much fun. Well done! 🙌

  • Like 3
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.
×