Jump to content
GreenSock

Search In
  • More options...
Find results that contain...
Find results in...
code-salad

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

Recommended Posts

I need to make this event happen a few seconds after page loads.  Can someone help?

 

Also, the type weight is normal during transition but is bold as it should be after transition. Why?

 

Thank you!

See the Pen oXORLz by code-slaw (@code-slaw) on CodePen

Link to post
Share on other sites

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 post
Share on other sites

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

×