Instructions

This template utilizes the GreenSock Animation Platform (GSAP) to deliver seamless, high-performance animations throughout various sections of the website. The GSAP scripts are crafted in pure JavaScript and structured for straightforward customization, enabling you to modify animation speed, direction, easing, triggers, and timing without disrupting the overall framework. All animations are centralized in the Site Settings under Custom Code, Footer Code tag. GSAP is activated via the GSAP integration toggle in Site Settings.

Element Map

Moddo's custom code combines Lenis, GSAP, ScrollTrigger, and Draggable to control scrolling, navigation transitions, SVG line drawing, and interactive physics. The sections below show which Webflow elements each system depends on.

  • Smooth scrolling
    Lenis 1.3.4 controls the smooth-scroll layer. It is updated by GSAP ticker rather than its own RAF loop, keeping scrolling and GSAP animations synchronized.
  • Navigation transition
    .footer-menu-link and .button-wrapper.back-to-home receive an 0.8s delayed navigation. Modifier-clicks, hash links, new-tab links, and JavaScript links are left untouched.
  • Services line
    .line-wrapper-1 path is drawn with ScrollTrigger using .main-section.service-section as the trigger.
  • Process line
    .line-wrapper-2 path is drawn from the scroll position of .process-grid.
  • Contact line
    .line-wrapper-3 path is linked to .main-section.section-hero-contact.
  • About line
    .line-wrapper-4 path is linked to .main-section.section-hero-about.
  • CTA line
    .cta-line-wrapper .cta-path or .cta-path controls the CTA line reveal. It uses a timed 1.2s animation with ScrollTrigger.
  • Hero physics
    .hero-service-area is the physics container and .sticker elements become draggable bodies. The loop applies gravity, collision resolution, container boundaries, and release velocity.
  • Footer physics
    .footer-wrapper activates the system, while .footer-media is the container and .frame elements become draggable bodies.
  • Local Time #local-time displays the current time and updates every second. The script uses the configured timezone and location label from MODDO_LOCAL_TIME in the Footer Code.

Customizing Key Variables

The code is preconfigured for Moddo. Change values only when you intentionally want to alter the interaction feel or scroll timing. Keep the selectors and initialization structure intact unless the related Webflow elements are changed with them.

Lenis — controls smooth-scroll behaviour.

  • lerp: 0.1 controls how quickly the scroll position catches up to the target. Lower values feel smoother and slower; higher values feel more responsive.
  • wheelMultiplier: 1.55 controls wheel and trackpad sensitivity.
  • infinite: false keeps the document within normal scroll boundaries.
  • autoRaf: false prevents Lenis from running a separate RAF loop because GSAP's ticker drives lenis.raf().

SVG line animations — control how each line responds to scrolling.

  • scrub: 1 keeps the line drawing tied to scroll progress with smoothing.
  • start / end define when the drawing begins and finishes relative to each trigger element.
  • ease: none keeps scroll-driven line drawing visually consistent with the user's scroll position.
  • duration: 1.2 and power2.inOut control the CTA line's timed reveal.
  • toggleActions on the CTA allows the animation to replay and reverse as the trigger enters or leaves the viewport.

Physics — controls the draggable sticker and footer-frame response.

  • GRAVITY = 2200 controls downward acceleration.
  • 0.6 horizontal/release multipliers affect horizontal movement and retained release velocity.
  • 0.4 vertical bounce damping controls how much vertical energy remains after collisions.
  • Collision handling, boundaries, body dimensions, and active-section checks are part of the physics loop and should not be removed independently from its initialization.

Required selectors — changing these class names without updating the script will disconnect the interaction.

  • .hero-service-area + .sticker
  • .footer-wrapper + .footer-media + .frame
  • .line-wrapper-1 through .line-wrapper-4 and the CTA line selectors
  • Local Time Configure MODDO_LOCAL_TIME in Footer Code. Set timezone to a valid IANA timezone such as America/New_York, and label to the location text shown beside the clock. The script updates the clock through the GSAP ticker, but the time display itself is not an animation.

Removing GSAP Animations

The custom code is modular, so individual effects can be removed without rebuilding the Webflow layout. Always keep the Designer structure and selectors needed by any effect you decide to retain.

Remove everything

  1. Open Project Settings → Custom Code.
  2. Remove the Lenis script and stylesheet plus the Lenis-to-GSAP ticker integration.
  3. Remove the delayed navigation script if page transitions should happen immediately.
  4. Remove the ScrollTrigger SVG line-drawing script if the section lines should remain static.
  5. Remove the GSAP Draggable physics script if the hero stickers and footer frames should no longer move.

Remove only one effect

  • Smooth scroll: remove the Lenis block and its GSAP ticker integration.
  • Navigation delay: remove the .footer-menu-link / .button-wrapper.back-to-home click handler.
  • SVG lines: remove the ScrollTrigger block containing path1–path4 and ctaPath.
  • Hero physics: remove the initPhysicsSection() call targeting .hero-service-area.
  • Footer physics: remove the initPhysicsSection() call targeting .footer-wrapper.
  • Local Time: the Local Time script to stop the clock from updating. This does not remove or change any of the other GSAP effects.

After making changes

  1. Save the Custom Code changes.
  2. Publish the site.
  3. Test smooth scrolling and page navigation.
  4. Check Services, Process, Contact, About, CTA, the hero sticker interaction, and footer media interaction.
  5. Test on desktop and mobile, and verify that removing one effect has not broken another retained effect.