Shopware

Shopware

Motion Design System

abstract shape
abstract shape

Project Description

Project Description

I collaborated with Shopware’s brand and design team to develop the motion identity for their corporate design system. My contribution focused on defining motion principles, transitions, and animations that reflect the brand’s digital character — clean, dynamic, and purpose-driven.

Credits

Leonardo Ramirez, Kerstin Ludwig, Anton TÖws

Leonardo Ramirez, Kerstin Ludwig, Anton TÖws

Date

Sep 2024

Role

Freelance Motion Designer

Tools

After effects

abstract shape

My Contribution

My Contribution

The result was a comprehensive After Effects motion kit integrated into their brand documentation, enabling scalable, consistent, and expressive animations for UI and marketing. Defined motion styles: Expressive, Functional, and Vague — each with unique easing curves and animation behaviors.

  • Created custom After Effects presets for text, position, and scaling animations aligned with brand tone.

  • Developed reusable scripts and expressions for stroke widths, color systems, and responsive text box scaling.

  • Designed modular motion templates based on UI use cases (e.g., hover states, intro/outro, card animations).

  • Built animated gradient systems to add motion-based depth to backgrounds (including color banding fixes).

abstract shape

Easing Values

Easing Values

This easing style is designed for responsive and structured animations. It’s ideal for UI interactions, brand transitions, and moments where clarity and rhythm are essential — such as buttons, modals, or intro/outro sequences.

Timing

  • Duration: ~2 seconds

  • Frame Rate Equivalent: ~1.12 frames/sec (for smoothness)

  • Speed: 350px/sec (Position)

How It Works

In After Effects, the “influence” value of a keyframe determines how much the motion curve eases into or out of that keyframe. The speed is technically zero at each keyframe, meaning movement is shaped entirely by how much influence (curve) you apply.


Higher influence = smoother motion

Lower influence = sharper transitions

Keyframe Breakdown


Keyframe

Easing In

Easing Out

Description


1


16%


40%


Starts gently, then speeds up


2


33%


33%


Smooth midpoint, balanced in/out


3


33%


33%


Consistent easing flow


4


40%


16%


Strong deceleration, quick end


This easing style is designed for responsive and structured animations. It’s ideal for UI interactions, brand transitions, and moments where clarity and rhythm are essential — such as buttons, modals, or intro/outro sequences.

Timing

  • Duration: ~2 seconds

  • Frame Rate Equivalent: ~1.12 frames/sec (for smoothness)

  • Speed: 350px/sec (Position)

How It Works

In After Effects, the “influence” value of a keyframe determines how much the motion curve eases into or out of that keyframe. The speed is technically zero at each keyframe, meaning movement is shaped entirely by how much influence (curve) you apply.


Higher influence = smoother motion

Lower influence = sharper transitions

Keyframe Breakdown


Keyframe

Easing In

Easing Out

Description


1


16%


40%


Starts gently, then speeds up


2


33%


33%


Smooth midpoint, balanced in/out


3


33%


33%


Consistent easing flow


4


40%


16%


Strong deceleration, quick end


This easing style is designed for responsive and structured animations. It’s ideal for UI interactions, brand transitions, and moments where clarity and rhythm are essential — such as buttons, modals, or intro/outro sequences.

Timing

  • Duration: ~2 seconds

  • Frame Rate Equivalent: ~1.12 frames/sec (for smoothness)

  • Speed: 350px/sec (Position)

How It Works

In After Effects, the “influence” value of a keyframe determines how much the motion curve eases into or out of that keyframe. The speed is technically zero at each keyframe, meaning movement is shaped entirely by how much influence (curve) you apply.


Higher influence = smoother motion

Lower influence = sharper transitions

Keyframe Breakdown


Keyframe

Easing In

Easing Out

Description

1

16%

40%

Starts gently, then speeds up


2


33%


33%


Smooth midpoint, balanced in/out


3


33%


33%


Consistent easing flow


4


40%


16%


Strong deceleration, quick end


abstract shape

Color Script – Dropdown Menu Control in After Effects

Color Script – Dropdown Menu Control in After Effects

This After Effects expression allows you to dynamically switch colors (fill or stroke) by selecting options from a Dropdown Menu. The menu is placed in a Control Layer called "BG COLOR STROKE", which acts as a global controller.


if (thisComp.layer("BG COLOR STROKE").effect("Dropdown Color Menu")("Menu") == 1){

[24, 158, 255, 0] / 255;

}


  • The expression checks the selected menu option (1, 2, 3, or 4).

  • Each number corresponds to a specific RGBA color.

  • The RGBA color values are divided by 255, because After Effects requires color values in a range from 0 to 1.

  • The result is a color that gets applied automatically to a shape layer, stroke, background, etc.

✅ Why This Is Useful

  • It centralizes color control — instead of changing colors in many layers, you control them from one dropdown.

  • Helps maintain brand consistency across compositions.

  • Speeds up workflow, especially when testing or applying different themes (e.g., Light, Dark, Blue, White).




This After Effects expression allows you to dynamically switch colors (fill or stroke) by selecting options from a Dropdown Menu. The menu is placed in a Control Layer called "BG COLOR STROKE", which acts as a global controller.


if (thisComp.layer("BG COLOR STROKE").effect("Dropdown Color Menu")("Menu") == 1){

[24, 158, 255, 0] / 255;

}


  • The expression checks the selected menu option (1, 2, 3, or 4).

  • Each number corresponds to a specific RGBA color.

  • The RGBA color values are divided by 255, because After Effects requires color values in a range from 0 to 1.

  • The result is a color that gets applied automatically to a shape layer, stroke, background, etc.

✅ Why This Is Useful

  • It centralizes color control — instead of changing colors in many layers, you control them from one dropdown.

  • Helps maintain brand consistency across compositions.

  • Speeds up workflow, especially when testing or applying different themes (e.g., Light, Dark, Blue, White).



This After Effects expression allows you to dynamically switch colors (fill or stroke) by selecting options from a Dropdown Menu. The menu is placed in a Control Layer called "BG COLOR STROKE", which acts as a global controller.


if (thisComp.layer("BG COLOR STROKE").effect("Dropdown Color Menu")("Menu") == 1){

[24, 158, 255, 0] / 255;

}


  • The expression checks the selected menu option (1, 2, 3, or 4).

  • Each number corresponds to a specific RGBA color.

  • The RGBA color values are divided by 255, because After Effects requires color values in a range from 0 to 1.

  • The result is a color that gets applied automatically to a shape layer, stroke, background, etc.

✅ Why This Is Useful

  • It centralizes color control — instead of changing colors in many layers, you control them from one dropdown.

  • Helps maintain brand consistency across compositions.

  • Speeds up workflow, especially when testing or applying different themes (e.g., Light, Dark, Blue, White).




CONTACT


Berlin

Germany

About

Imprint

Home

Notion

Dribbble

LinkedIn

Behance

© 2025 — All Rights Reserved

CONTACT

Berlin

Germany

About

Imprint

Home

Notion

Dribbble

LinkedIn

Behance

© 2024 — All Rights Reserved

CONTACT

Berlin

Germany

About

Imprint

Home

Notion

Dribbble

LinkedIn

Behance

© 2024 — All Rights Reserved