Jump to content

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

How to play a set amount of TimelineMax?

Recommended Posts

I have a scrolling set of thumbnails that is fed from a backend — thus a varying amount of images.


These are masked by a div with overflow:hidden.


The thumbnails scroll left and right depending on where mouse is over them (left or right) and also with two external arrows: mouseOver over the arrows scrolls the thumbnails left and right.


I set up the entire thing as a TimelineMax.  Very nice -- play from 0 to 1 depending or reverse it, if I want to go the other way.


The issue I'm running into is making this work on an iPad.  The client doesn't want me to invest the time into setting it up for full touch responsiveness, which I recommend — so my only thought is to scroll based on the arrows.  —  MouseDown doesn't work — just asks if I want to download the arrow images —  


So I'm thinking: click — but given that I've got it all set up as a TImelineMax, how do I do this?  I could of course just do a simple TweenMax a given number of pixels, but again, would like to tween, say, from TimelineMax progress 0 to, oh, 0.1 or something — I reckon I can calculate the appropriate amount given the total width of the images and the masking div —


Anyway to move a TimelineMax in pieces like this?  Would I do a TweenMax of the TimelineMax's progress() ??


Thanks for any help — and yes, I know I should do the touch interface, but the client needs to give the go ahead…

Link to comment
Share on other sites

Yeah it sounds like you have a good handle on this.


It would just be




TweenMax.to(yourTimeline, someDuration, {progress:someValue});
  • Like 1
Link to comment
Share on other sites

Yep, and don't forget to pause() the timeline before you tween its progress.

  • Like 1
Link to comment
Share on other sites

Yep, and don't forget to pause() the timeline before you tween its progress.

Thanks —


One question — is there an easy way to limit the tween or does it do it itself, since progress() can't be <0 or >1 ?  Or  just have to check beforehand?

Link to comment
Share on other sites

Technically you can set values below 0 or above 1 but all that does is adjust the startTime of the tween accordingly. And negative values are interpreted as relative to the end, just like time() and totalTime(). So, for example, if you have a 10-second tween and you do time(-2), it would jump to 2 seconds before the end (8 seconds in this case). Likewise, if you do progress(-0.2), it would jump to 20% before the end of the tween. progress(-2) would mean it would go back twice as much as the duration, shooting past the end, so it'd wait 10 seconds in this case and then play the 10-second tween. progress(2) would just make it jump all the way to the end, and the tween's startTime would be moved back twice as far (unless the parent timeline's smoothChildTiming is set to false). 

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.