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.
Created by
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.
Property controls of the Scroll Path Reveal component.
Property controls of the Scroll Path Reveal component.
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.
