Want to build websites in no-time? Announcing the new Framer Beta.Learn more
Framer
Want to build websites in no-time? Announcing the new Framer Beta.Learn more
Framer
  • Teams
  • Showcase
  • Developers
  • Resources
    • Tutorials
    • Examples
    • Components
    • Templates
    • Sessions
    • Support
    • Updates
  • Blog
  • Pricing
  • ···
    • Blog
    • Pricing

Smart Components

Social App
Music Player
To Do App

Magic Motion

Photo View
Tab Navigation
Card List
Mobile Carousel
Floating Action Button
Dynamic Grid
Expandable Menu
Image Gallery
Image Gallery 2
Magic Motion
Reels: Drag
Stories UI
Swipe & Expand
To-Do List
Toggle Menu

Overlays

Bottom Sheet
Draggable Sheet
Modal Window
Side Menu

Components

Input Form
Loading Indicator
Radio Buttons
Tooltip on Hover

Flows

Checkbox Form
Splash Screen
Timeout Transition

Interactions

Accordion Menu
Carousel Design
Drop on Scroll
Image Panning
Input Data
Input Validation
Like Animation
Press-And-Hold
Nested Scroll
Progress Bar Design
Show Password
Star Rating
Stories: Tap
Swipe Menu
Switch Sheet
Menu Tab
Toast Prompt
Wheel Picker

Effects

Cover Flow
3D Carousel
Flip Animation
Parallax Effect
Perspective Tilt
Pile Effect
Shuffle
SVG Animation

Integrations

Google Sheets
Map
Signature Pad
Sound Effects

Code

Card Swipe
Custom Effect
Drag Handle
Dynamic Header
Like Counter
Scroll Progress
Slider

To-Do List

Open in Framer to interactPreview this example

In this to-do list example, we use the Checkbox and Loading Indicator components to create layered animations.

Open in FramerPreview Example

In this Example, you’ll learn to use the Checkbox and Loading Indicator Default Components to create a task list.

Learn more about to-do list interactions

To-do lists have been a part of our daily lives for hundreds of years. In the beginning, they were of course jotted down on paper, but as people started to realize how effective they were at helping us get things done - the humble to-do list started receiving more attention. From paper to digital, many focused on how to create the ultimate task manager apps that were easy to use and encouraged productivity.

The nifty thing about to-do lists is that they’re easy to understand, and they can be used for all manner of purposes. Whether you’re in a business setting, or just need something done around the house, to-do lists come in handy in a variety of contexts.

Why a to-do list, and not a project management tool?

Depending on what you want it for, you might just want to commit to a full-fledged project management design as opposed to a simple to-do list. Larger companies and business-related solutions, for instance, might require the greater rigor and time management features featured in your average PM app.

But to-do lists are simple and straightforward; you don’t need all of those extra features if you just need to keep track of personal tasks, for instance. It’s this audience that you should probably keep in mind for much of your to-do list app design work.

Building a sample to-do list design

If you’re building a to-do list website (whether it’s a Javascript to-do list or a jQuery to-do list, or any other programming language), you need to remember the fundamentals:

  • The ability to easily create, edit, delete, and check off to-do list items
  • Scheduling deadlines for to-do items, and a way to indicate whether you’ve passed that deadline
  • The ability to keep your to-do lists online for easy access on any device

Regardless of how you build your to-do list, Javascript or otherwise, you’ve got to include these factors at the very least, as well as whatever additional components, features, and aesthetic set dressing your app or site will need

Common to-do list items

Most to-do list templates today consist of a few recognizable components. The task list itself is typically a list of created text items next to a checkbox that you toggle to the active state once you have completed a task. Everyone knows the feeling of crossing an item off your assigned tasks list, the best! Once your task is completed it will be removed from your main task list and you never have to think about it again.

How to create an interactive to-do list in Framer

In Framer you can use two of the Default Components to help you re-create this type of interaction. First create a screen that holds all of your tasks, you can use a textbox and insert a checkbox component next to each item. From the first screen, choose one list item that you will tap to check off and remove. In the second screen, show every list item including the selected item in its active state. Next, you will need the Loading Indicator Default Component. Place the loading component anywhere in the frame, it will be hidden in preview. Set the loading component to a timeout of 0.5, this will create the interaction of removing an item from your tasks list. Finally, in the last screen show every list item except the one you want to show the removing from list interaction.

Resources
  • Magic Motion Support
  • Magic Motion Tutorial
  • Talk about this on Discord

Framer

  • Teams
  • Pricing
  • Showcasenew
  • Blog
  • Developers
  • Updates

Platforms

  • Web
  • macOS
  • Windows
  • iOS
  • Android

Learn

  • Tutorials
  • Examples
  • Templates
  • Sessions

Resources

  • Components
  • Input Kit
  • State of Prototyping
  • Desktop Prototyping
  • Prototyping Tool
  • Mockup Tool
  • Wireframing Tool
  • UI/UX Design Tool
  • Graphic Design Tool
  • User Testing

About

  • Loupe
  • Community
  • Company
  • Careers
  • Legal

Support

  • Using Framer
  • Accounts
  • Contact

  • Twitter
  • Discord
  • Dribbble

Copyright © 2022 Framer B.V.

  • Security
  • Terms of Service
  • Privacy Statement