Tweet

Joshua Guo

Mar 15 • 6 tweets • 2 min read

My first contribution for #FramerRemixWednesdays is a simple toggle button with which we can all have fun.

I'll explain how it works & provide a remix link in this thread.

Let's remix to win a year of the Framer Starter plan!

1. Create a component - Variant 1: Sun

2. Create a component - Variant 2: Moon

3. Create interaction and put the component into the page

4. Use Blending "Exclusive" to create an automatic theme-switching header.

That's it! You should now have an excellent toggle button!

Preview & Remix link → adventurous-adapts-973134.framer.app

Have fun and be creative! I can't wait to see what you come up with. Happy remixing!

• • •

Missing some Tweet in this thread? You can try to force a refresh

This Thread may be Removed Anytime!

Twitter may remove this content at anytime! Save it as PDF for later use!

More from @JoshGuoSpace

Joshua Guo

@JoshGuoSpace

Mar 17

For any design project, one can confidently determine three crucial elements to consider: the design itself, the time required to complete the project, and the personality you intend the design to convey.

The design refers to the robust structure, content, visual elements, functionality, and other technical aspects of the project.

Precisely what will be included in the masterful design? What will the polished product accomplish and how will it dexterously work?

Answering these types of questions will help define the scope and details of the ingenious design.

Read 8 tweets

Joshua Guo

@JoshGuoSpace

Feb 20

@framer

Framer Motion 101 - Keyframes

I created two animations using @framer Motion Keyframes.

One animation was based on an earlier design prototype from my 30 days design challenge. The other animation was newly created.

I think these two very well as Keyframes cases.

🧵 👇

The Remix link is here 🚀
motion101.framer.website/page

Keyframes

Values in animate can be set as keyframes.
This will animate through each value in the sequence.

Read 9 tweets

Joshua Guo

@JoshGuoSpace

Feb 18

Framer Motion 101 - Basic Animations Tutorial

I will create tutorials on how to use Framer Motion, ranging from beginner to advanced.

In this first tutorial series, I will show you how to use Motion to create basic animations in Framer's editor.

🧵 👇

You can grab it from motion101.framer.website

I made it by Code Override, so you can easily paste it into your project and explore its implementation.

Although there is only one sample, I'll keep updating it. Follow me to get future updates.