Jump to content


Sprite Animation (via background-position) while throwing

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 everyone,


I'm trying to get a TimelineMax sprite animation of an SVG-Background to play while throwing the container.

Basically, I was planning on using "getVelocity" with "onThrowUpdate" to trigger the playing of the timeline/the movement of the background-image from the start position to the end position (which is calculated via a function), if progress of the timeline = 0. 

Unfortunately, I can't make it work properly. 


At first, the timeline/sprite-animation started only after the throw-movement had stopped.

Now, in the codepen, the animation isn't working at all – I figured out, that it has to do with the "backgroundPosition: getClip(9, 4)" in the second "fromTo"-Tween of the timeline, but I can't figure out why.


What am I missing out?


Any help is very much appreciated!!! THX!



See the Pen XENBZq by tschingding (@tschingding) on CodePen

Link to comment
Share on other sites

Hi @janchristoph.schumm


To start, make sure you're using the latest versions of GSAP on CodePen.



And here's a similar topic. It uses PixiJS, but the concept is still the same.





  • Like 3
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.