Jump to content
Search Community

MJ. Saei

Members

  • Posts

    2

  • Joined

  • Last visited

MJ. Saei's Achievements

  • Week One Done
  • First Post Rare
  • Conversation Starter Rare

Recent Badges

1

Reputation

  1. MJ. Saei
    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"; }); https://codepen.io/MJ-Saei/pen/abPyeoz
  2. MJ. Saei started following GSAP preloading + CSS animation (PNG Sequence)
  3. MJ. Saei
    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: https://codepen.io/MJ-Saei/pen/RwEZdbw 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
×
×
  • Create New...