en en en en en en en en en en en en en en en en en en fa en en fr hbs_lat en en en es en en en ms en de en fr en en en ca en en en en en en en en ms en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en de en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en de en en en en en en en en en en en en en en en en en en en en ms en en en en en en de en hu en en en nl en pt en nl en pl en en en en en en en fr cv es tr es en en en en ms en en en en en en fr en hbs_lat en en en en en en en fr cv es tr es en en en en de en en en ca en en en en en
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.
The body flashes before the splash page has a chance to load, i've tried displaying: none on the content(which is a wrapper around all of the content) and then changing to display: initial in the showComplete function (in bold...where it's called is in bold too)
I'm using the gsap library to animate the splash page.
Also, an aside: i tried changing the CDN link to the timeline lite version (i also tried the tweenlite version), and changed all instances in my code from "TimelineMax" to "TimelineLite" and it wouldnt work, how do I fix this?
I'm on a phone riding a train, so, much limited on resources here. Giving a total shot in the dark as I've not even seen your code.
Your CSS is somewhere that is taking a moment to load. During that moment your content is showing. The more extreme solution here is to add a inline style to your wrapper tag and set it's visibility to hidden (which is better than display:none for a few reasons). That will guarantee the visibility being parsed before the wrapper tag is rendered.
GSAP should then, be able to pick it from there and make your life easy. ;)
As for your aside, I am not sure what you are asking or what you have done. The safe bet here is to have the CDN link pointing to TweenMax as it will cover the majority of the tweenies needs cases. The kilobytes you save by trying to only load the lite versions is so minimal that is not worth the trouble (plus, puling one TweenMax bundle is better than  three or four separate lite bundles from the CDN).
Share on other sites
m4rsibar    3 Likes (Newbie)
Posted January 2, 2019
With a little more research I've found out why the Lite versions weren't working, i think i'd need the CSS plugin as well, the Max version includes it.  (the post i read this on was a little dated)
Initially making the wrapper hidden, then visible is working better than what I had, but I must ask, why would you consider this an "extreme" solution?  What would a less extreme solution be?
I also realized in my JS I was setting the wrapper to display: "initial", but in the CSS .wrapper's display:none was commented out.. oops.. ?
Share on other sites
Dipscom    3,362 Likes (Superhero)
Posted January 2, 2019
It is extreme in the sense that you will be styling the tag in the most specific manner possible.
Depending on the size of your project and the number of people involved in it, you don't want that sort of specificy as it makes overriding the style very cumbersome.
A less extreme version of this is to have a   tag inside your HTML with the desired visibility rule  targeting the necessary wrapper tag.
Another step up from the extreme is the external   to a stylesheet but making sure it gets parsed before the HTML.
By the way, well done on your discovery. I find it super satisfying when I am stuck on a problem and eventually I figure out the solution.
Share on other sites
Create an account or sign in to comment
You need to be a member in order to leave a comment
Sign up for a new account in our community. It's easy!
Register a new account
Already have an account? Sign in here.
Sign in to follow this   Followers 2
Go to topic listing
Recently Browsing   0 members
No registered users viewing this page.
How do I prevent the body content from flashing before splash page loads?
“Aside from GreenSock’s laser-focused attention to detail, GSAP is fast, reliable, flexible, exceptional value (read: free in most cases) and, very importantly, supported.”
“I absolutely love working with GSAP. It’s been one of the most enjoyable things I’ve ever studied and the team do a fantastic job of making it first of all but also in the fantastic forums. I’ve managed to learn so much from that so I’ll always be gratefu”
“I've never worked with a product that has such fantastic and enthusiastic support. GreenSock is incredible in its own right, but the team behind it is really what makes it shine.”
“Spent today converting an animation to pure CSS, and then into GSAP. GreenSock was an order of magnitude easier. Love it.”
“GreenSock has encouraged me to play with the code, to dream up new and exciting things to do.”
“GSAP has been absolutely the best experience for me as a newbie. The people in this community take serious time to help you with upcoming issues on real life projects like I've never experienced before.”
“Massive shoutout to GreenSock for having an amazing product with fantastic documentation, hugely talented support staff and an active and helpful community. If you do anything with web animation you should *definitely* be using them.”
“I think I love GreenSock as much as bacon.”
“GSAP is just miles and miles ahead of any animation library out there. Great work!”
Sign Up For Our Newsletter
Get the latest updates on GreenSock products, exclusive offers, and more right in your inbox.
Your information will always be kept confidential.
Thanks for signing up!
Now you'll begin receiving the latest GreenSock updates, exclusive offers, and more right in your inbox. Welcome aboard.