Jump to content


canvas responsive

Recommended Posts

Hello everyone,

I created a scroll animation with a sprite sheet, works wonderfully with gsap, but unfortunately not with the responsive behavior. Is there a possibility to display the animation max-width 639px only half as big?


Thank you for your help

See the Pen poZBZJP by mattes007 (@mattes007) on CodePen

Link to comment
Share on other sites



This is more a Canvas related question than a GSAP one. After a simple inspection of the drawImage method:



I think this might be a good approach:

function update() {
  const frame = frames[logo4net.frame];
  const f = frame.frame;
  const s = frame.spriteSourceSize;
  const x = logo4net.x + s.x;
  const y = logo4net.y + s.y;
  context.clearRect(0, 0, vw, vh);
  context.globalAlpha = logo4net.alpha;
  context.translate(cx, cy);
  context.scale(logo4net.scale, logo4net.scale);
  context.drawImage(sprite, f.x, f.y, f.w, f.h, x/2, y/2, f.w/2, f.h/2);

You'll have to play with this a bit and see if you reach a point where this works as you expect. Maybe create a boolean for large/small screen and based on that either use the full value or half value using a window resize event handler.


Hopefully this helps.

Happy Tweening!

Link to comment
Share on other sites

Hi Rodrigo,

thanks a lot for your quick help. I'll test it to see if it has the desired effect.

By the way, the greensock forum is really great! 😀



  • Like 2
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.