Creating an Animated Logo in Tumult Hype: Comparing the After Effects + Bodymovin’ Lottie Workflow

We’ll be recreating this animation created in AE by Stanislav Marchenko, used with permission.
Comparison of Tumult Hype and After Effects animation interfaces.
The timeline Interface in Tumult Hype (left) and After Effects

What We’ll Cover

  • Tracing shapes with the vector tool & referencing individual frames after importing a sprite sheet animation
  • Converting easing transitions from AE to Hype
  • Using sine wave math functions in Hype
  • Combining Shape Morphing & Animation
  • Adding interactivity
  • Exporting to the web, and Hype’s economic export size
Creating our Headfeathers

A quick comparison of Tumult Hype and After Effects

via Lottie Documentation

Creating our Vectorized Chicken Pieces

  • 🖋️ The top beak, bottom beak, crown and body are all individual vector shapes
  • 👀 The eyes can be regular ellipses
  • Each individual letter is a regular Google Font split up into separate characters.

Animating Text Bounce

<link href='https://fonts.googleapis.com/css?family=M+PLUS+Rounded+1c:700&text=MARKETPLC' rel='stylesheet' type='text/css'>
  1. Select the letter K
  2. Press Record
  3. Advance the playhead a couple frames
  4. Move the Element down about 30 pixels
  5. Advance the timeline 1 second
  6. Move the letter K up to its original location

Making Animations More Natural with Math

The Trifecta: Rotation, Movement + Morphing

The Lower Beak: Animating Morphing, Position, and Rotation (and hiding!)

Grouping for Sanity

Stretching the eyes

Taking it Further with Interactivity

[DL video]

Talking Exports

Web performance: Tumult Hype vs. Bodymovin/Lottie

Comparing Performance

View both animations side by side here.

Not just for Chickens & Logos

Vector Animation Contest Winners Created in Tumult Hype

--

--

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Tumult Inc.

Tumult Inc.

Creators of Tumult Hype, the HTML5 animation tool for Mac OS X.