Jump to content

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

Sprite Animation (via background-position) while throwing

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.