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);