Jump to content
GreenSock

Lynx

Animate CSS Properties with GSAP

Go to solution Solved by Rodrigo,

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

I'm new to GSAP and well, anything identical to this I want to create animations on my pages.  I have TweenMax loaded via CDN along with the CSSPlugin. Is this not the correct way to animate CSS properties I don't see my class animate to the left as a starting point ?

<script>TweenLite.to(".proxylogo", 12, {left:"100px"})</script>

What if you animate a CSS feature that IE 7 or IE 8 or a mobile phone browser doesn't understand, is there a fall back option with GSAP ?

Link to comment
Share on other sites

Hi and welcome to the GreenSock forums.

 

Your script looks OK to me. Perhaps you could wrap it in jquery's ready() method in order to wait for the document's element are in place and, if you added reference to your styles in the head section, all css properties have been read and parsed to the DOM elements, like this:

$(document).ready(function(){

TweenLite.to(".proxylogo", 12, {left:"100px"});

});

Now if for some reason you need some specific dimensions of an image, those will not be completely rendered when the DOM is ready, in that case you can use jquery's load() method or javascript's onload:

// waits for every asset in the page to be completely loaded
$(window).load(function(){

TweenLite.to(".proxylogo", 12, {left:"100px"});

});

// this code works in the same way as the one above, just no dependencies
window.onload = function(){

  TweenLite.to(".proxylogo", 12, {left:"100px"});

};

Finally, check that in your CSS the element you're moving has a position defined, like relative, absolute or fixed, otherwise you won't be able to change properties like top, left, margins, etc. In this case I'd also suggest you to use x and y instead of left and top, because it'll send the animation rendering to the GPU creating a faster and smoother animation:

$(window).load(function(){

TweenLite.to(".proxylogo", 12, {x:"100px"});

});

// this code works in the same way as the one above, just no dependencies
window.onload = function(){

  TweenLite.to(".proxylogo", 12, {x:"100px"});

};

As for CSS properties not readable by any browser, that will only depend on the support of that particular browser for that particular property. To learn more about that check this site:

 

http://caniuse.com/

 

Rodrigo.

  • Like 2
Link to comment
Share on other sites

I just started learning myself but try this:

 

    TweenLite.to($('.proxylogo'), 12, {css:{left:"100px"}});
 
EDIT: Looks like a mod responded a second before me.
  • Like 1
Link to comment
Share on other sites

Ha, don't worry, it happens to all of us around here.

 

A note regarding your code. Is not mandatory to wrap CSS properties in a specific object. The engine detects the CSS properties being passed and creates the css wrapper:

TweenLite.to($('.proxylogo'), 12, {css:{left:"100px"}});

// this code has the same effect
TweenLite.to($('.proxylogo'), 12, {left:"100px"});

The only difference COULD BE (note that is emphasized) noticed in performance, if you're running a bunch of concurrent instances, and by a bunch I mean thousands of them, and at that point javascript execution will probably be the last of your concerns.

  • Like 1
Link to comment
Share on other sites

Hi and welcome to the GreenSock forums.

 

Your script looks OK to me. Perhaps you could wrap it in jquery's ready() method in order to wait for the document's element are in place and, if you added reference to your styles in the head section, all css properties have been read and parsed to the DOM elements, like this:

$(document).ready(function(){

TweenLite.to(".proxylogo", 12, {left:"100px"});

});

Now if for some reason you need some specific dimensions of an image, those will not be completely rendered when the DOM is ready, in that case you can use jquery's load() method or javascript's onload:

// waits for every asset in the page to be completely loaded
$(window).load(function(){

TweenLite.to(".proxylogo", 12, {left:"100px"});

});

// this code works in the same way as the one above, just no dependencies
window.onload = function(){

  TweenLite.to(".proxylogo", 12, {left:"100px"});

};

Finally, check that in your CSS the element you're moving has a position defined, like relative, absolute or fixed, otherwise you won't be able to change properties like top, left, margins, etc. In this case I'd also suggest you to use x and y instead of left and top, because it'll send the animation rendering to the GPU creating a faster and smoother animation:

$(window).load(function(){

TweenLite.to(".proxylogo", 12, {x:"100px"});

});

// this code works in the same way as the one above, just no dependencies
window.onload = function(){

  TweenLite.to(".proxylogo", 12, {x:"100px"});

};

As for CSS properties not readable by any browser, that will only depend on the support of that particular browser for that particular property. To learn more about that check this site:

 

http://caniuse.com/

 

Rodrigo.

 

 

 

My class has a position as well some positioning applied to the style.  When using jQuery load() function and loading the page, the class doesn't move to the left ?

.proxylogo {background-color:orange;height:200px;width:360px;margin:0 auto;position:relative;top:150px;}

Can GSAP animate shadows, for example if I'm animating perspective and when the image, for example gets closer to the background the shadow is almost none existant, when the image rotates in perspective further away the shadow becomes more apparent ?

 

P.s - Email notifications are not working ?

Link to comment
Share on other sites

  • Solution

Hi,

 

I don't know what could be the issue here. Without a live example is impossible to pinpoint the cause.

 

Check the following codepen. Feel free to fork and adapt it to your scenario:

 

See the Pen bNwoQz by rhernando (@rhernando) on CodePen

 

As for the notifications you need to check the type of subscription you're requesting and that the mails are not landing in your spam folder.

 

Rodrigo.

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.
×