Instructions - Oceanfye - Webflow HTML website template

Instruction 1

Amenities Section – Image Hover Interaction (GSAP)

1. Add Required Classes

Add amenities-line to each trigger item
Add amenities-image to each corresponding image

2. Keep the Same Order

Item and image order must match exactly
(1st item → 1st image, 2nd item → 2nd image)

3. Image Wrapper Setup

Wrap all images inside one div
Set wrapper to: position: relative
Images will stack automatically via code

Duplicate to Add More Items (Auto Connect)

You can easily add more amenities without touching the code:

Duplicate an existing .amenities-line
Duplicate its corresponding .amenities-image
Update content (text + image)

✅ That’s it — animation will automatically connect with the new item

Control Animation Smoothness

You can tweak animation feel directly in the code:

duration: 0.45 → Faster fade out
duration: 0.6 → Slower, smoother fade in
ease: "power2.inOut" → Balanced smoothness
ease: "power2.out" → Softer entrance feel

👉 Increase duration = smoother & slower
👉 Decrease duration = faster & snappier

<script>
document.addEventListener("DOMContentLoaded", function () {

    const lines = document.querySelectorAll('.amenities-line');
    const images = document.querySelectorAll('.amenities-image');

    if (lines.length === 0 || images.length === 0) return;

    // Initial Setup - Stack all images
    images.forEach((img, i) => {
        gsap.set(img, {
            position: "absolute",
            top: 0,
            left: 0,
            width: "100%",
            height: "100%",
            objectFit: "cover",
            zIndex: 1,
            opacity: 0
        });
    });

    // Show first image initially
    gsap.set(images[0], { 
        opacity: 1,
        zIndex: 10 
    });

    lines.forEach((line, index) => {
        const targetImage = images[index];
        if (!targetImage) return;

        // Hover In
        line.addEventListener('mouseenter', () => {
            gsap.to(images, {
                opacity: 0,
                duration: 0.45,
                ease: "power2.inOut",
                zIndex: 1
            });

            gsap.to(targetImage, {
                opacity: 1,
                duration: 0.6,
                ease: "power2.out",
                zIndex: 20
            });
        });

        // Hover Out
        line.addEventListener('mouseleave', () => {
            gsap.to(images, {
                opacity: 0,
                duration: 0.45,
                ease: "power2.inOut",
                zIndex: 1
            });

            gsap.to(images[0], {
                opacity: 1,
                duration: 0.6,
                ease: "power2.out",
                zIndex: 20
            });
        });
    });
});
</script>

Instruction 2

Smooth Scroll Setup (Lenis)

1. Add Required Files

Place these before the closing </body> tag:

Add Lenis JS
Add Lenis CSS

2. How It Works

Lenis replaces default browser scrolling with smooth, fluid motion
It creates a more premium, modern scrolling experience
Works seamlessly with GSAP and other scroll-based animations

Control Scroll Smoothness

You can easily adjust the scroll feel inside the code:

duration: 1.2 → Smooth and slightly slow scroll
Increase → more smooth & cinematic
Decrease → faster & more responsive
easing: controls how the motion feels
- Current easing gives a natural smooth finish
- You can customize it for different motion styles


<script>
// Initialize Lenis smooth scroll
const lenis = new Lenis({
    duration: 1.2,
    easing: (t) => Math.min(1, 1.001 - Math.pow(2, -10 * t)),
    smooth: true
});

// Connect Lenis with GSAP (optional but recommended)
lenis.on('scroll', ScrollTrigger.update);

gsap.ticker.add((time) => {
    lenis.raf(time * 1000);
});

gsap.ticker.lagSmoothing(0);

</script>