Projects Archives • Motion Tricks https://www.motiontricks.com/projects/ Web animation tutorials to get your pixels movin' Tue, 15 Sep 2020 14:51:22 +0000 en-US hourly 1 https://wordpress.org/?v=6.7.2 HSLA Color Dials With mapRange() https://www.motiontricks.com/hsla-color-dials-with-maprange/ Tue, 15 Sep 2020 14:51:21 +0000 https://www.motiontricks.com/?p=1556 Using GreenSock's mapRange() utility method, we'll create four dials and interactively change the background color with (hsla).

The post HSLA Color Dials With mapRange() appeared first on Motion Tricks.

]]> SVG Calligraphy Handwriting Animation https://www.motiontricks.com/svg-calligraphy-handwriting-animation/ Tue, 04 Aug 2020 15:17:24 +0000 https://www.motiontricks.com/?p=1476 SVG calligraphy can be tricky with varying width strokes and text overlapping itself. Learn how to do it with multiple masks.

The post SVG Calligraphy Handwriting Animation appeared first on Motion Tricks.

]]> Wavy Gauge Numbers https://www.motiontricks.com/wavy-gauge-numbers/ Sun, 05 Jul 2020 22:50:20 +0000 https://build.motiontricks.com/?p=428 Dynamically build a SVG wavy gauge with jumping numbers and link the time to a draggable element.

The post Wavy Gauge Numbers appeared first on Motion Tricks.

]]> SVG Stretchy Navigation https://www.motiontricks.com/svg-stretchy-navigation/ Wed, 01 Jul 2020 23:45:18 +0000 https://build.motiontricks.com/?p=869 You'll learn how to move your target from one item to the next with an organic feeling, stretchy-style animation.

The post SVG Stretchy Navigation appeared first on Motion Tricks.

]]> Gooey Navigation https://www.motiontricks.com/gooey-navigation/ Sun, 28 Jun 2020 18:26:11 +0000 https://build.motiontricks.com/?p=889 We'll make a gooey shape smoothly glide to a new target via a custom SVG curve for a gooey navigation.

The post Gooey Navigation appeared first on Motion Tricks.

]]> Movie countdown animation https://www.motiontricks.com/movie-countdown-animation/ Tue, 23 Jun 2020 21:04:03 +0000 https://build.motiontricks.com/?p=294 Learn how to use a circular mask and a text element counter to create a retro-style SVG movie countdown animation.

The post Movie countdown animation appeared first on Motion Tricks.

]]> SVG Skill Level Meter https://www.motiontricks.com/svg-skill-level-meter/ Mon, 22 Jun 2020 22:48:00 +0000 https://build.motiontricks.com/?p=123 Using a few simple paths, you can create a neat little SVG skill level meter with multiple uses.

The post SVG Skill Level Meter appeared first on Motion Tricks.

]]> Hamburger button with handwriting https://www.motiontricks.com/hamburger-button-with-handwriting/ Sun, 21 Jun 2020 13:43:00 +0000 https://build.motiontricks.com/?p=98 Spice up your next burger button with some animated handwriting and fluid line transformations.

The post Hamburger button with handwriting appeared first on Motion Tricks.

]]> Before and After SVG Slider https://www.motiontricks.com/before-and-after-svg-slider/ Sat, 20 Jun 2020 15:22:57 +0000 https://build.motiontricks.com/?p=356 If you'd like a quick and easy before and after SVG slider, you can make one with a SVG and clipPath.

The post Before and After SVG Slider appeared first on Motion Tricks.

]]> Invert SVG Text With A Mask https://www.motiontricks.com/invert-svg-text-with-a-mask/ Wed, 17 Jun 2020 20:43:00 +0000 https://build.motiontricks.com/?p=21 In this quick tutorial, you'll learn how to create a neat inverted text effect using a mask or clip-path in your SVG.

The post Invert SVG Text With A Mask appeared first on Motion Tricks.

]]>