Parallax component for Framer X
almost 5 years ago from Linton Ye, Founder at jimu Labs
I was lucky to get into the first wave of Framer X beta. Just spent a few hours hacking around yesterday and made this parallax component.
It's fairly straightforward to use this component:
- Just drop a few "ParallaxFrame" and connect them with respective layers.
- Drop a "Parallax" and connect with the entire scroll content.
- Tweak the "speed" parameter and profit!
Question: Have you prototyped parallax scrolling in other design tools? How does the experience compare to this one?
The design store in Framer X is a big deal. Soon you'll see all kinds of components that help you prototype at lightning speed: icons sets, crazy transitions, interactions, retrieving real data etc. You'll be able to use these components just as the built-in ones such as Text, Rectangle, Scroll, Stack etc -- just drop a component onto the canvas and adjust the knobs.
If you want to step up your game, you can build your own components. If you know React and web development, you can do it -- just like what I did when there's even not much docs available yet. Framer X offers a really convenient dev environment where everything is immediately updated once you save the file, including the canvas, the preview, and the property panel.
Alright, just wanted share my first impressions. Let me know if you want to know anything else! (Oh btw, the built-in Stack tool is really neat)
Update: Just confirmed that styled-components works! Yay!
Login to Comment
You'll need to log in before you can leave a comment.Login
New accounts can leave comments immediately, and gain full permissions after one week.Register now