28

Parallax component for Framer X

almost 5 years ago from , 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:

  1. Just drop a few "ParallaxFrame" and connect them with respective layers.
  2. Drop a "Parallax" and connect with the entire scroll content.
  3. 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!

11 comments

  • Roel van HintumRoel van Hintum, almost 5 years ago

    Are components built first in code and imported into framer, or can you build them in framer and export the code? I couldn’t find the answer on the site. I’m hoping to let the designers do the styling so i can go straight to the engineering part of things.

    1 point
    • Linton Ye, almost 5 years ago

      You can build "design components" in framer or "code components" in an editor. Framer could directly use your code written earlier too.

      0 points
  • Tim Kjær LangeTim Kjær Lange, almost 5 years ago

    So cool, Framer X looks the bomb. I don't see any other design tool that is so well-thought out when it comes to fitting into a software design pipeline. This has been the holy grail of design tooling for so long: how do we bridge the gap between design and engineering? Will there ever be a monolith design tool for mocks, prototyping, handover? My money is on Framer X.

    1 point
  • Nirvana Lama, almost 5 years ago

    Looks great. Can't wait to get my hands on it :)

    1 point
  • Travis Arnold, almost 5 years ago

    Thank you for sharing! I'm really excited to see UI kit libraries, especially to use among teams. Curious if the code is exportable at all? It seems like it's setup to go from design directly to dev or even prod?

    Also curious if existing React UI kit libraries like MaterialUI work with it?

    1 point
  • Account deleted almost 5 years ago

    Man Framer X looks awesome. Can't wait to try it

    1 point
  • Jurre Houtkamp, almost 5 years ago

    Really cool Linton, thanks for sharing! Can't wait to see what else you'll build.

    1 point
  • Andu PotoracAndu Potorac, almost 5 years ago

    In Sketch there's Launchpad that allows you to publish a page instantly and any widgets within will be interactive on the published html page.

    Wondering if this will be possible with Framer, considering they now open-up the store to components and these can be interactive. What's missing is the ability to publish these designs to pages that would use those interactive elements in them.

    0 points