Jump to content
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

Share this post


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

Share this post


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

Share this post


Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...

  • Recently Browsing   0 members

    No registered users viewing this page.