Getting Sliders to move simultaneously

[nicksaephanh]

Hey everyone! I'm getting into GSAP and wanted to do something cool for my portfolio.

 

I'd basically would like to get it so that when I slide open one pane, the last opened one would close simultaneously. The reason I want to use the sibling selector is a backup scenario in case someone closes the one they opened to before trying to open another. Either way, after reading through the docs, I'm haing trouble applying logic to these parameters because I don't understand what they do fully yet. Help?

See the Pen JyRgXX?editors=1111 by Genius-Animus (@Genius-Animus) on CodePen

[OSUblake]

You can set the position parameter on a timeline. 

https://greensock.com/position-parameter

 

But I set your demo up a little different with no timeline. I save a reference to the last animation and button. If the same button is clicked, the playback direction of the last animation is toggled. Otherwise it sets up a new animation, and reverses the last animation if one exists.

 

I also set the callbacks, but commented out your code because you're creating new HTML, which would create problems if somebody kept toggling the same button. It would be better to fade in the content with a tween.

See the Pen wqoewG?editors=0010 by osublake (@osublake) on CodePen

 

[mikel]

Hi @nicksaephanh,

 

Welcome to GreenSock Forums.

 

Not knowing your concept / layout this is an alternative to presenting portfolio areas (Red, Blue, ...).

An additional click function on the motifs ("more ...") could link to the areas.

 

See the Pen KvNvjP by mikeK (@mikeK) on CodePen

 

Kind regards

Mikel

[nicksaephanh]

4 hours ago, OSUblake said:

You can set the position parameter on a timeline. 

https://greensock.com/position-parameter

 

But I set your demo up a little different with no timeline. I save a reference to the last animation and button. If the same button is clicked, the playback direction of the last animation is toggled. Otherwise it sets up a new animation, and reverses the last animation if one exists.

 

I also set the callbacks, but commented out your code because you're creating new HTML, which would create problems if somebody kept toggling the same button. It would be beatwe

See the Pen wqoewG?editors=0010 by osublake (@osublake) on CodePen

5

 

 

Wow! Such solid logic, syntax aside, do you guys have any good resources for animation logic or logic in general? the second i saw null on the two variables i pretty much guessed how you'd set it up but it never came to mind to even try something similar.
 

I basically want to create a bunch of little, clickable pictures that change that re arrange depending on which one is open. This is really just me trying to understand what's available in GSAP and how to use it.

 

2 hours ago, mikel said:

Hi @nicksaephanh,

 

Welcome to GreenSock Forums.

 

Not knowing your concept / layout this is an alternative to presenting portfolio areas (Red, Blue, ...).

An additional click function on the motifs ("more ...") could link to the areas.

 

See the Pen KvNvjP by mikeK (@mikeK) on CodePen

 

Kind regards

Mikel

 

This is SO COOL. You just inspired some ideas. I'll probably do something very similar to this with outside animations leading up to the change of content. Thanks so much for the awesome work Mikel, do you have any tips on the thought process of putting together more UI elements like this? 

[mikel]

Hi @nicksaephanh,

 

You could find a lot of cool AI on CodePen. Some under keyword GSAP.

If you find good examples that are not animated with the GreenSock Library, try it.

 

For questions, if problems arise, we are there.

 

Kind regards

Mikel