Jump to content
Search Community

pushing divs

asaelz 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

Hi and welcome to the GreenSock forums,


Thanks for the demo. I'm having a hard time understanding what you need help with or how this is supposed to work.

When I scrolled I saw things move away and then the owl appeared. Nothing happened when I clicked on a column.


Perhaps you could simplify the demo even more down to just a single item you need help with.

I saw that this post has gotten a lot of views but no responses so I'm guessing others could use some more help in understanding how to help you.



  • Like 1
Link to comment
Share on other sites

I 'm going to hazard a guess that what you want is a vertical accordian style affect where you click on a column and it expands and the others collapse to much thinner columns but remain clickable so they can expand as well? Or perhaps you want the other columns to slide underneath the expanded one?


And the background image is supposed fade in and fill the expanded column?


As noted it's hard to tell for sure what you are trying to achieve.

  • Like 1
Link to comment
Share on other sites

we want to achieve,
by clicking on any column this column will expand to 100% of its container and push the other columns off the screen


By expanding the column by increasing the width:
the problem is that the column expands from point x0 to 100% (that's how css works)

but by doing this, for example, by clicking on the second column, how do we make the column expand from the center to both sides at the same time?

this is for the purpose of emulating that the column pushes the other columns off the screen at the same time.



See the Pen BYrvyb by asaelz (@asaelz) on CodePen


Link to comment
Share on other sites

Thanks for the clarification. It sounds like you are going to have to determine which column you clicked on and move it over to the left based on how many columns are to the left and how wide they are. Likewise every column to the left of the one you clicked will need to move left and every column to the right will need to move right. Its all possible but it would take a nice chunk of custom code and how its written would be highly dependent on how your html / css is set up, whether or not the whole thing is responsive, and whether or not there can be a variable number of columns. 


There a hundreds of ways to approach accordions like this going back to the Flash days. I'd say google around a bit as I'm sure you will find some ideas to borrow from similar examples.

See the Pen YpmWoM?editors=0010 by nevernotsean (@nevernotsean) on CodePen


Unfortunately, unless someone has a similar situation or demo to reference its not the type of thing we can dive into. 

If you have a question more related to animation and GSAP, we'd love to help. 

  • Like 4
Link to comment
Share on other sites

This should get you going.


Demonstrates the css and how you might do the expansion animation with your switch. 


Note that if you are expanding the panel to full width then your idea doesn't take into account reversing to the initial state. You're going to leave viewers with the expanded item and no way to escape it without additional logic.



See the Pen aqjZQo by Visual-Q (@Visual-Q) on CodePen


  • Like 4
Link to comment
Share on other sites

I figured this was actually becoming something I might find useful. So I did some more work. Brand new codebase. This now reverse toggles on click, and calculates size and position for however many columns of slides you want. A worthwhile exercise I learned several new things about GSAP and jQuery.


See the Pen yvxNgO?editors=1010 by Visual-Q (@Visual-Q) on CodePen


  • Like 4
Link to comment
Share on other sites

I had a question to put out to the maestros. There is one part of my code that I don't understand the need for, even though it works, which bugs me. Figuring these things usually teaches me something new so maybe someone can enlighten me. In the first pen below we can see that the animation continues to respond to clicks and run. In the second it is no longer responsive after it returns reverses to the start.


The difference between the two is the else statement. I'm not sure why it is necessary to tell the timeline to play on subsequent clicks. Some sort of state has been created such that GSAP needs to be told to play it again but I don't understand what it is.





      var progress = timeline.progress();
      var notthisElement = menuOption.not(this);
      if (progress > 0){
        timeline.reversed( !timeline.reversed() );
      } else {timeline.play();}


See the Pen yvxNgO by Visual-Q (@Visual-Q) on CodePen

See the Pen EQdBre by Visual-Q (@Visual-Q) on CodePen


Link to comment
Share on other sites

@Visual-QIf you console log reversed state and progress in your second example, you will notice that your statement never executes because progress remains zero. You can get around this by setting reversed property on timeline to true, otherwise timeline will play in reverse for the first time. Note that unlike reversed method, reversed property doesn't reverse entire timeline.


See the Pen jZXPVQ?editors=1010 by Sahil89 (@Sahil89) on CodePen


  • Like 2
  • Thanks 1
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...