Skip to content

Designing For Animation Part 2: Examples

Illustration of a horse running

Here are a few examples we’ve plucked from the Internet for your inspiration. We quite often use GreenSock and ScrollMagic because they are among the most powerful animation and scroll-animating libraries.

Difficulty: easy.

Development time: 2-4 hours

See the Pen GSAP JS Bezier: Disperse and Converge by GreenSock (@GreenSock) on CodePen.

See the Pen GreenSock Home Page Animation by GreenSock (@GreenSock) on CodePen.

See the Pen Sortable Grid Using GreenSock Draggable by GreenSock (@GreenSock) on CodePen.

See the Pen Animated SVG text mask | Greensock by Arden (@aderaaij) on CodePen.

Difficulty: intermediate.

Development time: around 6-12 hours

See the Pen 3D Animation with GSAP by GreenSock (@GreenSock) on CodePen.

See the Pen MorphSVGPlugin from GreenSock by GreenSock (@GreenSock) on CodePen.

See the Pen Fun With ScrollMagic by Blake Tarter (@blaketarter) on CodePen.

Difficulty: expert.

Development time: More than 12 hours

See the Pen Howl’s Moving Castle by Nathan Gordon (@gordonnl) on CodePen.


Please see CoDrops, GreenSock Showcase, and Awwwards for premium examples.

Comments

  1. Ben Read

    Irfan Ahmed Khan

    Designing for animation is the art of creativity, it is not easy to developed an creative design in to animation. Ben you mentioned some perfect example above.

    1. Ben Read

      Ben Read

      Glad you like them, there are some pretty talented people out there, and I still feel like I’ve got a lot to learn from them! I’m sure if you have a bit of time you could learn how – a good place to start might be Rachel Nabor’s mailing list (http://rachelnabors.com) and GreenSock’s website (https://greensock.com).

      Have fun 🙂

Have Your Say

Your email address will not be published. Required fields are marked *