9 ms·

Framer Motion 3D

148 points by tilt 5y ago

spagoop 5y ago
Does anyone here actually use Framer on their team? I feel like every product designer I knew was excited and curious when it came out, filling a gap between engineer and designer, but then it just...fizzled. Figma continues to be the standard across my org overtaking Sketch a little over a year ago.
- maelito 5y ago
  Framer, no but framer-motion, yes !
- ryanSrich 5y ago
  > Figma continues to be the standard across my org overtaking Sketch a little over a year ago Same experience here. I prefer Sketch, but Figma has won out. My only guess for why Figma has won is because they handle prototyping a lot better than Sketch. The performance (and the fact that it's a browser) makes it barely usable for me, but I don't know any team that doesn't use Figma.
  - sbarre 5y ago
    Figma also wins on collaboration and extensibility. I work in a large org (50+ designers) and the ability to collaborate on work, and also engage our internal teams to build very specific plugins and extensions very quickly and easily made this an easy switch from Sketch a little over a year ago.
    - solidr53 5y ago
      Figma also wins on Auto-layout and variants. Especially helpful on UI library teams.
      - askafriend 5y ago
        Figma also just updated their mobile apps - looks like they're taking it much more seriously now. You can view any file on mobile, and I'm sure editing is coming down the line. If they can make really great mobile apps (including iPad), then it'll be a really hard sell on anything else - especially from a collaboration perspective.
  - yesimahuman 5y ago
    Being a web app that runs anywhere including Windows was a pretty significant difference back when it mattered and Sketch didn’t have web support. Turns out that was more important than being a purist native Mac app
  - johnnyaardvark 5y ago
    Being able to share a URL with Figma. Getting feedback from anyone in the org regardless of whether they have a program installed is a killer feature.
- mithr 5y ago
  I've used Framer Motion, but not Framer. The barrier to having a UX team switch to a new tool is significantly higher than an engineering team choosing an animation library.
- drewrbaker 5y ago
  At my agency the design team uses Adobe XD. As a web dev I’ve been handed off designs in XD, Figma and Sketch. XD is the best in my experience.
Pulcinella 5y ago
Very cool. I know I would love to see more 3D elements incorporated into UI. Nothing obnoxious (please no literal parallax scrolling) or impractical (e.g. the fsn 3D file system navigator). More like skeuomorphic UI but with real time lighting and shadows.
moritonal 5y ago
The demo breaks (distorts to the right) for me (Chrome latest) if you scroll-down with your mouse still over the 3D effect.
- SirHound 5y ago
  Fixed, thanks!
solidr53 5y ago
I feel react-spring is better suited for the job. Can’t explain why, tried them both with r3f, i think it’s just about API design and framer starts to fall through once you start connect ing multiple animated nodes with interaction. If Framer would rewrite one of their demos it would help - https://docs.pmnd.rs/react-three-fiber/getting-started/examples https://docs.pmnd.rs/react-three-fiber/getting-started/examp...
- SirHound 5y ago
  https://codesandbox.io/s/bouncy-watch-forked-jm0qn?file=/src/App.js https://codesandbox.io/s/bouncy-watch-forked-jm0qn?file=/src...
  - solidr53 5y ago
    Thanks for the demo, implementation looks good. But the interaction feeling is still more natural with react spring, hopefully just a personal preference!
- cambaceres 5y ago
  Makes sense, since it’s the same guy that wrote both libraries.
bogwog 5y ago
All I see is a blank white box on Firefox. Is this for Chrome only?
- michelb 5y ago
  Seems to be an issue with the Codesandbox embed and Firefox. It works fine if you view the example on Codesandbox.
  - beatthatflight 5y ago
    even the codesandbox failed for me :/ just fine in Chrome.
gitgud 5y ago
Whenever I see a codesandbox embedded viewer, I know it's going to take 20s+ to load... so I don't click it... Why not just render the 3D example and show sandboxes a bit lower?
zhichu 5y ago
so cool

148 points by tilt 5y ago

Does anyone here actually use Framer on their team? I feel like every product designer I knew was excited and curious when it came out, filling a gap between engineer and designer, but then it just...fizzled. Figma continues to be the standard across my org overtaking Sketch a little over a year ago.

maelito 5y ago
Framer, no but framer-motion, yes !
ryanSrich 5y ago
> Figma continues to be the standard across my org overtaking Sketch a little over a year ago Same experience here. I prefer Sketch, but Figma has won out. My only guess for why Figma has won is because they handle prototyping a lot better than Sketch. The performance (and the fact that it's a browser) makes it barely usable for me, but I don't know any team that doesn't use Figma.
- sbarre 5y ago
  Figma also wins on collaboration and extensibility. I work in a large org (50+ designers) and the ability to collaborate on work, and also engage our internal teams to build very specific plugins and extensions very quickly and easily made this an easy switch from Sketch a little over a year ago.
  - solidr53 5y ago
    Figma also wins on Auto-layout and variants. Especially helpful on UI library teams.
    - askafriend 5y ago
      Figma also just updated their mobile apps - looks like they're taking it much more seriously now. You can view any file on mobile, and I'm sure editing is coming down the line. If they can make really great mobile apps (including iPad), then it'll be a really hard sell on anything else - especially from a collaboration perspective.
- yesimahuman 5y ago
  Being a web app that runs anywhere including Windows was a pretty significant difference back when it mattered and Sketch didn’t have web support. Turns out that was more important than being a purist native Mac app
- johnnyaardvark 5y ago
  Being able to share a URL with Figma. Getting feedback from anyone in the org regardless of whether they have a program installed is a killer feature.
mithr 5y ago
I've used Framer Motion, but not Framer. The barrier to having a UX team switch to a new tool is significantly higher than an engineering team choosing an animation library.
drewrbaker 5y ago
At my agency the design team uses Adobe XD. As a web dev I’ve been handed off designs in XD, Figma and Sketch. XD is the best in my experience.

Pulcinella 5y ago

Very cool. I know I would love to see more 3D elements incorporated into UI. Nothing obnoxious (please no literal parallax scrolling) or impractical (e.g. the fsn 3D file system navigator). More like skeuomorphic UI but with real time lighting and shadows.

moritonal 5y ago

The demo breaks (distorts to the right) for me (Chrome latest) if you scroll-down with your mouse still over the 3D effect.

SirHound 5y ago
Fixed, thanks!

solidr53 5y ago

I feel react-spring is better suited for the job. Can’t explain why, tried them both with r3f, i think it’s just about API design and framer starts to fall through once you start connect ing multiple animated nodes with interaction. If Framer would rewrite one of their demos it would help - https://docs.pmnd.rs/react-three-fiber/getting-started/examples https://docs.pmnd.rs/react-three-fiber/getting-started/examp...

SirHound 5y ago
https://codesandbox.io/s/bouncy-watch-forked-jm0qn?file=/src/App.js https://codesandbox.io/s/bouncy-watch-forked-jm0qn?file=/src...
- solidr53 5y ago
  Thanks for the demo, implementation looks good. But the interaction feeling is still more natural with react spring, hopefully just a personal preference!
cambaceres 5y ago
Makes sense, since it’s the same guy that wrote both libraries.

bogwog 5y ago

All I see is a blank white box on Firefox. Is this for Chrome only?

michelb 5y ago
Seems to be an issue with the Codesandbox embed and Firefox. It works fine if you view the example on Codesandbox.
- beatthatflight 5y ago
  even the codesandbox failed for me :/ just fine in Chrome.

gitgud 5y ago

Whenever I see a codesandbox embedded viewer, I know it's going to take 20s+ to load... so I don't click it... Why not just render the 3D example and show sandboxes a bit lower?

zhichu 5y ago

so cool