Post

How to get URL link on X (Twitter) App

On the Twitter thread, click on or icon on the bottom
Click again on or Share Via icon
Click on Copy Link to Tweet
Paste it above and click "Unroll Thread"!
More info at Twitter Help

Joshua Guo

@jshguo

Mar 15, 2023 • 6 tweets • 2 min read • Read on X

Scrolly

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 @jshguo

Joshua Guo

@jshguo

Mar 31, 2023

@framer

Multiple Color Stops Gradient in @framer

I'll show you how to use code override to implement a gradient with multiple color stops for the background & border.

Preview & Remix:
marketing-foresee-353404.framer.app

You can also get the code here:

Static Version:
gist.github.com/JoshGuoSpace/c…

Interactive Version:
gist.github.com/JoshGuoSpace/2…

Read 7 tweets

Joshua Guo

@jshguo

Mar 29, 2023

@framer

Get ready for @framer Remix Wednesdays!

I've got a fun, interactive way to showcase images you won't want to miss.

Curious about how it's done? Let's dive in and check it out.
Don't forget the remix link below!

#FramerRemixWednesdays

To highlight Remix Wednesdays, I'll post places that need attention in this thread. More details you can explore in the remix.

Preview & Remix:
clicks-cough-113004.framer.app

Create Base Component

- Create the basic component, a slim rectangle
- In the Hover state, the image is enlarged appropriately
- A variant of the transition state containing the title
- A variant of the expanded state containing the title and content

Read 9 tweets

Joshua Guo

@jshguo

Mar 22, 2023

@framer

It's Wednesday! Let's Remix!

I made a Horizontal Scroll CMS Section in @framer.

How it's done? Let's find out 👇

#FramerRemixWednesdays

#1 Create a CMS

- Click Add Sample in the CMS panel
- Then you can change it to whatever you want

#2 Create a Component from the Collection List

- Create a Component from the Collection List
- Turn off the Layout, hide the text, Overflow: Hidden, Radius: 16px
- Create two variants, the image larger than the component, Variant 1: aligned left, Variant 2: aligned right

Read 13 tweets

Joshua Guo

@jshguo

Mar 20, 2023

I thoroughly enjoyed living in Tokyo for two years.
Although China and Japan share some cultural similarities as East Asian countries, there are distinct differences in design.

I discovered that Japanese design focuses on meticulous details, alluring textures, and pure simplicity.

Designers skillfully utilize materials' innate qualities and optimize materials' characteristics to achieve an effortless yet profound design.

Read 6 tweets

Joshua Guo

@jshguo

Mar 17, 2023

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

@jshguo

Feb 20, 2023

@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.

🧵 👇