• 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
      • , 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
  • Jerry TJerry T, over 4 years ago

    Good job! I feel like every year, the overlap between design and code is getting bigger. #Singularity

    0 points
  • Michael CookMichael Cook, over 4 years ago

    Wow! Really like Beebee's bio

    0 points
  • , over 4 years ago

    Hey DN,

    I'd love some feedback on the design of this page. I'm a developer, not a designer. So although I'm pretty happy about the general look of this page, I'm wondering what you guys pros think? Color selection, fonts, layout, use of whitespace, or anything else. Any feedback is appreciated!

    Some background:

    • This page is primarily designed/implemented in Framer X in a workflow I briefed at this webinar.
    • It's based on GatsbyJS, styled-system and rebass
    • Designing with a design system feels really productive and effective, even for a simple landing page like this.
    0 points
    • Eric Chu, over 4 years ago

      Hi, nice work!

      My first question is: What is the purpose of this page? When a design is "good" it feels purposeful. Answer that question first and I think it will help you achieve what you want.

      The details in the toggle are a lot of fun. I'm going to concentrate my feedback on it because I think it can be great.

      Make the toggle the hero!

      You worked a lot on that animation! Looks fun! But, that toggle is TINY! Make it the hero of the page, so we can see all the work that went into it. Like, 2–3 times larger.

      Some of the detailed animations don't make "sense" because nature doesn't work that way!

      • A couple of the stars move left / right when toggled. Stars don't move like that! Consider fading them in instead. I noticed you are making the stars twinkle too; consider randomizing or staggering the twinkles.
      • Same with the cloud. It moves back & forth. Consider fading it in and instead have it move a very small distance in one direction.

      I don't think you need the rest of the page, really :)

      0 points
      • , over 4 years ago

        Thanks Eric! At least the cloud is moving slower now. I'll do some more improvements over the next few days. :)

        0 points