Leaderboard

@Carl @PointC Thank you both for the advice, I'll take a closer look at the pen you posted, I was considering an each loop so that sounds like it might be the right path. PointC, good points on what happens to each when the others are being interacted with or when someone clicks elsewhere on the page. All good things to consider. I'll let you know how it goes. -Sam

Hi @sammyg Welcome to the forum. In addition to Professor @Carl's excellent advice, I'll throw an additional two cent thought out here for you. The original pen you forked for your demo is a cool effect, but it's only one little panel. When you have multiple little pop-up panels you'll have to decide what to do when one is clicked while another is open. Do they all open and close independently like Carl's demo? Or does the open one have to close when a new one is clicked/opened? If so, should the open panel fully reverse before a new one opens or does the active one close and the new one opens at the same time? All methods are certainly possible, you just have to decide how it should behave. Happy tweening and welcome aboard.

Hi and welcome to the GreenSock forums, Thanks for the demo. Instead of trying to figure out what all the code in your demo was doing I decided to make a very basic example of multiple elements having timelines that change their direction (open / close) when you click on them. I use a jQuery each() to construct timelines for each element. This approach assumes each card will have the same type of child elements. Click on the cards:

Yeah, I figured you might know what a state machine is as they are pretty common in games. Only recently have they started to make their way into web development. They are incredibly useful for UI controls. I really like how Angular uses them for animations. You define them kind of like arrow functions. I had a cool demo over here, but the site it was on is no longer up. Each button could have its own state machine, and those could be children of a state machine for the menu. So it would be a hierarchy of machines. As an example, here's a traffic signal. The red light has a machine for a pedestrian crosswalk. http://davidkpiano.github.io/xstate/docs/#/examples/light I honestly don't know what should have priority in your demo. I generally don't like hover animations that involve moving something around. Not that they look bad, but it can be confusing when using a computer with a touch screen. Your example works because the arrow moves to the button with a focus, but a lot of people don't consider that, so sometimes you'll see an element just sitting there that doesn't do anything. That said, I would probably go with 3 different effects.

Thanks again for the help guys. Put the site live yesterday, phase 1 with more animation to follow: https://boysandgirls.ie/