Jump to content


Responsive Animations

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

Hi Greensock guys,


Know this topic has been covered a little in some other posts, was reading about using media queries and 'resize' functions here and here, but I wanted to double-check something with you in regards to responsive animations.


I've just put together a quick landing page for my portfolio, found here (and big thanks to the GS guys for helping me nut out questions I had along the way with it), and I'm using an if/else statement after the $(document).ready to fire differently scaled animations depending on the browser width.

I had put in a window resize event handler in my script but I noticed it was screwing with the animations, they would still be stuck on a particular width's animation even though it had resized. Plus, I was essentially just repeating the same code all over again to get it to work, was thinking there must be a better way to call responsive animations than this.


So I'm guessing to make these kinds of responsive animations work we'd need to kill the currently running ones first right? And is there a better/cleaner way of doing this than just repeating functions over when a browser resizes, say for instance if I just made the if/else media queries a function of their own, then recalled that function when a resize fired?

Apologies if this is actually simpler than I've figured, I just wanted to clarify this in case any other devs needed a simplified answer to this too, am finding myself having to do a lot of these responsive animations lately and I thought it would be wise to get a more definitive approach to it  :)


Thanks as always guys.

Link to comment
Share on other sites

Hi, for a responsive animations I prefer to use percentages, not hardcoded pixel-based values :) Percentages-based animations have some limitations ( for example no x/y translation ), but my guess would be to make everything percent-based ( in layout and animations ) and you'll have no problems :) Also, if you need percent to pixel function ( to tween x/y ) you can check 

See the Pen bysgL by bassta (@bassta) on CodePen


P.S. very nice and create landing page! I love it. 

  • Like 1
Link to comment
Share on other sites

Thanks Chrysto, that's high praise coming from you mate!  :lol:


Okay, will give percentToPixel a try, I've never heard of that handler, so thanks for that. That's a pretty nice and simple example too.


Just thinking out loud, but won't I run into the same problem though, where after the browser's been resized it gets 'caught', so to speak, and needs to be refired or refreshed so as to recognise it's new width/height?

Like for instance, if I click the button in your example, then drag the browser out to be a little larger, it's still staying at 40% of the original browser size I think, and does so if you continue clicking it.

Link to comment
Share on other sites

Yes, this is some limitation... I can thing something of it. Btw see http://bassta.bg/pravatami/?2 - this is slides plugin similar to factslides.com ( It's still work on progress, we will feature rights you have - for example "do you know, you have the right to stay up to three months on EU-country territory with only ID etc ). It will be fully responsive, but I still make the animations with TimelineMax. So if you make everything percent-based and animate top/left properties, trust me, works great. 

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.