Jump to content
GreenSock

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

Sprite animation trough bezierpath

Recommended Posts

Hi

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})
                .setTween(sideSpriteTween)
                .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"));
                })
                .addTo(controller);

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})
                .setTween(frontSpriteTween)
                .addIndicators() // add indicators (requires plugin)
                .on("update", function (e) {
                    $cachedCharacter.attr("class", "character " + e.target.controller().info("scrollDirection"));
                })
                .addTo(controller);
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!

Thanks!
  • 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:

 

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

 

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

 

https://ihatetomatoes.net/simple-scrollmagic-tutorial/

https://ihatetomatoes.net/svg-scrolling-animation-triggered-scrollmagic/

 

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

 

Thanks :)

  • Like 3
Link to comment
Share on other sites

Thanks a lot, 

 

going all trough the links you provide and hope to find my answers :)

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

so far i managed to resolve the issues, it was mostly due to the fact that i was trying to re-use the same tween for different scrollmagic scene, and scrollmagic does not like that apparently

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.

×