Whop Creator Milestone: Framer Landing Page Development

Web Designer

Frontend Engineer

Framer Developer

Figma

Framer

Whop

🥱 TLDR;

❇️ Project Overview

✦ About the client: Whop

✨ The Spark

✦ What were the client's needs and goals?

🚀 The Process

🤔 Challenges Faced

📸 Project Mockups

📊 The Stats

✦ Timeline: ~ 2-3 weeks

✦ Budget: $2,000

✦ Deliverables: Finished Framer project file and a published link.

Impressed? Want me to create a Framer website for you? Check my Framer service details here and book instantly ⚡

🥱 TLDR;

I built Whop's Creator Milestone Program website in Framer.

⤷ Live Preview: https://whopcreatormilestone.framer.website

❇️ Project Overview

✦ About the client: Whop

Whop helps creators generate almost half a billion dollars in revenue per year. Thousands of creators use Whop as their go-to place to distribute their offerings to millions worldwide.

Whop enables you to sell access to your apps and services in one place. It also provides the tools you need to distribute your content seamlessly, from web apps to courses to private communities.

✨ The Spark

✦ What were the client's needs and goals?

Es Youn, Creative Lead at Whop, was looking for a Framer expert to build several landing pages from Figma to Framer. They also needed help ensuring all the designs were fully responsive and should look beautiful.

They wanted to start with a new landing page for creator milestone prizes. This page was called "Whop Creator Milestone Program," and it is supposed to be fun and visually exciting, showcasing all the prizes creators on Whop can get.

Whop's Creator Milestone Program's hero section.

🚀 The Process

I completed the project in the following steps:

✧ Analysing the design: I started by examining the provided Figma file for the branding, the components included, the webpage layout, etc. This gives me an overall idea of what to expect while developing the site.

Some of the components and assets of the webpage.

✧ Importing the assets: after I have a sense of the design, I import all the necessary assets, such as icons, graphics, etc., and create the necessary text and color styles. These help maintain the project for the long run. If the client needs to change the font or color of the heading text, they will just need to update the values here (see the image below), and it will automatically update the font across the site.

Text and color styles included in the Framer project.

✧ Developing website sections: now, it's time to create all the sections of the base desktop breakpoint. I ensure that these sections have the necessary accessibility tags added (where required) and that the section layers are named semantically so that any future developer quickly knows the functionality of each layer/element.

Expanded layers of the website section.

✧ Making it responsive: after the base desktop breakpoint development, I started making the page responsive for phone devices. This included some layout changes in a section or two, but in the end, I tested across devices from large desktops to small phones so that each section was bug-free.

✧ Testing for performance and accessibility: since this webpage had a good amount of assets like video, icons, effects, etc, I wanted to ensure that all of these load fast and don't offer any lag on the end user.

✧ Final review and client handoff: before handing the project to the client, I asked for a final review of the webpage, which included minor tweaks here and there and at the end it was ready for handoff!

🤔 Challenges Faced

Whenever something cannot be done with Framer's built-in no-code features, I take it as a challenge to find a solution. For example, in the milestones section, if you hover around the card, you will see the background and the foreground move at different speeds, creating a nice parallax effect.

The parallax effect in action.

Since this effect cannot be natively done in Framer, I used my frontend/code knowledge to build a code override. It uses handy React hooks like useState, useEffect and useRef along with Framer Motion's (now Motion), useMotionValue, useSpring and useInView hooks to achieve the final result.

import { useState, useEffect, ComponentType, useRef } from "react"
import { motion, useMotionValue, useSpring, useInView } from "framer-motion"

const withIntensity = (Component, maxDistancePercentage): ComponentType => {
    const SPRING_CONFIG = { damping: 100, stiffness: 400 }

    return (props) => {
        const x = useMotionValue(0)
        const y = useMotionValue(0)
        const ref = useRef(null)
        const springX = useSpring(x, SPRING_CONFIG)
        const springY = useSpring(y, SPRING_CONFIG)
        const isInView = useInView(ref)

        useEffect(() => {
            if (!isInView) {
                x.set(0)
                y.set(0)
            }
        }, [isInView])

        useEffect(() => {
            const calculateDistance = (e) => {
                if (ref.current && isInView) {
                    const rect = ref.current.getBoundingClientRect()
                    const centerX = rect.left + rect.width / 2
                    const centerY = rect.top + rect.height / 2
                    const distanceX = e.clientX - centerX
                    const distanceY = e.clientY - centerY

                    x.set(distanceX * (maxDistancePercentage / 100))
                    y.set(distanceY * (maxDistancePercentage / 100))
                }
            }   

            document.addEventListener("mousemove", calculateDistance)

            return () => {
                document.removeEventListener("mousemove", calculateDistance)
            }
        }, [ref, isInView])

        return (
            <Component
                {...props}
                ref={ref}
                style={{
                    x: springX,
                    y: springY,
                }}
            />
        )
    }
}

export const withIntensity10 = (Component): ComponentType =>
    withIntensity(Component, 10)

export const withIntensity5 = (Component): ComponentType =>
    withIntensity(Component, 5)

export const withIntensity1 = (Component): ComponentType =>
    withIntensity(Component, 1)