Background: The purpose of this site is to showcase Parisian interactive designer Robin Mastromarino’s latest projects and skills, and to help him find a new position in an agency or studio.
Highlights: The home slider. We wanted to surprise users with an unexpected effect. The displacement and round edge deformations are based on users’ scroll and drag speed, which allows them to have fun with it. We spent the most time on this part of the site, refining the animations and the interactions.
Navigational structure: We have thought a lot about the fluidity of the navigational structure. The navigation is smooth because it is all loaded at once, along with the animations and page transitions. The scroll and drag animations are also dynamic and dependent on the velocity of the interactions. This allows users to have a real feeling of control over these animations.
Technical features: We used Photoshop and After Effects to design the site. Almost the entire site was created in WebGL (with three.js) to produce more possibilities for the animations and transitions, formulated thanks to the power of the shaders. We also used GreenSock Animation Platform (GSAP), a great library for web animations.
Alternative approach: We would try to create a version of the site with 3-D models for each project. We would also play around with a 3-D physic engine in order to learn more about 3-D modernizations and WebGL to form other types of interactions and animations.