3.1 Slider Animation

Watch the video course

Overview

What you'll learn:

  • What TypeScript is
  • Creating sliders using frames
  • center attribute

Final Result

final slider result

See for yourself! Final toggle.

Intro to Slider

Welcome to the Slider module! We’ll build this slider component, and will use it to control this picture.

Along the way, we’ll learn more about JavaScript, React and the Framer library.

You’ll see that this drag gesture can be applied to several other scenarios. For example, you can build this iOS task-switcher prototype with the same concepts that we use to build the slider.

iPhone slider

As I mentioned, I want to teach you the principles. Once you master the basic building blocks and tools, you’d be able to apply them to brand-new interaction ideas.

When you watch these videos and work on assignments, always ask yourself a question, can I use this to build something new?

Getting Started

Alright, let’s get started on the slider by creating a new sandbox.

This time, we’ll choose a different template than React. Let's select React+TS.

TS means TypeScript, which is JavaScript plus some extra stuff. At this point, don’t worry about the extra stuff. We’ll just write the same JavaScript and JSX code as before.

Since Framer X uses TypeScript, what we are doing here is closer to what we’d use in Framer.

The file we are working on is now called index .tsx instead of index .js. So we know this is a TypeScript file.

Let's add the Framer dependency again and remove the semi-colons setting in your codesandbox preferences.

Replace the h1 and h2 with a frame within a frame.

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

Adjusting the attributes

<Frame width={280} height={15} borderRadius={30}>
  <Frame size={60} borderRadius={30} />
</Frame>

Adding a new attribute center

<Frame width={280} height={15} borderRadius={30} center>

  <Frame size={60} borderRadius={30}/>
</Frame>

The center attribute is shorthand for

<Frame width={280} height={15} borderRadius={30} center={true}>

  <Frame size={60} borderRadius={30}/>
</Frame>

If attributes of these type have no value, that means it is true. Hovering over such attributes can give us more insight into examples and description.

center hover description

The most important part is this line on the top. It’s a complete and concise definition of the center attribute.

The question mark in center? means that the attribute is optional. We can choose to use the center attribute or not. The editor won’t complain. However, if we don’t have this question mark here, and we forget to set the attribute, we’ll get an error in the editor.

The vertical bar in boolean | "x" | "y" means "or". So the value of center attribute can be either a boolean, which means true or false, or string "x", or string "y".

You can find this kind of notation in Framer’s documentation as well.

We want to center our slider, but if we just use center, our knob on our slider will be in the middle and not "draggable". Therefore, we want to use center="y".

<Frame width={280} height={15} borderRadius={30} center>
  <Frame size={60} borderRadius={30} center="y" />
</Frame>

Giving us

rough slider outline

Conclusion

Our slider is now vertically centered! In the next post, we'll learn how to style this slider!