Case Study

Infinity VC

How I turned a static Adobe XD idea into a side scrolling animated presentation (phewf!).

Case Study

Infinity VC

How I turned a static Adobe XD idea into a side scrolling animated presentation (phewf!).

Case Study

Infinity VC

How I turned a static Adobe XD idea into a side scrolling animated presentation (phewf!).

Project Details

Client:

Infinity VC

Type:

Adobe XD to Webflow

Objective:

Side-scroller presentation site.

Tools:

Adobe XD, Webflow

Overview

I was tasked with creating a complex side-scrolling website for Infinity VC, from an Adobe XD to mockup. I used Webflow to build the actual website, recreating the design and integrating custom animations and interactions to make it engaging.

The website features multiple sections that users can navigate through by scrolling horizontally. Each section contains different content and visuals, with custom animations triggered as the user scrolls down the page. This creates a unique and immersive experience that encourages users to explore the site further.

Approach

Creating a side-scrolling website with custom animations can be challenging enough on its own. However, making sure that the website is also fully responsive and optimized for mobile devices presents an additional layer of complexity.

To tackle this challenge, I approached the project with a mobile-first mindset. This meant designing the website with mobile screens in mind first, and then expanding the design to accommodate larger screens. I also made use of Webflow's responsive design features, allowing us to adjust the layout and design for different screen sizes.

Additionally, I had to carefully consider how the animations and interactions would work on different devices to ensure that they were still engaging and not overly complicated for smaller screens. By combining a mobile-first approach with Webflow's responsive design capabilities, I was able to create a side-scrolling website that looks great and functions well on all devices.

Conclusion

The client is thrilled with the final result and the custom animations and interactions have helped to create a unique and memorable browsing experience for their users. This project is a great example of what can be achieved with some detailed planning and the powerful capabilities of Webflow's scroll interactions.

Overall, we are proud of what we have accomplished with this project. It's always exciting to see how much can be achieved with the right tools and approach, and we are glad to have been a part of creating a website that truly represents Infinity VC's brand and services.

Figma to Framer conversion services.

Figma to Webflow conversion services.

Webflow to Framer conversion services.

Figma design services.

Web design services.

Design services.

© Copyright - Thunkd Design

Figma to Framer conversion services.

Figma to Webflow conversion services.

Webflow to Framer conversion services.

Figma design services.

Web design services.

Design services.

© Copyright - Thunkd Design

Figma to Framer conversion services.

Figma to Webflow conversion services.

Webflow to Framer conversion services.

Figma design services.

Web design services.

Design services.

© Copyright - Thunkd Design