Jump to content
Search Community

How to play a set amount of TimelineMax?

cerulean 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

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

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