Copy component
Copy component
How can I improve Framer Uni?
Let me know if there’s a missing feature or something that could be improved.
Share feedback
How can I improve Framer Uni?
Let me know if there’s a missing feature or something that could be improved.
Share feedback
Component
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.
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.
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.
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.
Framer Navigator
Build your ideas with ease by learning the basics of website building with Framer.
Framer Navigator
Build your ideas with ease by learning the basics of website building with Framer.
Framer Navigator
Build your ideas with ease by learning the basics of website building with Framer.
