Jump to content


TweenMax.ticker Interference with Draggable and Autoplaying TweenMax Tween

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 am using Draggable to allow users to scrub through a spritesheet, but I am also using TweenMax.to automatically play the tween of the spritesheet going back and forth during this. Sahil provided a solution in an earlier version of this project, but his method of using the TweenMax.ticker object fails for me, and breaks everything when I try to combine Draggable and TweenMax.to functionalities. What I want to have happen is the cursor/touch position be relative to the current frame playing on the tween so things don't jump around when a user attempts to manually scrub the sprite. Is this possible using the ticker? Maybe there is a better approach?

In my codepen I have commented out the ticker portion. No matter what I've tried something has gone wrong. :-)



See the Pen LJRyXG by bugszomfg (@bugszomfg) on CodePen

Link to comment
Share on other sites


No, not from a css or after effect sense! It does from an programming sense where [0] is the first in an array. I suppose it is in fact a form of an array defined first by the parameters of the spritesheet. It took me visually doing it with no overflow to get it.


In previous thread, @PointC was correct. The first frame is visible that's why you have to reduce it by one frame. There are no arrays involved, it is just you shifting background in multiply of frame width.


You can add and remove the ticker event listener on mouse enter and leave.


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


  • Like 2
Link to comment
Share on other sites

This doesn't seem to work because mouseenter is constantly updating while you are in the image.  It tweens nicely at the beginning, but then interferes. If you compromise and disable the listener after the first tween, then it just loops and stands still. ?


I think the best approach is relative mouse movements considering the current sprite position, but that seems like it would need a rewrite, and GSAP might not be the best solution for this problem. I haven't come across anything similar besides the gifctrl project. I think I'm going to settle for the jumpiness for now. It works well enough. 

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.