Jump to content
GreenSock

Fábio Novais

Responsive spritesheet animation

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 there.
I´ve been trying to make a responsive spritesheet animation using greensock, and got stucked in that point:
How can I recreate my animation while resizing the window?

I´ve made all the calculations, but my timeline seems not to get updated.

See the Pen MZdQep by fnovais (@fnovais) on CodePen

Link to comment
Share on other sites

thanks for the demo.

 

I didn't have time to validate all your logic for the dimensions. It seemed odd that the responsive animation didn't change size on window resize, but I did make it so that you could resize the window and the animation would not break.

 

I think the issue was that you were creating additional new timelines on each resize while the previous timeline was still running. This was throwing off the start values of your animations.

 

in my example I bring the playhead of the timeline back to a time(0), clear() the timeline and put new tween inside it


 

//make the timeline once outside your function
var tl = new TimelineLite();
animatedSprite();
function animatedSprite() {
  var animationElement = document.querySelector(".animation");
  var maskWidth = document.querySelector(".animation-mask").clientWidth;
  var animationTotalFrames = 10;
  animationElement.style.width =
    parseInt(maskWidth * animationTotalFrames) + "px";
  var animationElementWidth = document.querySelector(".animation").clientWidth;
  var spriteRealWidth =
    parseInt((animationElementWidth - maskWidth) * -1) + "px";

  //set the time to 0, clear the timeline and rebuild it
  tl.time(0).clear();
  
  tl.to(animationElement, 1, {
    repeat: -1,
    x: spriteRealWidth,
    ease: SteppedEase.config(animationTotalFrames - 1)
  });
}

 

Please see

See the Pen qLGyVB by GreenSock (@GreenSock) on CodePen

.

Link to comment
Share on other sites

Little bit different implementation, but it works fine even when you resize the window and the logic is much simpler than the original.

 

See the Pen jXovOX?editors=1010 by mm00 (@mm00) on CodePen

 

  • Like 3
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.
×