canvas responsive

[Mattes 5 Likes (Newbie)]

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

[Rodrigo 5,034 Likes (Superhero)]

Hi,

 

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

https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/drawImage

 

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.save();
  context.clearRect(0, 0, vw, vh);
  context.globalAlpha = logo4net.alpha;
  context.translate(cx, cy);
  context.scale(logo4net.scale, logo4net.scale);
  context.rotate(logo4net.rotation);  
  context.drawImage(sprite, f.x, f.y, f.w, f.h, x/2, y/2, f.w/2, f.h/2);
  context.restore();
}

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!

[Mattes 5 Likes (Newbie)]

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! 😀

 

Thanks