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 was created to help Korean users learn Framer, addressing the challenge of limited Korean resources by translating content from the official blog and adding useful, practical information. We hope it serves as a helpful guide to those using Framer.
Express Creativity and Personality with Doodle Effects
Adding doodle elements to your website can convey a creative and playful vibe. You can easily remix this project to copy-paste elements and customize them as you wish. The advantage is that you can create detailed and dynamic doodle effects without any coding.
Drawing Animations
The animation that makes it look like a doodle is being drawn can be implemented using the @benjaminnathan's Animator component. By connecting Scribble to the Animator, you can easily achieve a drawn doodle effect.
This project is set up so that animations start when a particular section enters the viewport. For this, two Variants were created for a component: one where the Animator is hidden (Default), and another where the Animator is displayed and the animation runs (Animate). This is designed to automatically switch when it becomes visible on the screen using the Scroll Variant Effect.
Setting Subtle Movements
To add subtle movements to a doodle, create two variant components for the same doodle, causing variations.
Change the shape of the two variant components slightly, connect the Appear Interaction, and run the back-and-forth animation. Setting the Delay to 0.2 seconds will create smooth and natural movements. This enhances the page's liveliness and rhythm without being too overbearing.
Arranging Doodles
The text content is organized in a Stack, while doodles are arranged using Absolute Position to create a slightly disrupted layout. You can freely position them by selecting Absolute in the Position Type of the Properties panel. This makes the doodles appear to move dynamically among the orderly text.
Discover More Doodles
This project includes several more doodles, which you can animate as explained previously. Feel free to place them in varied positions and make transformations for diverse usage.
This article is an adapted translation of Framer's official blog post ‘Incorporating dynamic scribbles into your website’.
