Design
Aug 29, 2025
Applying Scribble Effect to the Website
Add a doodle effect to your website to create a creative and playful vibe. With Framer, you can implement dynamic animations and subtle movements without coding, offering a unique experience by seamlessly integrating with text.
Uploaded by
Translated by
Contents
Table of Contents
This document has been translated from the official Framer blog and supplemented with practical information to help Korean users who struggle with the lack of Korean resources. We hope it offers support to those using Framer.
Expressing Creativity and Personality with Scribble Effects
Adding scribble elements to your website can convey a creative and playful atmosphere. This project can be remixed to copy and paste elements, allowing customization. One advantage is the ability to create detailed and dynamic scribble effects without any coding.
Drawing Animations
The animation that looks like scribbling can be achieved using the Animator component created by @benjaminnathan. By connecting Scribble to Animator, you can easily complete the scribbling effect.
This project is set up so that animations start when a particular section comes into view. For this, we created a component with two Variants: one where the Animator is hidden (Default) and another where the Animator is shown and the animation plays (Animate). The Scroll Variant Effect is used to automatically trigger the transition when visible.
Setting Subtle Movements
To add subtle movement to the scribbles, create two variant components of the same scribble to add variation.
Make the shapes of the two variant components slightly different, and connect Appear Interaction to run the ping-pong animation. Setting the Delay to 0.2 seconds results in a smooth, natural movement. This adds liveliness and rhythm to the page without being overwhelming.
Placement of Scribbles
Organize text content into a Stack but place scribbles using Absolute Position to slightly disrupt the layout. By selecting Absolute in the Position Type in the Properties panel, you can freely position them. This way, the scribbles appear to move dynamically among the orderly text.
Explore More Scribbles
This project includes additional scribbles, to which you can apply the scribble animation method described earlier. Feel free to place them in various positions and make adjustments as needed.
This article is an adapted translation of Framer's official blog content: ‘Incorporating dynamic scribbles into your website’.
