Reusable Timeline Function

[Mike790]

I'm trying to create a reusable function that I can pass in parameters.  The function in the first CodePen works fine, even when aggressively toggling between actions.  However, I'd prefer to create one function that will work for all slide-in panels.

 

If you aggressively toggle between actions in the second CodePen, it will eventually break, removing the overlay but leaving the slide-in panel on screen.  

 

Thanks in advance for any guidance!

 

 

See the Pen BazxarM by agaisab (@agaisab) on CodePen

 

See the Pen pobVoVv by agaisab (@agaisab) on CodePen

[ZachSaucier]

Hey Mike. 

 

You're making one of the most common GSAP mistakes: making logic errors with relative tweens. Also the common mistake of not setting all your transforms with GSAP. I also highly recommend my article about animating efficiently as it covers this sort of thing in more detail. In summary: you should loop through each of your buttons/panels to setup a timeline for each and only apply the event listeners once to each. 

 

Applied to your situation:

See the Pen zYBjxgm?editors=0010 by GreenSock (@GreenSock) on CodePen

 

Happy tweening!

[Mike790]

Thanks Zach!

 

This doesn't appear to work as anticipated.  The panel will fire when a button is clicked even though it's already open.  Or, the slide-in panel gets stuck when it's open and another button is clicked.   I was trying to write it where if the panel is open and a button is clicked, it remains open but the content of the new section appears (see CodePen below).  

 

I appreciate your help as well as the additional resources you mentioned.  In your article on the css-tricks.com website you mention using a function or loop to keep the code DRY.  This is ultimately what I'm trying to accomplish with my function.  Instead of a script for each slide-in menu/panel, I'd like to create one function that behaves based on passed parameters, such as the name of the element (based on element id), overlay or push (based on element class), from which direction it slides in (another class), etc.

 

Hopefully my explanation makes sense and thank you again for any advice you might be able to provide!

 

Mike

 

See the Pen PozebRj by agaisab (@agaisab) on CodePen

 

 

[mikel]

Hey @Mike790

 

How would this variant be?

 

See the Pen b668c0e114e2421d7fdd5bd16f446955?editors=1010 by mikeK (@mikeK) on CodePen

 

See the Pen 66d9622703d9a16b29595d21ae2cb625?editors=0010 by mikeK (@mikeK) on CodePen

 

 

Happy clicking or pointing ...

Mikel

[Mike790]

Thanks for the suggestions Mikel! 

 

These examples are useful, but they don't seem to provide a solution to what I'm hoping to accomplish. 

 

Thanks again!

 

Mike

[mikel]

Hey @Mike790

 

Hmmm - I think the code is as DRY as an excellent martini.
What do you want to optimize?

 

Happy coding ...

Mikel

[ZachSaucier]

21 hours ago, Mike790 said:

I'd like to create one function that behaves based on passed parameters, such as the name of the element (based on element id), overlay or push (based on element class), from which direction it slides in (another class), etc.

So take the function from the forEach of my demo and make it a standalone function. Then pass in whatever arguments you need  We're here to help, not do every part for you  

[Mike790]

I just wanted to thank @ZachSaucier @mikel you both for your help on my script from last week!  I'm sorry if I was asking for too much with my replies.  It wasn't my intention, but it definitely read that way.  Sorry.

 

I realize I was conflating two separate scripts and not just focusing on my original goal; a reusable function that acts as a sliding panel based on element parameters.  

 

Thanks for always taking the time to help us, Zach!  Hands down great customer service and always eager to help!  Thanks for your last suggestion and the gentle kick in the butt to get me on track.

 

Mikel, although I only drink Churchill martinis, when it comes to programming, I'm unfortunately about as clever as a appletini.  Thanks for putting together your Codepens.  I learned a lot from them and your approach is incredible!  You've been a huge help to a lot of us on the Greensock forum!

 

Below is my updated approach that seems to get the job done, even though it's still clunkily written.  I'd greatly appreciate any opinions you might have if you have a sec, and if not, thanks again for your previous advice!

 

See the Pen e9234e14ebc31a2fd3f58f2253d80836 by agaisab (@agaisab) on CodePen

[ZachSaucier]

My only comment: Why not make panelOverlay a real boolean? 

panelOverlay = panelID.dataset.panelOverlay === 'true'

Then your if statements can be normal ones, not ugly ones comparing the variable to === 'true'