Animated Sci-Fi SVG Scene (w/ GSAP)

I’ve seen things you people wouldn’t believe. Attack ships on fire off the shoulder of Orion. I watched c-beams glitter in the dark near the Tannhäuser Gate. All those moments will be lost in time, like tears in rain. Time to die. — Blade Runner

An animated sci-fi SVG scene demo using GreenSock heavily inspired by Blade Runner.

Visit the live demo on CodePen: https://codepen.io/enesser/full/BZQWBo/

Background

I created this demo to get developers and designers excited about SVG animations at Designory.

SVGs:

• are generally lightweight compared to rasters
• can be described with <desc/> for accessibility
• can be interactive
• are crisp at virtually any resolution and infinitely scalable
• can be great story-telling tools

Controls

The blimp’s display will rotate on demand if you click the blimp. This is meant to demonstrate that SVG elements can be interactive.

Taking it Apart

The following is a breakdown of all of the animations in the scene.

• Title (SplitText, TimeLineMax)
  • Each letter fades in with opacity using staggerFrom with Power1.easeIn easing
• Clouds (TimeLineLite, TimeLineMax)
  • Clouds translate along x, each on their own timeline
• Blimp (TimeLineLite, TimeLineMax)
  • Translates along x and y, occasionally changing scale to appear near or far
  • Lights change opacity and scale using staggerFrom
  • Glitch effect achieved using SVG <filter/> and SMIL <animation/>
  • Blimp display shows and hides SVG elements for each frame with display property
    • Blimp rotates frames using requestAnimationFrame
• Beacon Lights (TimeLineLite)
  • Lights change opacity using fromTo
• Landing Lights (TimeLineMax)
  • Lights change opacity using staggerFrom
• Windows TimeLineMax
  • Windows change opacity using from
• Car (TimeLineMax)
  • Sirens changes opacity using to
  • Traffic light changes SVG fill using to
  • Car translates x and changes scale using Power3.easeOut to appear rubbery as it moves in a poor man’s attempt to follow the Principles of Animation
• Scanlines (keyframes, linear-gradient)
  • Scanlines for an overall ’80s retro feel have been added using CSS linear-gradient animated with @keyframes

The most complex timeline in the scene is the car, and it was meant to demonstrate how to construct a complex animation by showing a car stopping at a traffic light, a traffic light changing from red to green, and the car resuming with its sirens on when the light changes.

If you are new to GreenSock, note that when you have multiple elements in a collection, to or from will animate them all at the same time, whereas staggerTo and staggerFrom will stagger the animation for each element so that they are spaced out from each other.

Staggering is used extensively for the animation of lights so they appear to twinkle in sequence.

Ease Visualizer

GreenSock's Ease Visualizer can be a tremendous help when designing animation eases.

Additional Credits

Special thanks:

• Аlexander Oblap for helping to create image assets.
• Glitch effect adapted from https://codepen.io/DirkWeber/pen/ArFvk

License

Copyright (c) 2017-2018 Eric J Nesser MIT