Jump to content
Search Community

Sprite animation trough bezierpath

tsun4ever 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


im trying to do animate a animated sprite trough a bezierpath controlled via scrollmagic.


so far i managed to separate the problems in 2 :

- the bezierpath is applied to the sprite container => works fine

- the sprite animation is applied to the sprite itself => does not work fine


EDIT: http://design-voilaah.com/mnd/app/


for the sprite control, my code is

var controller = new ScrollMagic.Controller();
var scene = new ScrollMagic.Scene({triggerElement: "#trigger", duration: 500, offset: 100})
                .addIndicators() // add indicators (requires plugin)
                .on("update", function (e) { // used to control and reverse the sprite when man walking left/right or up/down
                    $cachedCharacter.attr("class", "character " + e.target.controller().info("scrollDirection"));

When i have only one sprite, this man walking left/right, it works fine.

when im adding a second sprite to control the man walking up/down, it does not work anymore

    var scene2 = new ScrollMagic.Scene({triggerElement: "#trigger2", duration: 500})
                .addIndicators() // add indicators (requires plugin)
                .on("update", function (e) {
                    $cachedCharacter.attr("class", "character " + e.target.controller().info("scrollDirection"));
Link to comment
Share on other sites

Hello tsun4ever, and Welcome to the GreenSock forum!


Even though ScrollMagic is made with GSAP, it is not made by GreenSock, but is made by Jan Paepke. I am sure there other users in the forum that can help you answer this ScrollMagic question!


Also you can check out the


ScrollMagic Plugin GSAP: http://scrollmagic.io/docs/animation.GSAP.html


ScrollMagic Documentation: http://scrollmagic.io/docs/index.html


ScrollMagic Support: https://github.com/janpaepke/ScrollMagic


And if possible, do you have an example so we can see your code example in context?

Here is a video tut on how to create a codepen example.

This way we can test your code live on codepen to better help you!

  • Like 1
Link to comment
Share on other sites

Thank you for the example ;)  I'm going through your code on that site. But unfortunately it would be really hard to debug your code since we cant test it live. That is why we love codepen since it allows us to test in an editable environment and change your code so we can focus on just the parts that your having issues with. You would only need to make a limited codepen that shows your issue.


It looks like your questions has more to do with how to use the ScrollMagic methods and the ScrollMagic GSAP plugin. We will try our best to answer questions relating to the use of ScrollMagic with GSAP. I'm sure other users in the forum have experience with ScrollMagic can provide an answer for you.


But you can also try asking your question on ScrollMagic's support issue page if no one else answers your question about how to use ScrollMagic here:




This website might be helpful. One of the moderators here called Petr has various tutorials on how to use ScrollMagic with GSAP.





ScrollMagic cheat-sheet: https://ihatetomatoes.net/scrollmagic-cheat-sheet/


Thanks :)

  • Like 3
Link to comment
Share on other sites

i cant find any solutions to my issues so far, so i separated the p[roblem into 2 codepen,

hopefully someone can spot the problem


1st the sprite animation with a forward/reverse motion along the scroll


See the Pen BzgwwX by chrislabz (@chrislabz) on CodePen


as we can see the 1st scene does not start , meaning the guy should have a walking animaiton when we scroll down / up

scene2 and scene 3 seems to work fine



will provide the bezier path animation in a few minutes

Link to comment
Share on other sites

It looks like your codpen is missing some of the sprite images.


Also I noticed that some of those images don't look like sprite images. They look like only one sprite inside them. Usually a sprite will contain many sprites so it can save on server requests and be able to have a seamless animation when doing stepped easing.


What does your sprite animation look like without scrollmagic so we have context?


Also here are some examples of sprite animations done with GSAP. You will notice if you inspect the image that it has many image sprites within one image.


See the Pen zrGGmQ by jonathan (@jonathan) on CodePen


You know what i mean?



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