2.1 Toggle Animation

Watch the video course

Overview

What you'll learn:

  • Starting to create a toggle button
  • Dependencies, libraries, and lego!
  • Framer
  • Importing dependencies
  • {/* comments */}
  • Creating a Frame in JSX

Toggle

In this course module, we’re gonna make a toggle like this.

toggle button

Along the way, we’ll pick up fundamental JavaScript concepts such as functions, variables, objects, arrays, and also what React components are.

Like learning anything, getting started is possibly the most difficult step. Since you are already reading this post, Kudos! You are almost there!

Without further ado, let’s get started!

Create a new sandbox and pick React. If you aren't sure how to do this check out this post 1.3 Tour of CodeSandbox

HTML inside JSX

As you’ve seen, we can use this code called JSX that looks like HTML to put things in the browser. It is similar to HTML but far more powerful.

We can use standard HTML tags here such as <div>, <h1>, <h2>, <input>, <button> and so on.

Code is to Libraries as lego piecies are to new lego boxes

We can visualize these tags as Lego pieces that we can use to put together apps in the browser.

There are also many other Lego pieces from different Lego boxes that allow us to do all kinds of cool things.

The technical term for these Lego boxes is "library".

Framer

The Framer team built a library conveniently named framer for us to make it easy to prototype animations and micro-interactions.

framer website

API stands for Application Programming Interface.

We are gonna spend a lot of time in to study how to use the framer library to build stunning prototypes.

Next, we’ll use framer to build the toggle. The very first step is to get that box of Legos.

Adding a dependency in CodeSandbox.io

The technical term of adding a library is called "Adding a dependency" since we depend on the library for this function to work. In CodeSandbox, we can add a dependency by going to the left interface, pressing "Dependencies" and then "Add Dependency".

add dependency

A list of libraries will pop up, and you can simply type in "framer". Click the first suggestion.

add framer

Verify that framer is in the list of dependencies on the left.

Open your index.js file and we can now import the framer library. Together with the other import statements at the top, add a new line with this statement import {Frame} from 'framer', in context...

import "./styles.css"

It might be confusing that this format is different from the lines above, but I’ll explain that later! For now, let’s just remember it.

The line we added means that we’re taking out a Lego piece called "Frame" from the framer library.

We can use it this way, replacing the contents of the <div>...</div> with <Frame>.

;<div className="App">
  <Frame />
</div>

{
  /* This is a comment that doesn't effect the code, spans
multiple lines, and helps the reader understand the code. 
There are also other ways to write comments in certain situations */
}

{
  /* instead of <Frame/> you can write <Frame></Frame> */
}

<Frame> and HTML

<Frame> can be used just like the standard HTML tags such as <div> and <h1>, but it’s a custom tag defined in the framer library. That’s another cool thing about JSX. I’ll show you how to define your own custom tags a bit later. But for the toggle, we are gonna just use the Frame tag.

Now if we look at the preview on the right, Frame creates this blue square in the browser.

blue square in browser

Conclusion

You now know how to add and import a dependency and write your first custom <Frame> tag. In the next post, we'll begin to create our toggle!