Jump to content


media query resize

Moderator Tag

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



I'm having trouble with the kill tween on resize event. 

My disk should be always in the center, but because of the tween, it break on resize.

how should I do this ? 




See the Pen xyLryG?editors=0010 by romainmalauzat (@romainmalauzat) on CodePen

Link to comment
Share on other sites

Hi @zozo, the reason for this trouble is a clash between what is being set in CSS and what is being overridden (due to specificity). In the CSS you have


  transform: translate(-50%, -50%)



Which of course is perfectly valid.


But what happens when this is run ...


tl.fromTo(".disk", 2, {rotation:0}, {rotation:360, ease:Linear.easeNone});


is that the transform matrix is taken over. So, to keep -50% and -50% in the calculations, you can just set those as properties in the fromTo and let the mediaQuery handle it from there, like so


See the Pen NOaWzy?editors=0010 by sgorneau (@sgorneau) on CodePen



Hope this helps!

  • Like 4
  • Thanks 1
Link to comment
Share on other sites

Ahh yes, thank you Shaun, this was really driving me crazy ! And it was so simple :) 

Love this forum, always a fast and spot on answer. 

  • Like 1
Link to comment
Share on other sites

Stop setting transforms in your CSS for stuff that you plan to animate. That includes dragging.


See the Pen bmoVwW by osublake (@osublake) on CodePen






  • Like 3
  • Thanks 1
Link to comment
Share on other sites

ahhh yes ! Thanks OSUblake !!! I didn't know we could do that. I repeat my self, but this forum is awesome !!!

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