Jump to content
Search Community

Sprite Animation (via background-position) while throwing

janchristoph.schumm 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

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.

https://cdnjs.cloudflare.com/ajax/libs/gsap/1.20.4/TweenMax.min.js
https://cdnjs.cloudflare.com/ajax/libs/gsap/1.20.4/utils/Draggable.min.js
https://s3-us-west-2.amazonaws.com/s.cdpn.io/16327/ThrowPropsPlugin.min.js

 

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