Motion

Motion

Motion

Motion

Motion Graphics

Motion will bring your project to life. Soon, you'll know all about easing, sliding, fading, and transitioning!

Hold 'n' Drag

Motion and animation can play a crucial role in any digital project.

Motion design is often overlooked during the design phase. Sometimes, it's an afterthought, usually added as a bit of fairy dust, but the problem is that little consideration has been given to the 'vibe' a project is trying to convey.

Considering all the hard work, time invested, and budget spent, adding ill-thought-out bells and whistles seems like a surefire way to devalue your brand unnecessarily. When executed with care, implementing motion design, whether micro or mega, can elevate a great design into a masterpiece.

Micro Interactions

Micro-interactions are subtle, often overlooked, yet crucial elements of user experience design. They are small animations or visual responses triggered by user actions, such as hovering over a button, clicking a link, or scrolling through content. When implemented effectively, micro-interactions elevate the feel of a digital product.

Avoid using predefined templates from companies like Wix or Squarespace. They are one-size-fits-all solutions, adding interactions and motions that may be unnecessary or inappropriate. It's better to have a fully customisable site, with carefully considered micro-interactions, created in Webflow, without being limited to a predefined template with 'walled garden' functionality.

Lottie Animations

Lotties animations 'Lotties' are an open-source tool allowing high-quality animations in web and mobile applications. I use Adobe After Effects animation software, which is traditionally used for video and special effects, to create the animation and export the file as a lightweight, scalable JSON file. This file is then imported into Webflow.

Lotties render efficiently in a browser and perform well, offering super slick motion that is hard to emulate otherwise. Lottie files are resolution-independent, meaning the image quality does not degrade regardless of the scale. They can also be controlled within Webflow, allowing users to interact with the animation uniquely and engagingly.

GSAP (GreenSock Animation Platform)

I use GSAP, a JavaScript library, to program and create advanced animations and interactive effects. It offers several options to animate sections on a web page, like stunning slide animations and text effects, which would be challenging to create otherwise. GSAP motion is fluid, visually stunning, and performs well in most browsers. Coding can be complex, so it's best to discuss your intentions with me, and I can guide you from there.

Spline

Spline is a relatively new tool, a web-based platform for designing 3D animations and interactions. I create 3D models and integrate them into Webflow, allowing user-controlled interactions. Spline is remarkable, enabling 3D objects to be implemented, scaled, rotated, and zoomed by the user, adding a whole new dimension to your digital project.

Work

Recent projects where effective motion design has been implemented.

This site incorporates crisp imagery with comprehensive details on spaces, amenities, and strategic locations. Advanced coding, including dynamic apartment availability and GSAP mapping functionality, was implemented and designed to be fully accessible on various devices.

10 Exchange

10 Exchange

Visual Design
Web Development
Motion Design
The design approach for their website centred on simplicity, clarity, and practicality for a complex inventory-led site. The aesthetic offers a touch of luxury befitting its high-cost items.

Gargoyle Granite

Gargoyle Granite

Visual Design
Web Development
Advanced Coding
Art Direction
Motion Design
The collaboration aimed to propel the client's innovative offerings to a global audience, focusing on enhancing user engagement and accessibility. Studio One Twenty leveraged expertise in motion graphics, advanced interactions, and implementing GSAP technology. This synergy of creativity and technical precision resulted in a sophisticated and responsive website that showcased the company's groundbreaking solutions and provided an immersive user experience.

Seeloz

Seeloz

Web Development
Technical SEO
Visual Design
Motion Design
Advanced Coding
The development phase was marked by the extensive use of Webflow’s customisable components, empowering the client to update and create new pages effortlessly. This has significantly reduced the need for continuous direct support from designers or developers. The site boasts advanced features such as robust localization tools, supporting content in over ten languages besides English. These features are further enhanced by localized technical SEO and compliance with the latest WCAG standards.

Markham Stouffville Hospital

Markham Stouffville Hospital

Visual Design
Web Development
Technical SEO
Multi-Language
Motion Design

If you want your site to be a mover and shaker, schedule a video call.

For enquiries, please schedule a video call or get in contact.