Instructions

This page serves as a technical reference for managing the custom motion effects integrated into this project. All animations are powered by GSAP to ensure high-performance, butter-smooth interactions that align with the site's premium aesthetic.

How to Edit GSAP Animations

Element Map

The following table maps site elements to their respective scroll-based behaviors:

Selector

.section-desc-box

Animation Description

Dynamic Visibility: Moves vertically out of the viewport (-100%) on scroll-down and slides back in on scroll-up.

Selector

.section-heading-box

Animation Description

Pixel Load Animation: Apply this element to any component you want to animate. Simply copy the block provided inside this section and place it as a child element of your target container. Once added, the loading animation will automatically play with a smooth pixel-based transition effect.

sample text

Contact Page Live Clock Code

Place this code inside the Contact page custom code section, then assign the .city-time class to the text element where you want the live clock to appear. The script below will automatically display and update the current time in real time.

JavaScript

<script>
  const timeEl = document.querySelector(".city-time");  function renderTime() {
    const now = new Date();    const parts = new Intl.DateTimeFormat("en-GB", {
      timeZone: "Europe/Rome",
      hour: "2-digit",
      minute: "2-digit",
      hour12: false
    }).format(now).split(":");    timeEl.innerHTML = `${parts[0]}<span>:</span>${parts[1]}`;    gsap.to(".city-time span", {
      opacity: 0.2,
      duration: 0.8,
      repeat: -1,
      yoyo: true,
      ease: "power1.inOut"
    });
  }  renderTime();  setInterval(() => {
    renderTime();
  }, 1000);
</script>

To match the clock with your own location: Simply replace Europe/Rome with your preferred continent and city format, such as Europe/London.

Customizing home hero animation

Hero Load Animation: The rotating infinite motion and the depth-based movement from far to near used in the homepage hero section are powered by custom GSAP code. The animation logic and settings are included below, allowing you to fully customize the timing, rotation speed, movement intensity, and overall visual behavior to match your preferred style.

JavaScript

<script>
gsap.to(".home-hero-wrapper", {
  rotateY: "360deg",
  duration: 50,
  ease: "linear",
  repeat: -1
});
</script>
<script>
gsap.registerPlugin(ScrollTrigger);gsap.fromTo(
  ".home-hero-wrapper",
  {
    z: "-1200rem"
  },
  {
    z: "120rem",
    duration: 3.5,
    ease: "cubic.inOut",
    scrollTrigger: {
      trigger: ".home-section",
      start: "top 80%",
      toggleActions: "play none none none"
    }
  }
);
</script>

To slow reveal: Increase duration from 3.5 to 2.5 seconds.
To change motion style: Swap "cubic.inOut" with "expo.out" for a sharper, more modern snap.

Navbar Scroll Counter Code

The following custom code is applied through the Site Settings → Custom Code section and runs on the .nav-number class to create the animated scroll percentage counter effect from 0 to 100 inside the navbar.

JavaScript

<script>
gsap.registerPlugin(ScrollTrigger);const counter = { value: 0 };gsap.to(counter, {
  value: 100,
  ease: "none",
  scrollTrigger: {
    trigger: "body",
    start: "top top",
    end: "bottom bottom",
    scrub: true
  },
  onUpdate: () => {
    document.querySelector(".nav-number").textContent =
      Math.round(counter.value);
  }
});
</script>

Removing GSAP Animations

If you need to disable the scroll-hide functionality without breaking the site layout, follow these steps:

Locate the Script: Open the custom code settings: site setting/custom code.
Comment or Delete: Remove the specific block containing showAnim and the ScrollTrigger.create function.
/* Delete or comment out the header logic block to stop the auto-hide behavior.*/
Verify CSS: Ensure the .header class in your stylesheet still has position: fixed or position: sticky to maintain its placement.
Save & Republish: Always republish the site to push the code changes to the live server.

Note: Once the script is removed, the header will remain visible at the top of the screen at all times. Transition effects will revert to standard CSS behavior if any are defined.