GSAP preloading + CSS animation (PNG Sequence)

MJ. Saei · September 16, 2023

Good day every one

Kindly please assist me in below issue:

my html code is here:

  <body>
  <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>
</svg>
    <div id='preloader'></div></div>
  </body>

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)

tl.fromTo(preloader,0.5,{
    opacity : 1
}, {
    top :60,left:60,opacity : 1,scaleX:xscale,scaleY:xscale,easing: 'power4.inOut',
},3);

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

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

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:

tl.to(preloader,0.4,{
    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

MJ. Saei · September 16, 2023

I remove animation in css codes, and add it after DOM content loaded, i think this is fixed my issue:

document.addEventListener('DOMContentLoaded', (e) => {
preloader.style.animation="sprite 2s steps(59) forwards";
});

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

Rodrigo · September 16, 2023

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:

https://developer.mozilla.org/en-US/docs/Web/API/Window/load_event

Or use David Desandro's Images Loaded library:

https://imagesloaded.desandro.com/

Hopefully this helps.

Happy Tweening!

Notifications

Messages

GSAP preloading + CSS animation (PNG Sequence)

Recommended Posts

MJ. Saei

Link to comment

Share on other sites

MJ. Saei

Link to comment

Share on other sites

Rodrigo

Link to comment

Share on other sites

Create an account or sign in to comment

Create an account

Sign in

Recently Browsing 0 members