[Sprite animation trough bezierpath]

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

[Sprite animation trough bezierpath]

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

[Sprite animation trough bezierpath]

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

[Sprite animation trough bezierpath]

Thanks a lot, 

 

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

[Sprite animation trough bezierpath]

quick demo

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

[Sprite animation trough bezierpath]

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

[Path animation while vertical scrolling]

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

[Path animation while vertical scrolling]

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

[Need Advice : SVG Animation while vertical scrolling]

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

[Need Advice : SVG Animation while vertical scrolling]

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

[Need Advice : SVG Animation while vertical scrolling]

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 !