How to stop animation at certain screen size

[Mladen]

Hello! 

 

I'm beginner in Javascript/GSAP world. Pardon me because of some elementary questions. :) 

 

I'm trying to animate a button to expand on hover. I did that. But, I would love to completely remove the animation in the certain screen sizes/media queries. 

 

Here is my code: 

 

 

toggleHeroBtn.to(herobutton, .7, {paddingRight:"15.3rem", paddingLeft:"15.3rem", ease: Power1. easeOut});

 

 

 

 

herobuttonImg.addEventListener('mouseenter', _ => {

 

toggleHeroBtn.play();

 

});

 

herobuttonImg.addEventListener('mouseleave', _ => {

 

toggleHeroBtn.reverse();

 

});

 

 

Thank you in advance!! 

[mikel]

Hi @Mladen,

 

Welcome to the GreenSock Forum.

 

For me is matchMedia the best solution. Here a simple case of @Dipscom

 

See the Pen wNPRpE by dipscom (@dipscom) on CodePen

 

And here the thread: how-to-update-teens-for-responsive-breakpoints

 

Happy tweening ...

Mikel