media query resize

[zozo 19 Likes (Newbie)]

Hi, 

 

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 ? 

Best, 

 

Romain

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

[Shaun Gorneau 2,037 Likes (Superhero)]

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

 

.disk{
  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!

[zozo 19 Likes (Newbie)]

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. 

[Shaun Gorneau 2,037 Likes (Superhero)]

Happy to help!

[zozo 19 Likes (Newbie)]

I have the same question with draggable. 

Can I do something equivalent ? 

 

Thanks ! 

 

See the Pen aRLzzv by romainmalauzat (@romainmalauzat) on CodePen

 

[OSUblake 18,534 Likes (Superhero)]

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

 

 

 

 

 

[zozo 19 Likes (Newbie)]

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