Thread by @jshguo

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

#3 Create Hover States

- Place the text in the lower left corner
- Set the image transparency to 0.7

#4 Change Transition

- Type: Spring
- Stiffness: 200
- Damping: 40

#5 Adjust the Layout of the Collection List (CMS)

- Direction: Horizontal
- Padding: 0
- Gap: 40
- Height: 600
- Width: Fit

#6 Adjust the Layout of the page to get the CMS in the center of the page

- Add a parent frame to the CMS, 600px by 600px, No layout, Overflow: Visible
- Add another parent frame, Width: 100%, Height: 100vh, Layout: Stack, Horizontal, Center, Overflow: Visible

#7 Create a Scroll Section

- Add a frame as the scroll section. Name it "Trigger."
- Width: 100%
- Height: 600
- Pin Bottom 400
- Z Index: -1
- Pointer: None

#8 Add Scroll Variant effect to Component

- Trigger: Section in view
- Viewpoint: Center
- Replay: Yes
- Section: #trigger
- To: Variant 2

#9 Add Scroll Transform to CMS

- It's still Sction in view, same as the previous step
- Transform settings, opacity, and scale are both 1
- Only the move of the X-axis is required, -1400px

#10 Set the CMS page to the Home page, then delete the old home

All done! I hope you enjoy the tutorial thread!

The preview & remix link is here:
interactive-taxonomy-244697.framer.app

Unleash your creativity!
Post your work with #FramerRemixWednesdays

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

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