↵

Please critique: Framer UI Motion - Toggle(learnreact.design)

over 4 years ago from Linton Ye, Founder at jimu Labs

  • Peedu TuiskPeedu Tuisk, over 4 years ago

    The animation seems to be a surprisingly resource heavy process – it's constantly changing the DOM element's transform property, multiple times a second. My laptop's fans went on higher intensity. Honestly it seems like a simple looping CSS animation would be a much more elegant solution for this type of implementation and using JS to edit the DOM element's style transform property to emulate the animation with Framer looks like a complete overkill for such a toggle.

    Otherwise, from decor point of view it all looks nice.

    2 points
    • Pedro Laguna, over 4 years ago

      It turned my fans on too, but I have an argument for keeping it that way at least for now, until we can gather some data on usage post release.

      A good point for using the actual framer prototype in the site is honesty, because it's that exact toggle you'll have at the end of the course.

      If you heard a bit about Framer, you probably know that your prototypes wouldn't be that much useful for production code anyway, but at the same time it also tells you that you could at least be able to use some of your simple-framer-toggle in html prototypes (I didn't know that and it peaked my interest for the course, since I make so many high fidelity prototypes with html).

      At the end of the day you'll need Framer to make the course which is really resource heavy anyway.

      I think the landing page is great. I played around with the toggle for a while and overall I'd love to know any future adjustments you might make to it and how well it performed. It's clear and to the point and I'm eager to know the pricing too.

      One feedback that I'd give is that I'd love to have a general idea of what the final file would look like in Framer and I think mentioning "Framer" more than once below the fold and showing some Framer imagery somewhere just in case someone scrolls too fast - like I did to try and see the pricing - would go long ways for people in a hurry.

      0 points
      • Linton Ye, over 4 years ago

        Thanks Pedro and Peedu!

        I'm curious what computer/browser are you using? I have multiple instances of the page open on my 2017 MBP. The CPU usage seems reasonable and the fan hasn't turned on yet. Also editing the style attribute is a standard approach used in popular production-quality animation libraries, such as react-spring, GSAP and Popmotion (the Framer library is actually based on Popmotion). CSS animation is great but it lacks the flexibility.

        That being said, keep in mind that this new Framer library is still in beta and I suspect there's still room for improvement.

        I directly used the code from Framer to show a point. This is going to be a popular workflow in the very near future -- a great one for sure. In fact, I believe that's why Framer is working on this new API which is powered by a production-quality animation library. Because the vision really is to transfer what you'd build in a design tool directly to production.

        2 points
        • Greg Warner, over 4 years ago

          If Framer gets to the point it can export even semi-near production quality React components as well as absorb them for iteration, it'll become my gold standard for sure. Great to see!

          0 points