Jump to content
Search Community

Images onload

Emilek1337 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

I'm creating a page intro with gsap. It looks ok for now. However if you open the site for the first time, all images get loaded at once, at page load, it results in like 0.5s when the imges are all shown at once before the animation actually begins. Can't I set the visibility to hidden and only show the images when they are being animated in gsap? So just before I animate the given picture, just set the visibility to visible using gsap or some other way to load the image only when it's actually needed.

See the Pen BMPVjL by vountish (@vountish) on CodePen

Link to comment
Share on other sites

Hi @Emilek1337,

 

Yup, certainly :) You can initially give the .img elements an opacity of 0 and then put all your code into a window.onload ... and within in that, tween the first to opacity 1 as way to bring it in nicely .. then set all to 1 to make them ready. 

 

Here is a codepen showing how to do that,

 

 

See the Pen ErObeB by sgorneau (@sgorneau) on CodePen

 

  • Like 3
Link to comment
Share on other sites

15 minutes ago, Shaun Gorneau said:

Hi @Emilek1337,

 

Yup, certainly :) You can initially give the .img elements an opacity of 0 and then put all your code into a window.onload ... and within in that, tween the first to opacity 1 as way to bring it in nicely .. then set all to 1 to make them ready. 

 

Here is a codepen showing how to do that,

 

 

See the Pen ErObeB by sgorneau (@sgorneau) on CodePen

 

Thank you, let's say I have timelines which are depending on the duration of the imagesanim timeline. Can I put all of my code in the window.onload function? Because otherwise the imagesAnim.duration() for example won't be accessible outside the function scope. 

Link to comment
Share on other sites

Hi @Emilek1337,

 

Depending on a few things, you could tackle this in a few ways. 

 

You can declare the timelines outside of the onload in the global scope, and then build one within the onload and then again make reference to the other from within the onload scope. Like this, 

 

See the Pen ErOEQJ by sgorneau (@sgorneau) on CodePen

 

Or, you certainly can include everything with the onload scope ... just know that means no Javascript will fire until all assets are loaded.

 

Or, you can build a master timeline and stuff that with timelines to handle the natural sequencing.

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