Jump to content
Search Community

Sprite sheets, tweenmax question on scroll

blippar test
Moderator Tag

Go to solution Solved by ochalmers,

Warning: Please note

This thread was started before GSAP 3 was released. Some information, especially the syntax, may be out of date for GSAP 3. Please see the GSAP 3 migration guide and release notes for more information about how to update the code to GSAP 3's syntax. 

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

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.
  • Create New...