Read on Twitter
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
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
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
- 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
- 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
- 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
- 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
- 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
- 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.
You can count on me to share insightful design tutorials every week.
• • •
Missing some Tweet in this thread? You can try to
force a refresh
