Creating Scroll-Based Animations Similar to Unfold24 in Framer: A Step-by-Step Guide

Modern Web Design increasingly emphasizes dynamic, engaging user experiences. One popular technique involves transforming sections of a webpage as the user scrolls—adding visual interest and guiding attention. If you’ve come across a compelling scroll animation on a website like Unfold24, and want to implement a similar effect in Framer, this article will guide you through the process.

Understanding the Effect

On the Unfold24 site, as users scroll through each section, the top corners of each segment gradually transition from sharp angles to smooth, rounded shapes—ultimately becoming more circular. This subtle yet eye-catching transformation enhances visual flow and contributes to a cohesive scrolling experience.

Achieving the Effect in Framer

While Framer offers powerful tools for prototyping and animations, replicating this specific scroll-dependent transformation typically involves custom code, particularly React hooks and styling overrides.

Below are the key steps to recreate this scroll animation:

1. Setting Up Your Framer Project

Before diving into code, ensure your Framer environment is ready:

• Create a new Framer project.
• Add your content sections as Frame components.
• Structure the layout so each section is distinct for individual animations.

2. Planning the Animation Logic

The core concept involves modifying a section’s shape (specifically, its top border radius) based on the scroll position. As the user scrolls:

• The top corners of a section start with sharp edges.
• They progressively become more rounded, approaching full circles.

To accomplish this, you’ll need to:

• Track the scroll position.
• Calculate a progress value for each section relative to the scroll.
• Apply dynamic styles based on this progress.

3. Implementing Scroll-Based Dynamic Styling

In Framer, this typically involves:

• Using React hooks (useMotionValue, useTransform) for real-time updates.
• Attaching scroll event listeners to monitor scroll position.
• Calculating interpolation values to determine border radius or shape.

Here’s an illustrative example:

“`jsx
import { useRef } from “react”;
import { useScroll, useTransform, motion } from “framer”;

function ScrollSection() {
const ref = useRef(null);
const { scrollY } = useScroll();

// Calculate progress within the section