Thread by @jshguo

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

The Size of the Image

- In the hover state, the image should be larger than in the primary
- In the hover state, variant 2, and variant 3, the size of the image is the same

The Position of the Content

- The initial position of the content overlaps with the title
- And the capacity is 0, not invisible
- This will implement a smooth slide-in effect

Combine Components & Set Up Interactions

- Combining the 6 base components
- Set up interactions in sequence
- The order of interaction: Tap → Appear (Delay 0.5s) → Expand → Tap → Appear (Delay 0.5s) → Back to Primary

Set Appear to Interactive Transition

- In particular, there are two transition states triggered by Appear, with a delay of 0.5s
- Appear is magic like sequential animation with infinite possibilities

Placement on the Page

- Well done! Now you've created the component
- If it does not work properly as expected. Mostly because of incorrect element positioning and a mismatch in the component's state
- If you can't solve it by yourself, please feel free to reach out to me

I'm Joshua, a @framer partner, and a mentor for aspiring designers at @10x_designers

You can count on me to share insightful design tutorials every week.