Sprite sheets, tweenmax question on scroll

[blippar]

Hi everyone, hope you are fine !

 

I come today with a new question about tweenmax.

 

I have a earth to make rotate while the user is scrolling (position fixed). Then the earth has to transform in an other item.

 

Well, after some research on your forum I discovered that you can have something fluent and nice with sprite sheets. and this function :

TweenMax.to(obj, 0.2, {x: "-=1194px", ease:SteppedEase.config(3)});

Sooo I have 20 images in my sprite for a width of 7960px.

 

The thing is, when I am rotating while scrolling, I can't do something like :

 

x: "+= scrolling value". If I am not in good proportions the animation is broken.

 

But in the meantime, if I scroll to a maximum position the animation has to be completed before transforming in an other object !

 

So I decided that each time I scroll, I will send 1194px to x, that correspond to 3 images. But, if you scroll very slowly you won't arrive in the next image's area before the end of spinning animation!

 

Do you have some idea or tips of how I can synchronize tweenmax with a scroll ?

 

I am hesitating about using scroll magic but I am afraid that it will use a huge amount of time to implement / masteries.

 

EDIT: here is a codepen I made.

See the Pen VLJWrX by anon (@anon) on CodePen

[Diaco]

Hi blippar 

 

pls provide a Codepen Demo for your questions ,

 

btw this's a simple demo of GSAP + ScrollMagic : 

See the Pen zGNZQG by MAW (@MAW) on CodePen

 

and simple demo of sprite animation with GSAP :  

See the Pen MYdwRP by MAW (@MAW) on CodePen

[blippar]

Thank you for your quick answer Diaco !

 

Ok if it can help ! I edited my first post in order to provide the codepen.

 

thanks for the scrollmagic code pen (but nothing happen, is it normal ?)

[blippar]

Ok, there is an other demo of what I tried :

play the whole animation on scroll and stop it if you don't scroll anymore.

 

But the result is quite a disaster...

 

See the Pen LVKjOq by anon (@anon) on CodePen

[joe_midi]

Maybe something like this: 

 

See the Pen RPzyqN by joemidi (@joemidi) on CodePen

[ochalmers]

It is definitely worth checking out ScrollMagic as has been mentioned above - it's amazing. Check out this demo they have on their site.

http://janpaepke.github.io/ScrollMagic/examples/expert/image_sequence.html

 

[blippar]

Oh not bad ochalmers, I will try it!

[blippar]

Ok finally it was not that hard to handle !

 

Thank you very much ochalmers, it helped a lot !

[ochalmers]

No worries, glad to be the middle man!