Jump to content
GreenSock

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

Stacked Div Shifter with timelineLite

Recommended Posts

Hello fellow Greensockers!

I'm prototyping a method for arranging content on a page to prevent visitors from having to scroll through butt-loads of content. The method I'm trying to use is to shift the content divs over, slide them up, then stick them at the top of the the stack of div blocks. Here's what I have so far to help you visualize: http://jsfiddle.net/4zzaY/4/ Each one of those colored blocks represents a div full of content.

 

Originally I wanted to also have the jQuery .click() method alter the actual HTML ordering of the Divs, and change them the css positioning from relative to absolute and back to relative, that way they would automatically stack up on their own. However, I am not aware of any method to alter the arrangement of HTML with Greensock, jQuery, or javaScript in general. So what I ended up doing is keeping every element positioned absolutely and animating them that way.

 

My problem is that I'm noticing an issue, after the user has clicked on every single one of the buttons, they can no longer fire. I'm guessing this is because after the animation is fired, it's considered complete and no longer run-able. Unfortunately, I can't use any methods to reverse the timeline because that would alter the positioning of the elements. I considered the yoyo method but I believe that only works for tweenMax, not timelines? And even so, I'm not even sure that method would work anyway. I suppose even though my current method isn't exactly ideal, it still works with the exception of the animations not being able to fire twice.

Link to post
Share on other sites

Hello benderhune, Welcome to the GreenSock Forums!

 

You can try to put your tweens inside the click handlers anonymous function. And add the initial paused special property to the TimelineLite object.

 

Example 1: http://jsfiddle.net/4zzaY/10/

 

Or put your tweens in a named function, then call the function with the click handler.

 

Example 2: http://jsfiddle.net/4zzaY/12/

 

Does that help?

  • Like 1
Link to post
Share on other sites

Yes, that works perfectly! Thank you very much :D. I didn't know that putting the timeline within the jQuery click event would make any difference (pardon my JS ignorance, I'm still new to it!)

Link to post
Share on other sites

No worries.. Glad to help.. knowing is half the battle! :D

Link to post
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.

×