Responsive animation using fixed values

[carljohnston.uk]

Hi all,

I'm new to GSAP forums, so I hope somebody can help.

 

I've created something that mimics the functionality of CSS media queries within javascript, however, as Greensock uses inline styles, you'd need to remove the style attribute once the animation has completed.

 

My question - Is there any built-in functionality within GSAP where you can define breakpoints without using a multiple if/else conditionals?

I've attached a codepen of my current solution which you will see on the lines, either side of the tagline.

See the Pen zdNMNW by carljohnston-uk (@carljohnston-uk) on CodePen

Edited August 7, 2017 by carljohnston.uk
Codepen explanation clarification

[mikel]

Hi @carljohnston.uk,

 

Welcome to GreenSock Forums.

 

Simply said no: GreenSock is animation library not an all-round tool.

 

But you will find some post regarding CSS media queries in this Forum. For example this one:

https://greensock.com/forums/topic/11172-using-media-queries-in-tweenmax

 

On 16.1.2015 at 6:52 AM, OSUblake said:

Here's another tip. You can add listeners to your media queries instead of doing a window resize event to find a match. Adding listeners will allow you to create a dynamic list of queries for things like height, width, orientation, handheld, aspect, etc. 

 

Here's a scaled down version of what I use. You can see the dynamic queries in action when you click the remove button on the large media div.

 

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

 

Kind regards

Mikel

[carljohnston.uk]

Hi @mikel,

 

Thanks for the response.

There is certainly some information there to make life a little easier.

 

Thank you for the resources.

Carl