Jump to content
Search Community

GSAP preloading + CSS animation (PNG Sequence)

MJ. Saei test
Moderator Tag

Go to solution Solved by Rodrigo,

Recommended Posts

Good day every one

Kindly please assist me in below issue:

 my html code is here:

  <div class='loader-wrap'>
   <svg viewBox='0 0 1000 1000' preserveAspectRatio='none'>
<path id='curtain-svg' d='M0,1005S175,995,500,995s500,5,500,5V0H0Z'  fill='#E6E4E4'></path>
    <div id='preloader'></div></div>


I have a preloading animation which loaded  from css:

#preloader {
    width: 10rem;height: 10rem;
    background: url(/preloader2.png) no-repeat 0 0;background-size: 10rem;
    animation: sprite 2s steps(59) forwards;
    position: absolute;top: 50%;left: 50%;
    transform: translate(-50%, -50%);}
@keyframes sprite {
    from {background-position: 0 0}
    to {background-position: 0 100%}}

when web page open ->

1 -> this above animation must loaded  first (css animation) in the middle of the page(only showing once with 2 second duration)

2 -> then minimized and go to top-left side of page (using GSAP)

    opacity : 1
}, {
    top :60,left:60,opacity : 1,scaleX:xscale,scaleY:xscale,easing: 'power4.inOut',

3 -> then SVG curtain animation loaded from bottom to top (using GSAP)

tl.to(svg,0.5 ,{
    attr: { d: curve },ease: "power4.in",
  .to(svg,0.5, {
    duration: 0.5,attr: { d: flat },ease: "power4.out",

SVG css:

.loader-wrap svg {
    position: absolute;top: 0;width: 100vw;height: 110vh;overflow: hidden;fill:#E6E4E4;}

4 -> and finally small logo image in the top left and preloader-wrapper (curtain + preloader container) disappear:

    opacity:0,ease: "none",},3.8)
tl.to(".loader-wrap", {
  y: -1500,});
tl.to(".loader-wrap", {
    zIndex: -1,display: "none",

codepen of this project is here:


my problem is that when user first time visiting website, it takes time to load js/css of page also loading PNG animation (size: 210 KB) and not showing the preloading animation well (or showing half end of animation) for them (but for their experience of visiting in future visiting (data loaded from browser cache), it is ok and showing very well


what should I do to to start this preloader after dom content loaded?


if i use this and load gsap animations after contet loaded:

document.addEventListener('DOMContentLoaded', (e) => {

it is ok for Gsap timeline, but except for first CSS animation!

because css animation is in the other timeline and will execute whenever Div#preloaded loaded, and already loaded not showing or showing the end of animation only in Gsap timeline


is there a way to trigger css animation (load animation once only ) on specific time in GSAP I can use it?


kindly please help


See the Pen RwEZdbw by MJ-Saei (@MJ-Saei) on CodePen

Link to comment
Share on other sites

  • Solution

Hi @MJ. Saei and welcome to the GreenSock forums!


Is great to hear that you were able to solve it! 🥳


I'm not an expert on CSS Transitions (as you might've guess we favor GSAP around here ;)), but it seems that they start running as soon as the element is added to the DOM, so that control you gain with the DOM Content Loaded method gives you to add that particular style.


Another options could be to use the load event:



Or use David Desandro's Images Loaded library:



Hopefully this helps.

Happy Tweening!

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