I collaborated with the Ranger team earlier this year to build out their new website in Webflow. They hired a really gifted brand designer & copywriter to design the site and bring the content together and provided Figma files to develop the website.

It was a lot of fun to develop out the Style Guide, home, about, book a demo, bulletin, and bulletin detail pages.

Props to Julie on the designs in Figma 💖

Had some fun with the style guide to define brand styles and make them easy for the team to access as needed.

One component that was particularly fun to craft was an automated slider that would reset when scrolling into view, pause when it was out of view, and loop on a timer. Then, it would convert to a 1:1 touch slider on mobile. At first we wanted to build this out as a sticky scroll element, but found that it wasn't cooperating on multiple breakpoints and caused the page to be too long. This solution utilizes the Webflow tab component and a bit of custom code to convert it into a slider on mobile.

Not too shabby on the page load speed results ⚡