5 ms·

Webflow – Interactions 2.0

kin 9y ago
This is very impressive. I don't have to labor anymore over tediously designed landing pages with slick animations. This looks like it's as easy to use for designers as After Effects.
simonswords82 9y ago
I feel like they should allow me to try their designer without having to sign up. I'd recommend they split test that against their current onboarding flow.
- brryant 9y ago
  Check out https://www.flexboxgame.com/ https://www.flexboxgame.com/ to experience the Webflow UI while playing a Flexbox game. Gives you a sense of the controls that Webflow exposes without signing up.
  - ellissd 9y ago
    Hmm, I can't seem to get past Level 1 in the flexbox game. I'm probably doing something wrong, but the circle I'm supposed to drag to the outline doesn't want to move.
    - tekromancr 9y ago
      You aren't supposed to click and drag it. You use the css flexbox attributes (see right-hand sidebar) to move it over the goal.
trizinix 9y ago
I signed up to try Webflow. Unfortunately Firefox is not supported. I guess the "Only works in Chrome" really is the new "Works best in IE6".
- iamdustan 9y ago
  Hey @trizinix, I fully understand and agree with your sentiment. History sure has a way of repeating itself. As one of the devs on the team who is primarily a Firefox user I feel this everyday. The primary reason we don’t support Firefox is due to our usage of custom scrollbars: https://bugzilla.mozilla.org/show_bug.cgi?id=77790#c188 https://bugzilla.mozilla.org/show_bug.cgi?id=77790#c188 You can vote for this issue on our Wishlist to help get Firefox support prioritized on our roadmap: https://wishlist.webflow.com/ideas/WEBFLOW-I-17 https://wishlist.webflow.com/ideas/WEBFLOW-I-17 (Fwiw the published sites from Webflow do fully support Firefox, just the Designer itself does not.)
  - gfodor 9y ago
    I usually don't post seemingly pedantic comments on HN, but I have to call you out here. You guys are blocking users from using your application in Firefox because of scrollbar colors? That seems like a terrible choice given it is probably alienating a good chunk of potential users.
    - yladiz 9y ago
      On that note, can a screenshot be provided in Firefox with the Webflow designer, provided the code functions? If it's really just a scrollbar issue, and the UI is that bad according to the Bugzilla comment, can we see how it looks?
      - brryant 9y ago
        Here's a little screen capture of what Webflow looks like in Firefox https://cl.ly/3J0c2v2Y093O https://cl.ly/3J0c2v2Y093O — the scrollbar causes quite a few issues with layout, but also we have to take into account the fact it's also a different width, which doesn't play nicely with drag 'n drop.
    - iamdustan 9y ago
      What would HN be without pedanticism? ‍️¯\_(ツ)_/¯ We’re also more than just “guys”.
reiichiroh 9y ago
holy crap that took forever to load on mobile safari
- joshribakoff 9y ago
  Worked great on mobile safari for me
  - jsjohnst 9y ago
    Ditto on an iPhone 7 with iOS 11.0.3. Butter smooth scrolling too.
porker 9y ago
WebPageTest.org result: https://www.webpagetest.org/result/171024_AW_97ca0329c0a7e7d27150a5d419f4e7fe/ https://www.webpagetest.org/result/171024_AW_97ca0329c0a7e7d... I am impressed how fast it loads, despite it being over 3.5MB.
- brryant 9y ago
  Hey there, Webflow CTO here. We take performance seriously here so I'm secretly in glee to see users notice this. It's a similar stack we use for Webflow hosting: https://webflow.com/hosting https://webflow.com/hosting A few things on this page that make this site fast: - Responsive Images created for you as your build your site (https://webflow.com/feature/responsive-images https://webflow.com/feature/responsive-images) - HTTP2 wherever possible - Fastly for initial HTML document for sub 10ms TTFB, depending on your location - their instant purge makes it possible for our users to see their updated sites super quickly - AWS Cloudfront for static, scripts, and media assets
  - biocomputation 9y ago
    Neat tool - and a lot of hard, careful work no doubt. In one of your articles, you say that your product isn't a 'grandma web site builder' or something to that effect. Any chance you could, in the future, perhaps use different language? Maybe something a little less derogatory to older folks? I totally get that it wasn't your intent!
    - brryant 9y ago
      Yea, when I said it verbally on the Skype call with Matt (the reporter) it definitely conveyed much more of a satirical tone, but in hindsight, I realized that was a mistake. My 奶奶 definitely would have scolded me for that. Sorry 奶奶...
  - DonHopkins 9y ago
    It is quite snappy, yes!
alooPotato 9y ago
Nice launch! One thing is that the page here: https://webflow.com/interactions-animations https://webflow.com/interactions-animations is pretty janky on scroll on my top of the line macbook pro. My guess is its because there are a lot of animations being demo'd which probably wouldn't happen on a real site. But just a heads up.
- Jasper_ 9y ago
  From a quick look in the Performance tab, there seems to be an expensive path in "bugsnag", an error reporting tool, on every scroll and mousemove.
yladiz 9y ago
This page loaded quickly for the amount of stuff it has on it, but it scrolls slowly in some parts (and really slowly in one, the part after WORLD WIDE WEB, with the CERN Welcome screens). It also pegs my CPU the entire time. I assume this is due to some of the animations happening constantly throughout the page, even when things are not on screen, since this happens with constantly running CSS transitions on any website. Since this is done in Javascript, why can't they detect if the specific element is on screen and enable/disable the transitions happening for it? A page like this is uncommon since it's a showcase of the tech but I would imagine this would save a lot of headaches for future designers when designing multiple animations on a page (or at least give the option to "stop when not on screen" for an animation).
- leonardsouza 9y ago
  Hey, yladiz! I'm the tech lead on IX2. Are you using Safari by chance? The part after WORLD WIDE WEB is a known issue and we are working on it, but it works smoothly in Chrome (if you could give it a try). We are also looking at how we can best cull off-screen animations to minimize CPU usage. Thank you for the great feedback! Best, Leonard
  - alooPotato 9y ago
    Using chrome on a brand new macbook pro and scroll is a little janky everywhere on page.
    - leonardsouza 9y ago
      Which site are you experiencing the jank? https://webflow.com/interactions-animations https://webflow.com/interactions-animations or http://webflow.com/ix2 http://webflow.com/ix2
      - alooPotato 9y ago
        Sorry this one: https://webflow.com/interactions-animations https://webflow.com/interactions-animations

kin 9y ago

This is very impressive. I don't have to labor anymore over tediously designed landing pages with slick animations. This looks like it's as easy to use for designers as After Effects.

simonswords82 9y ago

I feel like they should allow me to try their designer without having to sign up. I'd recommend they split test that against their current onboarding flow.

brryant 9y ago
Check out https://www.flexboxgame.com/ https://www.flexboxgame.com/ to experience the Webflow UI while playing a Flexbox game. Gives you a sense of the controls that Webflow exposes without signing up.
- ellissd 9y ago
  Hmm, I can't seem to get past Level 1 in the flexbox game. I'm probably doing something wrong, but the circle I'm supposed to drag to the outline doesn't want to move.
  - tekromancr 9y ago
    You aren't supposed to click and drag it. You use the css flexbox attributes (see right-hand sidebar) to move it over the goal.

trizinix 9y ago

I signed up to try Webflow. Unfortunately Firefox is not supported. I guess the "Only works in Chrome" really is the new "Works best in IE6".

iamdustan 9y ago
Hey @trizinix, I fully understand and agree with your sentiment. History sure has a way of repeating itself. As one of the devs on the team who is primarily a Firefox user I feel this everyday. The primary reason we don’t support Firefox is due to our usage of custom scrollbars: https://bugzilla.mozilla.org/show_bug.cgi?id=77790#c188 https://bugzilla.mozilla.org/show_bug.cgi?id=77790#c188 You can vote for this issue on our Wishlist to help get Firefox support prioritized on our roadmap: https://wishlist.webflow.com/ideas/WEBFLOW-I-17 https://wishlist.webflow.com/ideas/WEBFLOW-I-17 (Fwiw the published sites from Webflow do fully support Firefox, just the Designer itself does not.)
- gfodor 9y ago
  I usually don't post seemingly pedantic comments on HN, but I have to call you out here. You guys are blocking users from using your application in Firefox because of scrollbar colors? That seems like a terrible choice given it is probably alienating a good chunk of potential users.
  - yladiz 9y ago
    On that note, can a screenshot be provided in Firefox with the Webflow designer, provided the code functions? If it's really just a scrollbar issue, and the UI is that bad according to the Bugzilla comment, can we see how it looks?
    - brryant 9y ago
      Here's a little screen capture of what Webflow looks like in Firefox https://cl.ly/3J0c2v2Y093O https://cl.ly/3J0c2v2Y093O — the scrollbar causes quite a few issues with layout, but also we have to take into account the fact it's also a different width, which doesn't play nicely with drag 'n drop.
  - iamdustan 9y ago
    What would HN be without pedanticism? ‍️¯\_(ツ)_/¯ We’re also more than just “guys”.

reiichiroh 9y ago

holy crap that took forever to load on mobile safari

joshribakoff 9y ago
Worked great on mobile safari for me
- jsjohnst 9y ago
  Ditto on an iPhone 7 with iOS 11.0.3. Butter smooth scrolling too.

porker 9y ago

WebPageTest.org result: https://www.webpagetest.org/result/171024_AW_97ca0329c0a7e7d27150a5d419f4e7fe/ https://www.webpagetest.org/result/171024_AW_97ca0329c0a7e7d... I am impressed how fast it loads, despite it being over 3.5MB.

brryant 9y ago
Hey there, Webflow CTO here. We take performance seriously here so I'm secretly in glee to see users notice this. It's a similar stack we use for Webflow hosting: https://webflow.com/hosting https://webflow.com/hosting A few things on this page that make this site fast: - Responsive Images created for you as your build your site (https://webflow.com/feature/responsive-images https://webflow.com/feature/responsive-images) - HTTP2 wherever possible - Fastly for initial HTML document for sub 10ms TTFB, depending on your location - their instant purge makes it possible for our users to see their updated sites super quickly - AWS Cloudfront for static, scripts, and media assets
- biocomputation 9y ago
  Neat tool - and a lot of hard, careful work no doubt. In one of your articles, you say that your product isn't a 'grandma web site builder' or something to that effect. Any chance you could, in the future, perhaps use different language? Maybe something a little less derogatory to older folks? I totally get that it wasn't your intent!
  - brryant 9y ago
    Yea, when I said it verbally on the Skype call with Matt (the reporter) it definitely conveyed much more of a satirical tone, but in hindsight, I realized that was a mistake. My 奶奶 definitely would have scolded me for that. Sorry 奶奶...
- DonHopkins 9y ago
  It is quite snappy, yes!

alooPotato 9y ago

Nice launch! One thing is that the page here: https://webflow.com/interactions-animations https://webflow.com/interactions-animations is pretty janky on scroll on my top of the line macbook pro. My guess is its because there are a lot of animations being demo'd which probably wouldn't happen on a real site. But just a heads up.

Jasper_ 9y ago
From a quick look in the Performance tab, there seems to be an expensive path in "bugsnag", an error reporting tool, on every scroll and mousemove.

yladiz 9y ago

This page loaded quickly for the amount of stuff it has on it, but it scrolls slowly in some parts (and really slowly in one, the part after WORLD WIDE WEB, with the CERN Welcome screens). It also pegs my CPU the entire time. I assume this is due to some of the animations happening constantly throughout the page, even when things are not on screen, since this happens with constantly running CSS transitions on any website. Since this is done in Javascript, why can't they detect if the specific element is on screen and enable/disable the transitions happening for it? A page like this is uncommon since it's a showcase of the tech but I would imagine this would save a lot of headaches for future designers when designing multiple animations on a page (or at least give the option to "stop when not on screen" for an animation).

leonardsouza 9y ago
Hey, yladiz! I'm the tech lead on IX2. Are you using Safari by chance? The part after WORLD WIDE WEB is a known issue and we are working on it, but it works smoothly in Chrome (if you could give it a try). We are also looking at how we can best cull off-screen animations to minimize CPU usage. Thank you for the great feedback! Best, Leonard
- alooPotato 9y ago
  Using chrome on a brand new macbook pro and scroll is a little janky everywhere on page.
  - leonardsouza 9y ago
    Which site are you experiencing the jank? https://webflow.com/interactions-animations https://webflow.com/interactions-animations or http://webflow.com/ix2 http://webflow.com/ix2
    - alooPotato 9y ago
      Sorry this one: https://webflow.com/interactions-animations https://webflow.com/interactions-animations