The daily framer drop

COMPONENT

Splash screen that only runs on load

Need some extra time to load all the content on your website? Use a splash screen to fill up the loading time. Just create your own custom loading component and add the following code as Code override

import { Override, useAnimation } from "framer"
import { useEffect, useState } from "react"

function debounce(func, wait) {
    let timeout
    return function executedFunction(...args) {
        const later = () => {
            clearTimeout(timeout)
            func(...args)
        }
        clearTimeout(timeout)
        timeout = setTimeout(later, wait)
    }
}

export function hideOnScroll(): Override {
    const [isScrollingUp, setIsScrollingUp] = useState(false)
    const [lastScrollPosition, setLastScrollPosition] = useState(0)
    const controls = useAnimation()

    useEffect(() => {
        const handleScroll = () => {
            const currentScrollPosition = window.scrollY

            if (currentScrollPosition === 0) {
                setIsScrollingUp(false)
            } else if (currentScrollPosition < lastScrollPosition) {
                setIsScrollingUp(true)
            } else {
                setIsScrollingUp(false)
            }

            setLastScrollPosition(currentScrollPosition)
        }

        const debouncedHandleScroll = debounce(handleScroll, 0)

        window.addEventListener("scroll", debouncedHandleScroll)

        return () => {
            window.removeEventListener("scroll", debouncedHandleScroll)
        }
    }, [lastScrollPosition])

    useEffect(() => {
        controls.start({
            y: isScrollingUp ? -120 : 0,
            transition: {
                type: "spring",
                stiffness: 500,
                damping: 30,
            },
        })
    }, [controls, isScrollingUp])

    return {
        animate: controls,
    }
}

#1 - Create a loading component

Not sure how to make the replicate this in Framer? Just follow my lead: Create a nice pre-loader screen in Framer. I've just added a black background and a nice loading animation which contains out of a few variants where the dots are moving in and out of screen.

#2 - Hiding the component

A splash screen only works for a certain amount of time, so the screen should move out of view. This can be done by creating a second variant and setting everything to display none.

#3 - Setting up the transition

If you created both variants, all you need to do is set the interaction to appear and select the amount of seconds you'd like to take as loading time. I chose 4 seconds.

#4- Add pointer events

To make sure everything goes smoothly. Set pointer events to none by adding a style prop.

#5 - Add the code override

All we need to do now is add the code override. Just select the layer on your layers tab. At the right side create a new code override and paste the code above. After saving the new code override just select the override file in your component and set displayOnce as override. After that you should have a nice loading screen like this.

COMPONENT

Splash screen that only runs on load

Need some extra time to load all the content on your website? Use a splash screen to fill up the loading time. Just create your own custom loading component and add the following code as Code override

import { Override, useAnimation } from "framer"
import { useEffect, useState } from "react"

function debounce(func, wait) {
    let timeout
    return function executedFunction(...args) {
        const later = () => {
            clearTimeout(timeout)
            func(...args)
        }
        clearTimeout(timeout)
        timeout = setTimeout(later, wait)
    }
}

export function hideOnScroll(): Override {
    const [isScrollingUp, setIsScrollingUp] = useState(false)
    const [lastScrollPosition, setLastScrollPosition] = useState(0)
    const controls = useAnimation()

    useEffect(() => {
        const handleScroll = () => {
            const currentScrollPosition = window.scrollY

            if (currentScrollPosition === 0) {
                setIsScrollingUp(false)
            } else if (currentScrollPosition < lastScrollPosition) {
                setIsScrollingUp(true)
            } else {
                setIsScrollingUp(false)
            }

            setLastScrollPosition(currentScrollPosition)
        }

        const debouncedHandleScroll = debounce(handleScroll, 0)

        window.addEventListener("scroll", debouncedHandleScroll)

        return () => {
            window.removeEventListener("scroll", debouncedHandleScroll)
        }
    }, [lastScrollPosition])

    useEffect(() => {
        controls.start({
            y: isScrollingUp ? -120 : 0,
            transition: {
                type: "spring",
                stiffness: 500,
                damping: 30,
            },
        })
    }, [controls, isScrollingUp])

    return {
        animate: controls,
    }
}

#1 - Create a loading component

Not sure how to make the replicate this in Framer? Just follow my lead: Create a nice pre-loader screen in Framer. I've just added a black background and a nice loading animation which contains out of a few variants where the dots are moving in and out of screen.

#2 - Hiding the component

A splash screen only works for a certain amount of time, so the screen should move out of view. This can be done by creating a second variant and setting everything to display none.

#3 - Setting up the transition

If you created both variants, all you need to do is set the interaction to appear and select the amount of seconds you'd like to take as loading time. I chose 4 seconds.

#4- Add pointer events

To make sure everything goes smoothly. Set pointer events to none by adding a style prop.

#5 - Add the code override

All we need to do now is add the code override. Just select the layer on your layers tab. At the right side create a new code override and paste the code above. After saving the new code override just select the override file in your component and set displayOnce as override. After that you should have a nice loading screen like this.

COMPONENT

Splash screen that only runs on load

Need some extra time to load all the content on your website? Use a splash screen to fill up the loading time. Just create your own custom loading component and add the following code as Code override

import { Override, useAnimation } from "framer"
import { useEffect, useState } from "react"

function debounce(func, wait) {
    let timeout
    return function executedFunction(...args) {
        const later = () => {
            clearTimeout(timeout)
            func(...args)
        }
        clearTimeout(timeout)
        timeout = setTimeout(later, wait)
    }
}

export function hideOnScroll(): Override {
    const [isScrollingUp, setIsScrollingUp] = useState(false)
    const [lastScrollPosition, setLastScrollPosition] = useState(0)
    const controls = useAnimation()

    useEffect(() => {
        const handleScroll = () => {
            const currentScrollPosition = window.scrollY

            if (currentScrollPosition === 0) {
                setIsScrollingUp(false)
            } else if (currentScrollPosition < lastScrollPosition) {
                setIsScrollingUp(true)
            } else {
                setIsScrollingUp(false)
            }

            setLastScrollPosition(currentScrollPosition)
        }

        const debouncedHandleScroll = debounce(handleScroll, 0)

        window.addEventListener("scroll", debouncedHandleScroll)

        return () => {
            window.removeEventListener("scroll", debouncedHandleScroll)
        }
    }, [lastScrollPosition])

    useEffect(() => {
        controls.start({
            y: isScrollingUp ? -120 : 0,
            transition: {
                type: "spring",
                stiffness: 500,
                damping: 30,
            },
        })
    }, [controls, isScrollingUp])

    return {
        animate: controls,
    }
}

#1 - Create a loading component

Not sure how to make the replicate this in Framer? Just follow my lead: Create a nice pre-loader screen in Framer. I've just added a black background and a nice loading animation which contains out of a few variants where the dots are moving in and out of screen.

#2 - Hiding the component

A splash screen only works for a certain amount of time, so the screen should move out of view. This can be done by creating a second variant and setting everything to display none.

#3 - Setting up the transition

If you created both variants, all you need to do is set the interaction to appear and select the amount of seconds you'd like to take as loading time. I chose 4 seconds.

#4- Add pointer events

To make sure everything goes smoothly. Set pointer events to none by adding a style prop.

#5 - Add the code override

All we need to do now is add the code override. Just select the layer on your layers tab. At the right side create a new code override and paste the code above. After saving the new code override just select the override file in your component and set displayOnce as override. After that you should have a nice loading screen like this.

Back

Back

Back

Daily drop #17

Daily drop #17

Daily drop #17

by Joris Rood

by Joris Rood

by Joris Rood