Webflow vs Framer Challenge

In this challenge, Webflow and Framer masterclass instructors were given 2 hours to turn a Figma design into a fully functional webpage.

Participants

• Webflow Corner: Ran Segall, Founder of Flux Academy
• Framer Corner: Matt Jumper, Canadian Designer

Presentations

Webflow (Ran Segall)

• **Completed Elements: **
  • Most of the main content, including horizontal scroll and gallery with interactions.
  • Newsletter section.
• **Missing Elements: **
  • Footer with the revealing effect.
• **Responsive Design: **
  • Attempted to make it responsive despite the Figma design not including a responsive layout.
  • Some issues with responsive design, particularly with inverted corners.
• **Technical Challenges: **
  • Inverted corners required using SVGs for corners, which isn't truly responsive.
  • No custom code used.

Framer (Matt Jumper)

• **Completed Elements: **
  • Full desktop layout with animations.
  • Components with parallax effect.
  • Gallery with hover states and animations.
  • Newsletter section with reveal footer.
• **Responsive Design: **
  • Focused entirely on desktop due to time constraints.
• **Technical Details: **
  • Horizontal scrolling achieved with scroll variants and trigger points.
  • Parallax effect using scroll transforms.
  • Input elements with custom focus states.
• **Unique Challenges: **
  • Had to create hacky solutions for scroll animations due to Framer's limitations.

Technical Insights

Horizontal Scrolling

• **Webflow: **
  • Easy to achieve with wide containers and sticky scrolling interactions.
• **Framer: **
  • Complexity due to lack of percentage-based scroll transforms, leading to usage of scroll variants and other hacks.

Inverted Corners

• **Webflow: **
  • Used SVGs for corners, not possible with actual round corners.
• **Framer: **
  • Not specifically highlighted, but similar issues with styling can be inferred.

Interactions and Animations

• **Webflow: **
  • Extensive use of interactions for text and images, using simple parallax effects.
• **Framer: **
  • More detailed animations with hover states and transitions on various elements.

General Impressions

• Webflow:
  • Highly versatile, capable of replicating detailed designs with few limitations.
  • Solid performance in achieving responsive designs quickly.
• Framer:
  • Notably fast for initial builds with highly smooth interactions.
  • Preferred by those who prioritize desktop completeness before moving to responsive states.

Conclusion

• Both tools effectively showcase the ability to achieve complex designs.
• Choice depends on user preference and specific project requirements.
• Both presenters impressed with their speed and attention to detail.

Call to Action

• Viewers are encouraged to try out both tools with available crash courses.

Happy designing and developing!