Как мне запустить вторую анимацию на основе позиции прокрутки в FramerX? - PullRequest
Новая
       19

Как мне запустить вторую анимацию на основе позиции прокрутки в FramerX?

0 голосов
/ 08 апреля 2020

Я создаю интерактивный прототип во FramerX, который будет иметь липкую панель навигации, которая появится только после того, как указанная кнопка c больше не будет отображаться на странице. Конкретно, мои предполагаемые взаимодействия:

Во-первых, это перемещение подвижной навигационной панели вверх и на экран, когда пользователь прокручивает до определенной позиции. Я смог заставить это работать. (код ниже) 

import { Override, Data, motionValue, useTransform } from "framer"

// Keep track of the state of our application
const data = Data({ isPastLimit: false })

// Create a MotionValue to track contentOffsetY
const contentOffsetY = motionValue(0)

// Listen for changes to contentOffsetY
contentOffsetY.onChange(offset => (data.isPastLimit = offset < -150))

// Apply this override to your scroll component
export function TrackScroll(): Override {
    return { contentOffsetY: contentOffsetY }
}

// Apply this override to a frame containing your Sticky Nav
export function ShowCTAIfPastLimit(): Override {
    return {
        animate: data.isPastLimit ? { y: -133 } : { y: 0 },
    }
}

Во-вторых, при перемещении прокручиваемой навигационной панели вниз и вниз по экрану пользователь прокручивает страницу вниз. Благодаря тому, как я применяю этот код к своему, я могу поддерживать это взаимодействие в одних и тех же функциях TrackScroll() и ShowCTAIfPastLimit().

Вот где я застрял. Пожалуйста помоги!

...