Vention

date: Apr 2017
client: Etienne Lacroix
role: UI Design, FE Development

Vention enables mechanical designers to design, order and assemble custom industrial equipment as fast as 3 business days, using a 3D online builder and modular hardware platform.

Design marketplace allows browsing through an ever-expanding library of user-generated designs as a way to accelerate your ideation process before starting your own design.

I was involved in an effort to redesign the interface of the promotional website. Another goal was to "migrate" the project to React ecosystem. Unfortunately, I only had a chance to work with the Homepage as the whole initiative was suspended.

vention-hero

Strong emphasis was put on animations and overall interactivity of the page.

The website is built around an online 3D modeling tool. Thus, every part of it should have some sort of a third dimension feeling.

vention-steps
vention-parts

For demo purposes, I chose to use Preact. Also based on the fact that this project will not be further extended, I decided to focus more on the development of high performant animations rather than polishing reusability of each component.

My animation library of choice was 'basicScroll' which I used for all parallax effects. I also used 'react-animate-on-scroll' to trigger animations for revealing elements.

Below you can find an example of how both libraries are configured inside a render method.

An Animate class is used to control all animation instances inside each component. A reference to each animation is added to the class using React Refs. Eventually, all of them are being initialized and launched on 'componentDidMount'. During 'componentWillUnmount' every instance is destroyed.

vention-scene

I highly enjoyed working on this project and I am grateful to great people from Vention for such an opportunity.

Selected Works

Sensor FocusFE Development, UI/UX

VentionReact, Motion Design

sfdx-watchSalesforce CLI Plugin