Extream Fitness

Maximizing the power of Webflow with custom animations and functionality

Mockup of the website shown in a Mac desktop screen

Overview

Extream Fitness is a concept fitness and personal training website I developed for a capstone project for Flux Academy's Webflow Masterclass, an advanced Webflow development course I completed in 2022. The site's design was provided by the course.

Mockup of Bantam Marketing website shown in a desktop screen

Problem

Mockup of Bantam Marketing website shown in a desktop screen

Solution

feature

Advanced animations

Using custom code, this website incorporates several advanced design and development features, including:

  • Page load and transition animation
  • On-page filtering and searching of CMS items like blogs, services, team member bios, case studies, etc.
  • Custom hero and navigation menu animations
  • Custom slider
  • Infinite scroll animation
  • Magnetic video play button
Before
After
Screenshot of the new home page
feature

Custom Blog Filtering

Using custom code, the blog page of the website allows users to filter CMS blog posts by category and also search blogs in real time without reloading the page.

No items found.
feature

Advanced animations

Using custom code, this website incorporates several advanced design and development features, including:

  • Page load and transition animation
  • On-page filtering and searching of CMS items like blogs, services, team member bios, case studies, etc.
  • Custom hero and navigation menu animations
  • Custom slider
  • Infinite scroll animation
  • Magnetic video play button
Mockup of the website shown in a MacBook Pro screen
feature

Custom Blog Filtering

Using custom code, the blog page of the website allows users to filter CMS blog posts by category and also search blogs in real time without reloading the page.

No items found.

Results

The finished site stretches and maximizes what is possible within Webflow. The use of interactions and animations complements the use of imagery, gradients, and frosted windows to achieve a futuristic, design-forward look. This look conveys motion and movement in a way that works well for a modern fitness brand.

Many of the features seen here — custom filtering of CMS items (things like blogs, team member bios, etc.), same-page searching of CMS items, custom animations for page transitions, and navigation menus —  can enhance a website's look and functionality for many brands.

review starreview starreview starreview statreview star
Screenshot of the website's home page