Jump to content

Search In
  • More options...
Find results that contain...
Find results in...

Accordian puzzle

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

Hey everyone,


I was wondering if I could get another set of eyes on this to help me solve this puzzle. Making this fluid for various sized windows.


Please just look at first blue accordion item.

On rollover,  the targeted accordion item expands to 50% width. Everything else collapses to 16.66%.

On click, the first slide expands to 100% width.


My issue is with the contents of the slide container. The slide container needs to be made up of 50% image and 50% white text box.

In this codePen, you will see I sort of finagled something together where as the container expands to 100% the image quickly changes to 50%. Its a little janky and you can see the tween sort of jerk. Not really ideal: 

See the Pen GdPqRv by stevewojcik (@stevewojcik) on CodePen


Here I start out with the blue image and the white text box both being set to 50%. But as you can see, rather than being 50% of the entire experience, they are 50% of the containers current 25% state. When you click to expand it goes to where it needs to be.

See the Pen rvoLOX by stevewojcik (@stevewojcik) on CodePen



Here is a quick, thrown together wireframe of what i'm trying to accomplish. I figured percentages were the way to go because I needed a fluid experience. Maybe i should explore a different path? Any ideas or guidance would be great.








Link to comment
Share on other sites

I personally wouldn't code it like that because making any changes would be really hard, for example if you change number of panels then you will have to adjust everything else. Take a look at following similar thread.



See the Pen jZXPVQ by Sahil89 (@Sahil89) on CodePen


  • Like 2
Link to comment
Share on other sites

Thanks for chiming in Sahil. As far as the way its coded, thats not what I was focusing on right now. Diaco, from GSAP, has a great pen that I was going to follow once I get the basic functionality sorted out. My issue is having a slide that is 50% image and 50% text in a container that sort of masks that content in and out.


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.