Jump to content
Search Community

How could I make this event trigger a couple seconds after page load?

code-salad test
Moderator Tag

Go to solution Solved by code-salad,

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

You can add a delay to any tween or timeline. For example:

//wait 5 seconds, then animate...
TweenLite.to("#yourID", 2, {x:300, delay:5});

As far as the type appearing to change thickness, that's a browser rendering thing that happens in some browsers when the element is layerized to the GPU to enhance performance. GSAP automatically triggers GPU acceleration for you, and then releases the layer at the end of the tween (shifting from 3D rendering to 2D), but you can tell GSAP not to GPU-accelerate things by running this code once: 

CSSPlugin.defaultForce3D = false;

Or you can turn it on all the time so that it doesn't release elements back to 2D after the tweens:

CSSPlugin.defaultForce3D = true;

Just beware that the GPU has limited memory, so if you have thousands of things animating and never shifting off the GPU, it could potentially run out of memory (although that's very rare). 

 

By the way, you can set the force3D value on a per-tween basis if you prefer; the tip above shows how to change the default value for everything. For example:

TweenLite.to("#myID", 2, {x:300, force3D:false});

To be clear, GSAP doesn't control rendering at all - it's a browser issue. GSAP is simply setting a 3D transform when force3D is true or "auto", and the browser is what determines how it renders the type. 

  • Like 2
Link to comment
Share on other sites

  • Solution

Thank you. Since my original post I watched the first few videos and saw how perfectly this could work for me. I've downloaded the files and am moving forward.  

 

Re: rendering, yes, I've since learned it has to do with browser's anti-aliasing during transition.

  • Like 1
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...