Component
Ticker Path Component for Framer
This is a Framer component that you can use to move a set of elements along a custom path. It has options for adding scroll speed change, hover and drag interactions and more. The component was created based on the work by Daniel Petho. Feel free to copy and paste the component into your project and start playing around with it.
Created by
About the resource
The component works in a simple and straightforward way. Just place it on your canvas and start connecting frames to it. These frames that you connect will loop along the path we define in the properties panel.
Make sure that the elements you're connecting aren't inside your breakpoints but are outside of breakpoint frames, lying on the canvas.
About the resource
The component works in a simple and straightforward way. Just place it on your canvas and start connecting frames to it. These frames that you connect will loop along the path we define in the properties panel.
Make sure that the elements you're connecting aren't inside your breakpoints but are outside of breakpoint frames, lying on the canvas.
About the resource
The component works in a simple and straightforward way. Just place it on your canvas and start connecting frames to it. These frames that you connect will loop along the path we define in the properties panel.
Make sure that the elements you're connecting aren't inside your breakpoints but are outside of breakpoint frames, lying on the canvas.
Connecting a frame to the Ticker Path Framer component.
Connecting a frame to the Ticker Path Framer component.
Connecting a frame to the Ticker Path Framer component.
You can connect as many frames as you want.
Once these are connected, you can either choose from 5 predefined path presets or upload your own SVG code with a path element.
You can connect as many frames as you want.
Once these are connected, you can either choose from 5 predefined path presets or upload your own SVG code with a path element.
You can connect as many frames as you want.
Once these are connected, you can either choose from 5 predefined path presets or upload your own SVG code with a path element.
The 5 path presets you can choose from.
The 5 path presets you can choose from.
The 5 path presets you can choose from.
Want to create your own custom path? Well, it's super easy:
Press "G" on your keyboard to draw a graphic layer
Then press "P" for the pen tool and draw within the graphic layer
Select the graphic layer, right-click it, copy → copy as SVG
Paste the SVG code in the component's "SVG" field
Want to create your own custom path? Well, it's super easy:
Press "G" on your keyboard to draw a graphic layer
Then press "P" for the pen tool and draw within the graphic layer
Select the graphic layer, right-click it, copy → copy as SVG
Paste the SVG code in the component's "SVG" field
Want to create your own custom path? Well, it's super easy:
Press "G" on your keyboard to draw a graphic layer
Then press "P" for the pen tool and draw within the graphic layer
Select the graphic layer, right-click it, copy → copy as SVG
Paste the SVG code in the component's "SVG" field
Creating and copying the SVG code of your own custom path right inside of Framer.
Creating and copying the SVG code of your own custom path right inside of Framer.
Creating and copying the SVG code of your own custom path right inside of Framer.
For some extra interactivity, you can play with the "Scale" property. You'll find a "Hover" option there that you can use to scale the elements up or down when hovering over them.
For some extra interactivity, you can play with the "Scale" property. You'll find a "Hover" option there that you can use to scale the elements up or down when hovering over them.
For some extra interactivity, you can play with the "Scale" property. You'll find a "Hover" option there that you can use to scale the elements up or down when hovering over them.
The properties of the Ticker Path component.
The properties of the Ticker Path component.
The properties of the Ticker Path component.
You can also check out the "Speed" property where you can similarly slow down or speed up the elements on hover, and there's an extra property called "On scroll" that can be switched to "Speed up" which will essentially make elements move along the path faster when you scroll on the page.
Quick hack: you can set the "fade" property to yes, which will make elements appear with a fade-in effect when they enter or leave your path. This is especially useful for paths that aren't connected, and where you'd otherwise have elements abruptly appearing and disappearing.
Feel free to add masks to the component like I did on the demo page to make it work better with content above it, and feel free to experiment with creative ways of using this component.
You can also check out the "Speed" property where you can similarly slow down or speed up the elements on hover, and there's an extra property called "On scroll" that can be switched to "Speed up" which will essentially make elements move along the path faster when you scroll on the page.
Quick hack: you can set the "fade" property to yes, which will make elements appear with a fade-in effect when they enter or leave your path. This is especially useful for paths that aren't connected, and where you'd otherwise have elements abruptly appearing and disappearing.
Feel free to add masks to the component like I did on the demo page to make it work better with content above it, and feel free to experiment with creative ways of using this component.
You can also check out the "Speed" property where you can similarly slow down or speed up the elements on hover, and there's an extra property called "On scroll" that can be switched to "Speed up" which will essentially make elements move along the path faster when you scroll on the page.
Quick hack: you can set the "fade" property to yes, which will make elements appear with a fade-in effect when they enter or leave your path. This is especially useful for paths that aren't connected, and where you'd otherwise have elements abruptly appearing and disappearing.
Feel free to add masks to the component like I did on the demo page to make it work better with content above it, and feel free to experiment with creative ways of using this component.
