Framer Controller ✨

Steve Ruiz

Framer Controller ✨

@steveruizok

This package includes the framer-controller library and several example and helper components. See the framer-controller docs to read more about framer-controller and each of the controllers included in the library.

Note: You do not need to use this package to use framer-controller. If you’d like to install the library directly, you can do so by opening a terminal at your project’s project folder and entering npm install framer-controller.

ScrollController Helpers

The ScrollMarker and ScrollMarkerDesign components are helpers to use with the ScrollController controller.

Note: While these will get you started, you do not need to use these components specifically – any component with a markerId prop will be recognized by the ScrollController as a marker, so long as the component is a child of a controlled Scroll component’s content Frame.

ScrollMarker

To use ScrollMarker, follow the instructions on the component. Create a Scroll and connect it to a Frame to use as its content. Place an instance of the ScrollMarker component onto the content Frame. Create a new Overrides file and paste the following overrides:

import { Override } from "framer"
import { ScrollController } from "framer-controller"

const controller = new ScrollController({
    throttle: 16,
})

export const Scroll: Override = props => {
    controller.connect(props)
    return controller.state
}

export const Marker: Override = props => {
    const marker = controller.getMarker(props)
    if (!marker) return
    return marker
}

Appy the Scroll override to the Scroll component and the Marker override to the ScrollMarker component on the scroll’s content. Preview the Scroll and you should see information about the marker, as provided to it by the ScrollController through the Marker override.

ScrollMarkerDesign

ScrollMarkerDesign is an example of a design component that will also be picked up as a marker by ScrollController.

For ScrollMarkerDesign, try using the following Override, either in a new file with a different controlled Scroll component, or in the same file as the Overrides above.

import { Override } from "framer"
import { ScrollController } from "framer-controller"

const controller = new ScrollController({
    throttle: 16,
})

export const Scroll: Override = props => {
    controller.connect(props)
    return controller.state
}

export const DesignMarker: Override = props => {
    const marker = controller.getMarker(props)
    if (!marker) return
    return {
        progress_value: marker.progress.y.toFixed(2),
    }
}

LottieScrubber

This package also includes LottieScrubber, a component that uses the lottie-web library to display a Lottie animation. Its progress prop is a normalized value that sets the animation’s frame: the component will show the animation’s first frame at a progress value of 0 and its last frame at a progress value of 1.

To use this component with the ScrollController, try using the following Override, either in a new file with a different controlled Scroll component, or in the same file as the Overrides above.

import { Override } from "framer"
import { ScrollController } from "framer-controller"

const controller = new ScrollController({
    throttle: 16,
})

export const Scroll: Override = props => {
    controller.connect(props)
    return controller.state
}

export const Scrubber: Override = () => ({
    progress: controller.progress.y,
})

Changelog

1.5.0

  • Adds framer-controller. Adds createPageControls and createScrollControls. See docs for more info.

1.4.0

  • Updates framer-controller.

1.3.0

  • Adds notes to example files.

1.2.0

  • Adds LottieScrubber
  • Adds several ScrollController-related example components

1.0.0

  • whaddup world
  • Adds ScrollMarker and ScrollMarkerDesign
By using our website, you agree to the use of cookies as described in our  Privacy Policy —
I Agree