motion design - website design / dev
hover/tap laptop to scroll
This was quite the passion project. I created this mock website and 3D motion video as a way to show some of my latest skillsets. For the website it was the integration of scrolling Lottie animation along with the newer Spline 3D into Webflow. I modeled Croc’s 711 Jibbitz to bring into spline. Then added the 3D interactivity to the page using WebFlow’s latest Spline Scroll feature.
view crocs landing page
The 3D Promo Video. Of all the collaborations and styles Crocs makes, the 711 themed platform shoe is by far the best looking. I had an incredible adventure modeling, texturing and rendering liquid simulations to this motion video. Nexus is X-particles’ latest GPU based simulation system. With it I managed to create the liquid drips and crown splashes. Although it is very render heavy overall, it is so much more accessible than the legacy simulation system. I think I prefer it over Realflow.
hover/click to interact
hover/tap to morph shoe
So my favorite part of web design and development is the integration of interative elements. As a former avid Flash website creator, I am exited that the internets is going back to have low/no code multimedia elements added back to it. It is almost like we are finally getting back to where we were over 10 years ago. Here are examples of new tools for interaction I added to the website. The first being an element of a 711 Slupee Jibbitz That I modeled and animated in Spline. Hover/click the slurpee area to turn on the lights.
Worked with the wonderful team at Vehicle Works on the new launch of Croc’s exclusive 711 shoes. Is that what you call them… shoes? It was a fun project where we explored many different motion design ideas to bring into the video shoot created at a Southern California 711 location.
The shooting location had a very baron environment surrounding the store. So we eventually came up with the idea of scene replacement. My role was to motion track and replace the outside environment with a more neon/cyberpunk environment. This was a challenge due to the footage having little to no tracking points setup in the production. But in the end we got a decent result.
In addition to the scene replacements I helped with some of the other motion graphic effects involving the Croc’s Jibbitz (little attachments to the shoe) and more.
Storyboards and some “How it’s Made” videos to show my process in creating this motion video and also the website development.
Here is a short before and after compositing video. Not a total breakdown of the fx, models used (kitbash), and composites, but you can see a bit of the process.