Mattes Posted February 7, 2023 Share Posted February 7, 2023 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 More sharing options...
Rodrigo Posted February 7, 2023 Share Posted February 7, 2023 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! Link to comment Share on other sites More sharing options...
Mattes Posted February 8, 2023 Author Share Posted February 8, 2023 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 2 Link to comment Share on other sites More sharing options...
Recommended Posts
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 accountSign in
Already have an account? Sign in here.
Sign In Now