Jump to content
Search Community

Accordian puzzle

Woj test
Moderator Tag

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.
0G0cc3V.png

 

2Ojhli0.png

 

iQBIKeZ.png

 

 

 

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.
×
×
  • Create New...