Component
Signature Animation in Framer
This is a signature animation in Framer, recreated from Florian’s work. You can easily copy and use the component in your own projects.
About the resource
To use the signature animation, I first created vector paths with strokes and applied stroke effects. Each word was then built into an icon set and turned into a component with three variants.
In the default variant, both words remain hidden. The second variant reveals the first word while the second stays hidden. The third variant makes both words visible, with the transition from the second to the third variant happening instantly after a short delay.
Finally, I placed the component into the project and added a scroll variant effect. This triggers the animation as the layer comes into view, smoothly revealing the signature step by step.
About the resource
To use the signature animation, I first created vector paths with strokes and applied stroke effects. Each word was then built into an icon set and turned into a component with three variants.
In the default variant, both words remain hidden. The second variant reveals the first word while the second stays hidden. The third variant makes both words visible, with the transition from the second to the third variant happening instantly after a short delay.
Finally, I placed the component into the project and added a scroll variant effect. This triggers the animation as the layer comes into view, smoothly revealing the signature step by step.
About the resource
To use the signature animation, I first created vector paths with strokes and applied stroke effects. Each word was then built into an icon set and turned into a component with three variants.
In the default variant, both words remain hidden. The second variant reveals the first word while the second stays hidden. The third variant makes both words visible, with the transition from the second to the third variant happening instantly after a short delay.
Finally, I placed the component into the project and added a scroll variant effect. This triggers the animation as the layer comes into view, smoothly revealing the signature step by step.
The three variants of the signature animation component.
The three variants of the signature animation component.
The three variants of the signature animation component.
