How to edit Gradient Text?

‍

The colored headings are using a class called Text Gradient. Change the Light and Tertiary colors in Variable panel.

How to edit Marquee Images on Homepage?

‍

How to maintain varying size appearance?

On the homepage under work section resides a marquee with images. In order to achieve the varying size appearance, upload images with different sizes. In the CMS of the Work Collection, update the image field named as "Homepage Work Thumbnail". Current example has the following sizes on the following work items:

1. Red's Revenge - 230px (w) x 230px (h)
2. Vintage Nights - 220px (w) x 360px (h)
3. Instant Make Up - 230px (w) x 230px (h)
4. Cyber Punked - 220px (w) x 360px (h)
5. Shades of Blue - 310px (w) x 420px (h)
6. Sunset Lagoon - 270px (w) x 240px (h)

Alternatively, you could opt to have the images in uniformed sizing example 400px x 400px.

How to edit Menu Close Upon Link Click script?

‍

Menu - Global and on Tablet & Mobile only

This script does not use GSAP or any animations. It is pure JavaScript that handles menu behaviour. No timelines, tweens, or ScrollTriggers are involved. It closes the menu automatically once a link is clicked. This is done to make it an easy and smooth user experience in tablet and mobile

‍

🧭 Element Map

.menu-button: The hamburger icon, detected to check if mobile nav is active, and clicked programmatically to close the menu.

.w-nav-menu .nav-link-wrapper: Each nav link in the mobile menu — clicking any of these triggers the menu to close.

document.body: Has the class no-scroll toggled on/off to lock/unlock page scroll when the menu opens and closes.

‍

🖌️ Customizing Key Variables

1. Change which element acts as the close trigger (the hamburger)

var navIcon = document.querySelector(".menu-button");

Replace ".menu-button" with your actual hamburger button class if it differs.

‍

2. Change which links trigger the close

var menuLinks = document.querySelectorAll(".w-nav-menu .nav-link-wrapper");

Replace ".nav-link-wrapper" with your nav link class if you've renamed it.

‍

3. Change the scroll-lock class name

document.body.classList.toggle("no-scroll");
document.body.classList.remove("no-scroll");

Replace "no-scroll" with whatever class you use in your CSS to lock scroll (e.g. "overflow-hidden").

‍

4. Disable scroll locking entirely

document.body.classList.toggle("no-scroll");
document.body.classList.remove("no-scroll");

Remove these two lines if you don't need scroll lock.

‍

❌ Removing the script

This script lives in Site Settings → Custom Code → Footer Code, so it runs sitewide.

1. Go to Site Settings → Custom Code → Footer (Before </body> tag).
2. Find the <!-- Menu Close Upon Link Click --> block in the Body </body> tag‍ field.
3. Delete or comment out the entire script using the <!- - and - - > like shown below:

<!--
<script>
  Webflow.push(function() { ... });
</script>
-->

4. Save & Republish the page

‍

⚠️ Visual Side Effects

Behavioural side effect: Without this script, clicking a nav link on mobile will not automatically close the menu. Users will need to manually tap the hamburger to dismiss it. The no-scroll class will also no longer be toggled, so if your CSS uses it to lock body scroll, the page may scroll behind an open menu on mobile.

Reminder: Because this is in Site Settings footer code, removing it affects every page on the site, not just one page.

How to edit GSAP custom code animations?

‍

Marquee Images, Work Section - Homepage

This GSAP custom code can be located on the page settings of the Home Page. Simply open Pages, then click the Gear Icon of the page and scroll all the way down to Body </body> tag under Custom Code. This code is listed with <!-- Work Marquee GSAP -->

‍

🧭 Element Map

#marquee-track: Continuously scrolls horizontally (left) on a seamless loop. Slows down on hover.

#marquee-section: Used as the hover detection zone — no visual animation, just the trigger boundary.

‍

🖌️ Customizing Key Variables

All key variables are declared at the top of the script for easy editing:

‍

1. Loop Speed

var LOOP_DURATION = 60;

Seconds to complete one full loop. Lower = faster. Try 30 or 90.

‍

2. Hover slow-down amount

var SLOW_TIMESCALE = 0.1;

0.1 = 10% of normal speed on hover. Try 0 to pause fully, or 0.3 for less dramatic.

‍

3. Normal speed (after hover)

var NORMAL_TIMESCALE = 1;

1 = full speed. Increase above 1 (e.g. 1.5) to make it faster than default.

‍

4. How quickly it transitions between speeds

var SPEED_EASE_DURATION = 0.8;

Seconds to ease between normal and slow. Try 0.3 for snappy, 1.5 for gradual.

‍

5. Easing of the speed transition

ease: 'power2.inOut'

Controls the feel of slowing/speeding up. Try 'power1.out' or 'linear'.

‍

❌ Removing the script

This script lives on Home and can be located via Page Settings → Custom Code → Body Code, so it runs only on the specific page.

1. In Webflow, open Pages → Home → Click Gear Icon to open page settings → Scroll down to Custom Code.
2. Find the <!-- Work Marquee GSAP --> block in the Body </body> tag‍ field.
3. Delete or comment out the entire script using the <!- - and - - > like shown below:

<!--
<script>
  Webflow.push(function() { ... });
</script>
-->

4. Save & Republish the page

‍

⚠️ Visual Side Effects

Without the animation, #marquee-track will be stationary. If the track contains duplicated items (needed for the seamless loop), you'll likely see repeated content sitting static on the page. You may want to remove the duplicate set of marquee items in Webflow and set the section to overflow: hidden or display: none until you have a replacement.

Next Project Image Circle - Work Template Page

This GSAP custom code can be located on the page settings of the Work Template. Simply open Pages, then click the Gear Icon of the page and scroll all the way down to Body </body> tag under Custom Code. This code is being controlled via the section ID of div called "Next Hero Mask List".

‍

🧭 Element Map

#next-hero-mask: Clip-path shrinks from a wide circle (75%) to a tight circle (30%) as the user scrolls the element into view. Creates a "zoom to circle" reveal effect.

‍

🖌️ Customizing Key Variables

‍

1. Duration / Speed of scrub

scrub: 1;

Seconds of lag behind scroll. Higher = slower/smoother. Try 2 or 3.

‍

2. Starting circle size

clipPath: "circle(75% at 50% 50%)"

fromTo START — increase % for a wider opening shape

‍

3. Ending circle size

clipPath: "circle(30% at 50% 50%)"

fromTo END — decrease % for a tighter circle. To make the final circle smaller, change 30% to e.g. 15%. To keep it nearly full-width, try 60%.

‍

4. When the animation starts/ends (scroll position)

start: "top 80%",   
end: "center center",

To start the animation earlier, change "top 80%" to "top 100%". To give it more scroll distance, change end to "bottom center".

‍

5. Easing

ease: "none";

linear — matches scroll 1:1. Try "power2.out" for a more organic feel.

‍

❌ Removing the script

Follow these steps to safely remove the animation without breaking your layout:

1. In Webflow, open Pages → Works Template → Click Gear Icon to open page settings → Scroll down to Custom Code.
2. Find the <!-- Next Project GSAP --> block in the Body </body> tag‍ field.
3. Delete or comment out the entire script using the <!- - and - - > like shown below:

<!--
<script>
  Webflow.push(function() { ... });
</script>
-->

4. Save & Republish the page

‍

⚠️ Visual Side Effects

Without the animation, #next-hero-mask will display at its default CSS clip-path value. If no fallback is set in your stylesheet, the image will appear fully visible (no circle crop) on page load. Add a static clip-path: circle(30% at 50% 50%) rule to the element in Webflow's Style panel if you want to preserve the cropped look without animation.

Testimonial Section - Homepage

This GSAP custom code can be located on the page settings of the Home Page. Simply open Pages, then click the Gear Icon of the page and scroll all the way down to Body </body> tag under Custom Code. This code is listed with <!-- Testimonial GSAP -->

‍

🧭 Element Map

.reviewer-card: Each testimonial card. On desktop: starts offset (scattered left/right with rotation), then rises and fades out one by one as you scroll. On mobile: starts below and faded out, rises in and then exits upward one by one.

.section-testimonial: The scroll trigger and pin target — the section locks to the viewport while cards animate through.

‍

🖌️ Customizing Key Variables

‍

1. How far cards are scattered on desktop (initial position)

x: (i % 2 === 0 ? -1 : 1) * (60 + i * 30),
y: 120 + i * 40,
rotation: (Math.random() - 0.5) * 8,

Line 1 - Horizontal spread — increase 60 or 30 for wider scatter.
Line 2 - Vertical offset — increase for cards to start lower
Line 3 - Random tilt — increase 8 for more dramatic rotation

‍

2. How long the pinned scroll section lasts

// Desktop
end: "+=" + (cards.length * window.innerHeight),
// Mobile
end: "+=" + (cards.length * window.innerHeight * 1.2),

Multiply by a larger number (e.g. 1.5) to give each card more scroll breathing room.

‍

3. Card exit animation on desktop (flies up and blurs)

tl.to(card, { y: -240, opacity: 0, scale: 0.95, filter: "blur(6px)", duration: 0.5, ease: "power2.in" });

y: -240      → how far up it flies. More negative = further.
blur(6px)    → exit blur amount. Try blur(0px) to remove.
scale: 0.95  → slight shrink on exit. Try 1 to disable.
duration     → speed of exit. Try 0.3 for snappier.

‍

4. Card exit animation on mobile

tl.to(card, { y: -160, opacity: 0, scale: 1, filter: "blur(2px)", duration: 0.6, ease: "power2.in" }, i * 1 + 1.2);

y: -160  → exit distance. Try -100 for a subtler lift.
blur(2px) → lighter blur than desktop. Try blur(0px) to remove.

‍

5. Stagger timing between cards

// Desktop — third argument in tl.to():
i * 0.6  

// Mobile:
i * 1 

For Desktop Line - seconds between each card's animation start. Try i * 0.4 for faster, i * 0.8 for slower.
For Mobile Line - seconds between each card. Try i * 0.8 for faster overlap.

‍

6. Scrub smoothness

scrub: true,

true = locked to scroll 1:1. Try scrub: 1 or scrub: 2 for a lagging, smoother feel.

‍

7. Breakpoint between desktop and mobile behaviour

mm.add("(min-width: 992px)", ...  // desktop threshold
mm.add("(max-width: 991px)", ... // mobile threshold

Change 992/991 to match your Webflow breakpoint if needed (e.g. 768/767 for tablet cutoff).

‍

❌ Removing GSAP Animation

Follow these steps to safely remove the animation without breaking your layout:

1. In Webflow, open Pages → Home → Click Gear Icon to open page settings → Scroll down to Custom Code.
2. Find the <!-- Testimonial GSAP --> block in the Body </body> tag‍ field.
3. Delete or comment out the entire script using the <!- - and - - > like shown below:

<!--
<script>
  Webflow.push(function() { ... });
</script>
-->

4. Save & Republish the page

‍

⚠️ Visual Side Effects

• Desktop: Cards will remain in their scattered, offset starting positions (displaced left/right, rotated) since gsap.set() applies those styles on load and nothing will reset them. Add transform:none and opacity:1 to .reviewer-card in Webflow's Style panel as a fallback.
• Mobile: Cards will be invisible — gsap.set() initialises them at opacity:0. Same fix: set opacity:1 on .reviewer-card in the Style panel.
• Both: .section-testimonial will no longer pin, so all cards will stack and scroll normally in document flow.