Building an Immersive Tourism Experience with Next.js and Framer Motion

#webdev #design #react #web

Most tourism websites feel like digital filing cabinets: you click a button, read a fact, and move to the next page. But what if a website felt less like a directory and more like a story?

Recently, while designing a concept for Odisha Tourism at Code Media Labs, We wanted to move away from static layouts and toward scrollytelling. In this experience, the user travels through landscapes, culture, and history simply by scrolling.

Here is how to build this experience using Next.js and Framer Motion.

1. The Concept: Think in Chapters

Instead of listing attractions, break your site into narrative chapters. Think of each section as a scene in a movie. Each chapter should have a distinct mood that changes as the user moves through it, using background images and large typography to define the "vibe" of that location.

2. Use Scroll Progress as Your "Main Switch"

In Framer Motion, we use useScroll() to track exactly where the user is on the page. Imagine your entire webpage as a long slider from 0 (top) to 1 (bottom).

You can "map" this scroll position to any animation property using useTransform(). Here is a simple example:

// This tells the code: when scroll is 0 to 0.5, 
// the opacity goes from 0 (invisible) to 1 (visible).
const opacity = useTransform(scrollYProgress, [0, 0.5], [0, 1]);

return (
  <motion.div style={{ opacity }}>
    <h1>Welcome to the Wilderness</h1>
  </motion.div>
);

3. Cinematic Motion Effects

You don't need complex code to make a site feel professional. Focus on these three simple Framer Motion techniques:

A. Parallax (Creating Depth)
Move your background images slightly slower than the scroll speed to create a 3D effect.

// Moves the image up by 200px as the user scrolls
const y = useTransform(scrollYProgress, [0, 1], [0, -200]);

<motion.div style={{ y }}>
  <img src="/nature.jpg" />
</motion.div>

B. Scaling Headlines
Make text feel responsive by tying its size to the scroll.

// Headline grows from 90% size to 100% as you reach the section
const scale = useTransform(scrollYProgress, [0, 0.3], [0.9, 1]);

<motion.h1 style={{ scale }}>Into The Untamed</motion.h1>

4. Performance: Keep it Smooth

Because these sites are image-heavy, they can easily become laggy. Keep the experience snappy with these habits:

Animate "Transforms" only: Avoid changing width, height, or padding during scroll. Instead, use transform (for moving/scaling) and opacity. These are much faster because they don't force the browser to recalculate the page layout.

Lazy Loading: Don't load high-resolution images for the "Coastline" section if the user is still at the "Dawn" chapter. Use Next.js Image component with loading="lazy".

Share Values: If five elements need to fade in at once, create a single opacity variable and pass it to all of them, rather than calculating it five times.

5. Story Over Tech

The biggest lesson?

Motion doesn't create immersion—storytelling does.

Framer Motion and Next.js are just the tools. If the layout is cluttered, no amount of fancy animation will save it. Keep your text minimal, let your visuals carry the emotional weight, and ensure every animation serves the narrative, not just the "cool" factor.

The Takeaway

Websites don't have to behave like documents. They can behave like experiences. By combining simple, performant animations with a clear narrative, you can transform a standard travel site into a journey that inspires people.