Resources

Animate Path on Scroll in Framer

View demo

Copy component

Remix project

Copy component

Remix project

Resources

Animate Path on Scroll in Framer

View demo

Copy component

Remix project

Nandi Muzsik

How can I improve Framer Uni?

Let me know if there’s a missing feature or something that could be improved.

Share feedback

How to Make $10K+ with Framer in 60 days

Get the course

How to Make $10K+ with Framer in 60 days

Get the course

Component

Animate Path on Scroll in Framer

This is a component that you can use in Framer to animate an SVG path in as you’re scrolling down on the website. It can be a cool addition to your websites with amazing scroll animations, mixed with SVG illustrations. Feel free to copy the component to your project and start playing around with it.

image of Nandi Muzsik
profile image of Emanuele

Created by

Nandi

and

Emanuele

Minimal black screen with Framer logo and scroll text

About the resource

The component works in a really simple way. You can either upload your SVG file or paste in the SVG code that you want to reveal on scroll.

You can easily change the color and width of the stroke, so the visuals are fully customizable.

About the resource

The component works in a really simple way. You can either upload your SVG file or paste in the SVG code that you want to reveal on scroll.

You can easily change the color and width of the stroke, so the visuals are fully customizable.

About the resource

The component works in a really simple way. You can either upload your SVG file or paste in the SVG code that you want to reveal on scroll.

You can easily change the color and width of the stroke, so the visuals are fully customizable.

Scroll path reveal UI settings panel with SVG options

Property controls of the Scroll Path Reveal component.

Scroll path reveal UI settings panel with SVG options

Property controls of the Scroll Path Reveal component.

Scroll path reveal UI settings panel with SVG options

Property controls of the Scroll Path Reveal component.

As you can see on the image above, there are several properties that define the animation. First of all, you can set the start and end values for both the progress and the opacity.

You can also set how long you have to scroll to complete the animation with the distance property, and set when does the animation starts playing (when the element reaches the bottom, center or top of the viewport) with the start property.

As you can see on the image above, there are several properties that define the animation. First of all, you can set the start and end values for both the progress and the opacity.

You can also set how long you have to scroll to complete the animation with the distance property, and set when does the animation starts playing (when the element reaches the bottom, center or top of the viewport) with the start property.

As you can see on the image above, there are several properties that define the animation. First of all, you can set the start and end values for both the progress and the opacity.

You can also set how long you have to scroll to complete the animation with the distance property, and set when does the animation starts playing (when the element reaches the bottom, center or top of the viewport) with the start property.

Learn how can one go from 0 to $11.5k with Framer in 60 days.

From no followers, no portfolio, no reputation, to making thousands with a profitable Framer business.

Get access now

Nandi portrait's background

Learn how can one go from 0 to $11.5k with Framer in 60 days.

From no followers, no portfolio, no reputation, to making thousands with a profitable Framer business.

Get access now

Nandi portrait's background

Learn how can one go from 0 to $11.5k with Framer in 60 days.

From no followers, no portfolio, no reputation, to making thousands with a profitable Framer business.

Get access now

Nandi portrait's background

More resources

More resources

View all

  • Music app playlist created screen with artist avatars

    Playlist Generation Circular Animation in Framer

    Component

    Music app playlist created screen with artist avatars

    Playlist Generation Circular Animation in Framer

    Component

  • Customer testimonials section with review letter card

    3D Letter Testimonials in Framer

    Component

    Customer testimonials section with review letter card

    3D Letter Testimonials in Framer

    Component