Responsive spritesheet animation

[Fábio Novais]

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

[Carl]

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

.

[RolandSoos]

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