Jump to content
Search Community

Using media queries with GSAP

Portal_Zii test
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

Hello! I am working on an animated banner. I currently have media queries via CSS set to change the original position of each object that is being animated. 

The problem im having is the objects are being positioned incorrectly apon window resize. You can only obtain the correct positioning by refreshing the page.

Is there a way I could do this so it works more smoothly? Does any one have any suggestions? Would doing it in JS fix my issue? If so how would I start figuring out how that works?

Here is a link to my project so you can see my issue.  http://portalpacific.net/Al/pg4/

Thanks!

Link to comment
Share on other sites

Hello Portal_Zii, and Welcome to the GreenSock Forum!

 

And here is another link to the GSAP CSSPlugin Docs page, that goes over the clearProps special property mentioned in that link that Blake posted above.

 

http://greensock.com/docs/#/HTML5/GSAP/Plugins/CSSPlugin/

  • clearProps
    A comma-delimited list of property names that you want to clear from the element's "style" property when the tween completes (or use "all" to clear all properties). This can be useful if, for example, you have a class (or some other selector) that should apply certain styles to an element when the tween is over that would otherwise get overridden by the element.style-specific data that was applied during the tween. Typically you do not need to include vendor prefixes.
//tweens 3 properties and then clears only "left" and "transform" (because "scale" affects the "transform" css property. CSSPlugin automatically applies the vendor prefix if necessary too)
TweenLite.from(element, 5, {scale:0, left:200, backgroundColor:"red", clearProps:"scale,left"});

 

  • 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.
×
×
  • Create New...