"Peek-a-boo" slides on click

[Angie]

Hi!

 

Just got started using GSAP and totally digging it. Unfortunately JS is my kryptonite. 😆

 

I'm working on this "peek-a-boo" slider thing for a project and have it partially working using GSAP. The idea is this:

• Three slides with a background image, each 1/3 of its container (achieved using flexbox) and each has content with opacity set to 0
• Clicking on a slide opens it fully (i.e. full width of its container and content opacity goes to 1) and other two slides get out of the way via width 0.

 

What I have working (per CodePen example):

• clicking on slide #2 which hides slides #1 and #3
• mouse leaves slide #2 and it goes back to it's normal size as slides #1 and #3 slide back in

 

What I need some guidance/help with:

• instead of mouseleave to make the clicked slide go back to normal, have that trigger by clicking on that slide's close button
• apply the same idea to each slide, not just #2.
• show the content of the slide that is clicked
• smooth out the animation if possible (particularly when the open slide goes back to its default width)

 

Thanks in advance for taking a look!

See the Pen WNGGyQb by angieherrera (@angieherrera) on CodePen

[ZachSaucier]

Hey Angie and welcome to the GreenSock forums. 

 

These forums are intended for GSAP related questions, not general JS or layout questions like these. With that being said, here are a few pointers to get you going in the right direction:

• Your line that is setting the .window's width to 100% isn't doing anything - the width is already 100% by default. Same for your line of CSS setting its width to 100%.
• You don't need quotes around numerical values.
• In general it's a great idea to create animations at the start and then use control methods to manipulate them like what you're doing. However in this instance it might make more sense to create your animations at the time you need them because the widths can change on resize and you need special logic depending on the previous state (like if another section is opening or closing when you click on one). If you want to do that, you might look into learning about the FLIP animation technique. 
  If you don't want to do that, you will need to recreate the timelines each time that the parent container resizes.
• It'd be a good idea to learn about and try to get comfortable using loops to set up your animations to help keep your code more DRY (Don't Repeat Yourself). I talk some about how to do that in my article about animating efficiently.

You might also be interested in hearing that we are coming out with new Flip plugin that should make this sort of animation a good bit easier. However it will be for Club GreenSock members with at least a Shockingly Green membership level. In fact, there's a private beta going on for it right now so if you sign up today you can start working with it immediately!

 

If you have a specific question about GSAP please ask and we'll do our best to help  Happy tweening!

[Angie]

2 hours ago, ZachSaucier said:

These forums are intended for GSAP related questions, not general JS or layout questions like these.

 

Perhaps I didn't make myself clear enough or there was a misunderstanding. I've been perusing the forums for various things and if there's anything that was crystal clear is what these forums are for and how to post (it's mentioned in many, many replies).  At no point was I asking about general JS or layout. My comment about JS was just a reference that JS in general (and including GSAP) is not my strong suit. I was also trying to be clear and thorough in what I am trying to achieve. My questions were specifically about GSAP as it is, quite literally, the first time I've used it. Specifically, my whole post was intended to ask for help on how to get the GSAP code I do have working to work the way I outlined.

[ZachSaucier]

Hey Angie. I understand that you're trying to achieve this effect with GSAP and that you're unsure how to do so. However each part of your original post is not directly related to GSAP - the core of each question/issue is related to something else (whether it be a layout question, a general JS question, or a logic issue). How about you spend some time trying to apply the pointers that I've provided, continue working on your demo yourself a bit, then if you have a specific question post back here? 

[Angie]

Nah, I figured out a different solution.

[Carl]

As Zach said, there really is quite a bit that goes into this that isn't directly tied to GSAP. GSAP's only role is really going to be a small matter of animating the width, scale, or opacity of a few things. The majority of the trouble is going to be with the css layout you choose and programming the logic for the opening and closing of certain elements.

 

below is a very basic example of how you can use a loop to target different things and apply the same animation to them. Each expander element has animation that increases it's width and reveals a close button. The animation plays when you click on it. 

 

When you open any expander there is logic that asks "is there an active expander?" if yes, we tell the active expander to reverse() its animation.

When an expander opens we remember which one it is by using the active variable

 

Each expander also has a close button that reverses its animation

 

The demo below is provided simply to illustrate how to use a loop in this fashion. It will probably be a bit of work if you want to customize the animation for each expanding element, make multiple elements shrink when one opens, or control the direction that they expand too.

 

Click any colored div below

 

See the Pen YzGpXWO?editors=0010 by snorkltv (@snorkltv) on CodePen

 

 

Doh, I just saw you figured out something else. Maybe this will help someone in the future.

 

[PointC]

17 minutes ago, Carl said:

Doh, I just saw you figured out something else. Maybe this will help someone in the future.

 

Very nice @Carl. I think that will certainly help someone in the future as I've seen a form of this question asked many times over the years.