Jump to content


Sprite sheets, tweenmax question on scroll

Moderator Tag

Recommended Posts

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

Link to comment
Share on other sites

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

Link to comment
Share on other sites

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

Link to comment
Share on other sites

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

Link to comment
Share on other sites

Oh not bad ochalmers, I will try it!

Link to comment
Share on other sites

Ok finally it was not that hard to handle !


Thank you very much ochalmers, it helped a lot !

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.