This project was built with:

Custom Animation Showcase | Website + Dashboard + Mobile Apps

Anush N

2D Animator

Motion Designer

Video Editor

JavaScript

Jitter

LottieFiles

SaaS

Custom Animation Showcase | Website + Dashboard + Mobile Apps

Overview

This case study showcases a series of custom animation projects created using Jitter, custom JS to enhance user engagement, support brand messaging, and optimize visual storytelling across various platforms.

In each animation project, the goal was to create dynamic visuals that effectively conveyed the client’s message while maintaining brand consistency. Jitter provided the ideal platform for delivering efficient, high-quality motion graphics. Each animation contributed to improving user engagement, storytelling, and overall brand presence.

Process for Custom Animation Work

a. Client Discovery & Briefing

Understanding Client Needs:

For each project, the initial step involved gathering detailed requirements about the client’s goals, target audience, and intended platforms for the animation.

Discussions centered around the desired animation style (e.g., smooth motion, illustrative elements, kinetic typography) and any specific branding elements (logos, colors, fonts).

b. Asset Collection & Creation

Assets Sourcing:

For each animation, the necessary assets (logos, illustrations, icons, etc.) were gathered or created.

In some cases, custom illustrations were designed in tools like Illustrator or Figma before importing them into animation software.

c. Animation Concept Development

Storyboard & Motion Planning:

Each animation began with storyboarding or visual planning to map out key scenes, transitions, and motion sequences.

I collaborated with the client to refine the visual narrative, ensuring it aligned with their brand tone and objectives.

d. Animation Execution

Setting Up Projects in Jitter:

All assets were imported into the animation platform, organized into layers, and prepared for animation.

For each project, motion was applied to elements (e.g., scaling, fades, bounces, or text animations).

The timeline and keyframes were adjusted for precise control over timing, easing, and transitions to ensure smooth animation flow.

e. Iteration & Client Feedback

Review Process:

After creating an initial animation draft, I shared the project with the client for feedback.

Based on client input, any necessary revisions were made—adjusting timing, transitions, or adding new elements to better align with the brand’s message or style.

f. Final Delivery & Optimization

Exporting Animations:

Upon approval, the final animation was exported in multiple formats based on the client’s needs (e.g., MP4, GIF, Lottie for web use).

File sizes were optimized for different platforms to ensure fast loading and smooth playback.

Deliverables were provided in a ready-to-use format along with guidelines for embedding or sharing across digital channels.

g. Post-Delivery Support

Implementation Assistance:

In almost all cases, I assisted with embedding animations onto websites or social media platforms.

Offered support for future updates or revisions based on evolving needs.

Project 1: Sagepilot - D2C E commerce based AI Agent Platform

Sagepilot’s handcrafted AI support agents. Provide smart, tailored assistance to your customers 24/7, across every interaction point.

Hero section animation

Version 2 (Hero section Animation)

Text Reveal Effect

Project Link

Project 2: Faxsipit - Digital Fax Service (SaaS)

Faxsipit offers secure, reliable, and scalable fax solutions for various industries, such as finance, healthcare, education, and construction.

Hero section animation

Project Link

Project 3: Infraction - Networking Platform (SaaS)

The go-to platform for companies seeking the benefits of fractional leadership.

Project Link

Project 4: Ask Vinny - AI Real Estate Management (SaaS)

Vinny is your AI-powered property manager that doubles your team's capacity without increasing salary costs, freeing your staff to focus on higher-value tasks.

Project Link

Project 5: Ink and Runway - Fashion Brand Accelerator

Ink & Runway’s mission is to empower aspiring fashion designers and emerging brands through a comprehensive array of services. From fashion design consultation to brand strategy and digital presence, they are committed to fostering creativity and innovation in the competitive fashion industry.

Loading Animation

Project Link

Project 6: Optick - AI based Remote Workforce Management (SaaS)

Boost your team's productivity and elevate employee experience of remote workforce

3d Image Scroll

Logo Reveal Effect On Scroll

Project Link

Project - 7 Cystel (Cybersecurity Consultancy)

Project: Website Animation

Objective: To enhance Cystel’s digital presence through engaging and innovative website animations, emphasizing their expertise in cybersecurity.

Current Progress:

We are in the process of developing a custom 3D hero section and implementing encrypted text animation on the call-to-action button.

Details:

3D Hero Section: Aimed at immediately capturing visitor attention, the 3D animation will convey Cystel’s forward-thinking approach and commitment to cutting-edge technology.

Encrypted Text Animation: On the call-to-action button, this animation will underscore Cystel's focus on security, creating a dynamic visual representation of encryption and protection.

Expected Outcome:

Upon completion, these custom animations are anticipated to significantly enhance the visual appeal of the website, reinforce Cystel’s brand identity as a leader in cybersecurity, increase user engagement, and convey a strong, secure, and innovative image.

Watch on YouTube

Project Link

Project - 8 Interactive Button Animations across different websites :

Overview

In the digital age, the subtle nuances of user interface design can significantly impact the user experience. Buttons, as primary interactive elements on websites, play a critical role in guiding user actions. This case study explores various interaction animations for buttons, aimed at enhancing user engagement and providing intuitive feedback.

Hover Effects :

1. Colour Change:

- Implementation: The button changes color when hovered over.

- Impact: Provides immediate visual feedback, indicating the button is interactive. This simple change can significantly enhance the user’s understanding of clickable elements.

2. Scale Up:

- Implementation: The button slightly enlarges on hover.

- Impact: By increasing in size, the button draws attention and clearly indicates its interactivity, leading to higher click-through rates.

3. Shadow:

- Implementation: A drop shadow appears on hover.

- Impact: Creates a 3D effect, making the button appear elevated and more prominent, which improves visibility and user engagement.

4. Border:

- Implementation: A border appears or changes color when hovered over.

- Impact: Provides a clear visual cue that the button is active, enhancing the overall user interface’s visual hierarchy.

Click Effects

1. Press In:

- Implementation: The button appears to be pressed inwards when clicked.

- Impact: Simulates a physical button press, providing tactile feedback that reassures users their action has been registered.

2. Fade Out and In:

- Implementation: The button briefly fades out and back in on click.

- Impact: This transient effect indicates that the button has been successfully pressed, enhancing user feedback without disrupting the visual flow.

Transformations

1. Flip:

- Implementation: The button flips to reveal additional information or options.

- Impact: Adds an element of surprise and interactivity, which can make the user experience more engaging and informative.

2. Morph:

- Implementation: The button changes shape, such as from a rectangle to a circle.

- Impact: Indicates a change in state, providing visual feedback that can signal different actions or modes, making the interface more dynamic.

Text Effects

1. Slide In:

- Implementation: The button text slides in from the side on hover.

- Impact: Adds movement to the button, making it more engaging and drawing attention to the text, which can improve readability and user interaction.

2. Underline:

- Implementation: An underline animation sweeps in from the side or center.

- Impact: Emphasizes the button text, making it clear that the button is interactive and enhancing the overall aesthetic appeal.

Icon Animations

1. Spin:

- Implementation: An icon within the button spins on hover or click.

- Impact: Adds a playful element to the button, making the interaction more enjoyable and attracting user attention.

2. Pulse:

- Implementation: The icon pulses or grows slightly.

- Impact: Draws attention to the button and signifies its importance, encouraging users to interact with it.

3. Swap:

- Implementation: The icon changes to another icon.

- Impact: Indicates a change in state or action, providing clear visual feedback and enhancing the user experience.

Microinteractions

1. Shake:

- Implementation: The button shakes slightly to indicate an error.

- Impact: Clearly signals to users that an action is invalid, helping to prevent errors and improve usability.

2. Glow:

- Implementation: The button glows softly when hovered over or focused.

- Impact: Draws subtle attention to the button, making it stand out without being overly intrusive, thus enhancing the overall user experience.

Watch on YouTube

Project - 9 Progress Bar Animation

Objective :

To improve user navigation and provide intuitive feedback on scroll progress through website sections using a dynamic progress bar located below the navigation bar.

Design Concept

Strategic Placement:** Positioned below the navigation bar for continual visibility.

Visual Design: Utilized a sleek, contrasting horizontal bar that dynamically fills as users scroll through content.

Animation and Interaction

Scroll Detection: JavaScript detects user scroll actions.

Progress Calculation: Updates dynamically based on the user's scroll position relative to content sections.

Smooth Animation: Implemented CSS transitions for seamless visual updates.

Benefits

Enhanced User Guidance: Provides clear indication of the user's current position on the page.

Improved Engagement: Encourages exploration and continued interaction by visualising progress.

Usability Boost: Reduces cognitive load and enhances overall browsing experience.

Watch on YouTube

Like this project

Posted Jul 9, 2024

CUSTOM WEBSITE MOTION DESIGN : From subtle micro-interactions to immersive parallax effects, tailored to elevate user engagement.

Likes

Views