Jump to content
Search Community

loading sequence, how do I... ?

greykrav 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

good evening, 

How can I control the loading sequence of the attached pen(loading screens) combined with this pen of a high quality image using split text. 

for the first

See the Pen rNBKjjw by kravmaguy (@kravmaguy) on CodePen

 in the html there is a loading icon wrapped in a container and below that is the greensock logo with its effects wrapped in another div.  this pen isnt working as desired because the greensock logo is showing at the same time as the loading logo and then only being replaced when setTimeout is completed.  id like the loading spinner to show first, and then afterwards the greensock splash logo, and then after that the high quality image with its text. (and ideally set a minimum time for the greensock logo to display for say.. 2.5 seconds, in case the viewer gets the high quality image data fast) 

 

basically: first show the loading spinner, then show the greensock logo for a minimum amount of time AND when the high quality image is ready. then display the high quality image with its associated animations. 

 

Ive read/watched the following material position parameter and event loop.  I could not implement it to solve my problem. All help  and advice appreciated. 

 

See the Pen xxKjQgj?editors=0100 by kravmaguy (@kravmaguy) on CodePen

Link to comment
Share on other sites

ok nevermind Ive just fixed that issue now the loading icon is appearing on a small screen and its centered, just some minor css changes I had to make. 

and here is the final version: 

And is adding delayedCall on line 10 better than the solution I came up with, which was just to add delay:6 as the last parameter in the object on line 41 of the code?  

anything else I should change? 

Link to comment
Share on other sites

5 hours ago, greykrav said:

anything else I should change? 

You could change the setTimeout to use a delayedCall instead if you're like. 

I would also recommend not using jQuery's .fadeOut() because GSAP animations are more performant, although it probably wouldn't matter much in this case. Tweening the autoAlpha and then (if you need to) changing the display to none in the onComplete would replace it. The modern web doesn't really need jQuery.

 

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