Mostrar Seção Após Um Delay No Framer (VSL)

Se você está criando uma página de VSL no Framer, provavelmente já percebeu que um recurso muito comum nesse tipo de página é esconder a oferta, bônus ou botão de compra até que a pessoa assista uma parte do vídeo.

Isso ajuda a manter o foco no conteúdo e só apresentar a oferta no momento certo.

Enquanto o Framer não oferece essa função de forma nativa, você pode adicionar facilmente usando um code override que faz qualquer seção do site aparecer automaticamente após um tempo definido.

Crie um novo arquivo

No seu projeto no Framer, vá até a aba Assets → Code → New File para criar um novo arquivo de código.

Cole o código abaixo

Delete o conteúdo padrão e cole este código:

import { forwardRef, type ComponentType } from "react"
import { createStore } from "https://framer.com/m/framer/store.js@^1.0.0"

// Delay em segundos 
const DELAY = 60

const useStore = createStore({
    isVisible: false,
})

export function withShowAfterDelay(Component): ComponentType {
    return forwardRef((props, ref) => {
        const [store, setStore] = useStore()

        if (typeof window !== "undefined" && !store.isVisible) {
            setTimeout(() => {
                setStore({ isVisible: true })
            }, DELAY * 1000) // converte segundos para milissegundos
        }

        if (!store.isVisible) return null

        return <Component ref={ref} {...props} />
    })
}

import { forwardRef, type ComponentType } from "react"
import { createStore } from "https://framer.com/m/framer/store.js@^1.0.0"

// Delay em segundos 
const DELAY = 60

const useStore = createStore({
    isVisible: false,
})

export function withShowAfterDelay(Component): ComponentType {
    return forwardRef((props, ref) => {
        const [store, setStore] = useStore()

        if (typeof window !== "undefined" && !store.isVisible) {
            setTimeout(() => {
                setStore({ isVisible: true })
            }, DELAY * 1000) // converte segundos para milissegundos
        }

        if (!store.isVisible) return null

        return <Component ref={ref} {...props} />
    })
}

import { forwardRef, type ComponentType } from "react"
import { createStore } from "https://framer.com/m/framer/store.js@^1.0.0"

// Delay em segundos 
const DELAY = 60

const useStore = createStore({
    isVisible: false,
})

export function withShowAfterDelay(Component): ComponentType {
    return forwardRef((props, ref) => {
        const [store, setStore] = useStore()

        if (typeof window !== "undefined" && !store.isVisible) {
            setTimeout(() => {
                setStore({ isVisible: true })
            }, DELAY * 1000) // converte segundos para milissegundos
        }

        if (!store.isVisible) return null

        return <Component ref={ref} {...props} />
    })
}

import { forwardRef, type ComponentType } from "react"
import { createStore } from "https://framer.com/m/framer/store.js@^1.0.0"

// Delay em segundos 
const DELAY = 60

const useStore = createStore({
    isVisible: false,
})

export function withShowAfterDelay(Component): ComponentType {
    return forwardRef((props, ref) => {
        const [store, setStore] = useStore()

        if (typeof window !== "undefined" && !store.isVisible) {
            setTimeout(() => {
                setStore({ isVisible: true })
            }, DELAY * 1000) // converte segundos para milissegundos
        }

        if (!store.isVisible) return null

        return <Component ref={ref} {...props} />
    })
}

Personalize o delay

O próximo passo é definir por quanto tempo a seção ficará oculta. O valor do DELAY é configurado em segundos:

• 60 = 60 segundos

• 90 = 1 minuto e 30 segundos

Aplique o override

Siga os passos abaixo para aplicar o efeito em qualquer seção:

1. Selecione a seção/elemento que você quer ocultar inicialmente (geralmente a seção com o botão de compra, bônus ou oferta).

2. Vá na aba "Code Overrides" no painel direito.

3. Selecione o arquivo de código que você criou.

4. Aplique o override chamado withShowAfterDelay.

Pronto! Essa seção ficará completamente oculta e será exibida automaticamente após o tempo que você definiu.

Importante lembrar

Este override remove completamente a seção do layout até que o delay termine. Diferente de apenas esconder com opacity, ela não fica reservando espaço na página.

O tempo é contado sempre que a pessoa acessa ou atualiza a página (não tem relação com o tempo do vídeo).

Com esse code override simples, sua página no Framer mantém o foco no vídeo até liberar a oferta. Simples, direto e e fácil de aplicar no seu projeto!