Web Components Library

Timeline

Goal

Attempt to build a page loader simliar to the following example, using GSAP for animations https://sabor-del-mar-hotel-template.webflow.io/rooms/the-view-suite

Issues:

If Javascript is disabled, the page is stuck on the loading overlay

##Some references: https://css-tricks.com/lets-make-a-fancy-but-uncomplicated-page-loader/

  • Handle: @testing-timeline
  • Preview:
  • Filesystem Path: components/10-other-examples/testing-playground/greensock/timeline.hbs 
<div class="h-screen pt-12 bg-black">

    <div class="mt-12 flex justify-left items-center gap-x-10">

        <img class="logo h-24 ml-12 opacity-10" src="/images/greensock-logo.svg" alt="GreenSock superhero logo">

        <!--    <div class="circle h-10 w-10 rounded-full bg-blue-500"></div>-->
        <!--    <div class="circle h-10 w-10 rounded-full bg-red-400"></div>-->
        <!--    <div class="circle h-10 w-10 rounded-full bg-red-500"></div>-->
        <!--    <div class="circle h-10 w-10 rounded-full bg-purple-500"></div>-->
        <!--    <div class="circle h-10 w-10 rounded-full bg-green-300"></div>-->

    </div>

</div>

<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.6.0/gsap.min.js"></script>

<!-- Any scripts using GSAP here -->
<script>
    gsap.to(".logo", {
        opacity: 1,
        duration: 2,
        scale: 5,
        x: 200,
        y: 200,
        ease: "back"
    })
    // let tl = gsap.timeline({
    //   repeat: 0,
    //   yoyo: true
    // })
    //
    // tl.to(".logo", {x: 400, y: 200, rotate: 720, scale: 20, duration: 5});
    // tl.to(".logo", {x:100, duration: 2});
    // tl.to(".logo", {y:150, duration: 0.2})
    // // Animate from
    // tl.from(".logo", {
    //   duration: 2.5,
    //   opacity: 0,
    //   scale: 0.3,
    //   ease: "ease"
    // });
    //
    // tl.from(".logo", {
    //   duration: 1,
    //   rotate: 360
    // });
    // tl.from(".circle", {
    //           duration: 1.5,
    //           opacity: 0,
    //           y: "random(-200, 200)",
    //           stagger: 0.25
    //         },
    //         "-=2"
    // );
</script>
 
<div class="h-screen pt-12 bg-black">

  <div class="mt-12 flex justify-left items-center gap-x-10">

    <img class="logo h-24 ml-12 opacity-10" src="/images/greensock-logo.svg" alt="GreenSock superhero logo">

    <!--    <div class="circle h-10 w-10 rounded-full bg-blue-500"></div>-->
    <!--    <div class="circle h-10 w-10 rounded-full bg-red-400"></div>-->
    <!--    <div class="circle h-10 w-10 rounded-full bg-red-500"></div>-->
    <!--    <div class="circle h-10 w-10 rounded-full bg-purple-500"></div>-->
    <!--    <div class="circle h-10 w-10 rounded-full bg-green-300"></div>-->

  </div>

</div>


<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.6.0/gsap.min.js"></script>

<!-- Any scripts using GSAP here -->
<script>

  gsap.to(".logo", {
    opacity: 1,
    duration: 2,
    scale: 5,
    x: 200,
    y: 200,
    ease: "back"
  })

  // let tl = gsap.timeline({
  //   repeat: 0,
  //   yoyo: true
  // })
  //
  // tl.to(".logo", {x: 400, y: 200, rotate: 720, scale: 20, duration: 5});
  // tl.to(".logo", {x:100, duration: 2});
  // tl.to(".logo", {y:150, duration: 0.2})

  // // Animate from
  // tl.from(".logo", {
  //   duration: 2.5,
  //   opacity: 0,
  //   scale: 0.3,
  //   ease: "ease"
  // });
  //
  // tl.from(".logo", {
  //   duration: 1,
  //   rotate: 360
  // });

  // tl.from(".circle", {
  //           duration: 1.5,
  //           opacity: 0,
  //           y: "random(-200, 200)",
  //           stagger: 0.25
  //         },
  //         "-=2"
  // );


</script>
 
/* No context defined. */