tsun4ever

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

thanks Jonathan for your help yes i know what you mean. in my version im using the image sequencing with scrollmagic as per shown here http://scrollmagic.io/examples/expert/image_sequence.html

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 http://codepen.io/chrislabz/pen/BzgwwX 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

Thanks a lot, going all trough the links you provide and hope to find my answers

quick demo http://design-voilaah.com/mnd/app/

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

Wow thanks guys ! GreenSock : Thks for the clue and the docs. Ben&Jerry website is quite interesting, but i am more looking for a vertical scroll concept actually. Rodrigo: The codepen leads to think that it is quite "easy" indeed. I hope this bezier path animation will be working with the SupeScrollarama jquery plugin, any idea of that ? Lets try some testing EDIT : just found this useful thread on bezier plugin and superscrollorama : http://forums.greensock.com/topic/7481-bezierplugin-undefined/ Cheers, Chris

Hi guys, for a website project, i would like to perform a path animated sparkle along a cable / wire while scrolling down. Do you think it is possible to perform this kind of animated path with Tween ? Maybe with the Raphael plugin ? I think i gonna use SuperScrollarama for handling the vertical scrolling combined with TweeMax library, depending on the ability to perform animated path with Tween of course. Any ideas or inspiration website ? Thanks ! Cheers, Chris

Hi Rodrigo, thanks for the tips ! And in a way, i would prefer to handle everything from the same side, meaning controlling scrolling / transition / animation from the Javascript side and not a mix of CSS and JS. Anyway, as any respectful good client, he changes his mind on the concept and now would like a path animated sparkle along a cable / wire while scrolling down or automatically animated with pitstop at certain point :S I will create a new post for this matter after searching here in the forum existing posts. Cheers, Chris

Hi Rodrigo, thanks for your entry. After some research and try, i think a good approach is definitely to use SuperScrollorama with the TweenJs (and probably the Raphael Plugin). First i was thinking using CSS3 Animation with SuperScollorama but any CSS3 Animations inside a pinned object make Scrollarama bugged. keep you update when a preview version is up, if the client like and vote for the concept Regards, Chris

Hi there, i need to perform a one page vertical scrolling with animation. My basic idea is to animation the construction of a building. Then while the user scrolls down the page, some walls will grow up and some men will walk left and right for example, synchronized with the scroll. I was thinking to use a SVG build with Illustrator then animate it, but the svg file is 1.7Mo heavy :/ How one can achieve that ? Any idea or advice or example please ? Many thanks !