Home Insights Designing For Animation Part 2: Examples
25th January 2017 in Web Design

Designing For Animation Part 2: Examples

Paul Wong-Gibbs

By Paul Wong-Gibbs

Designing For Animation Part 2: Examples

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.

Leave A Comment

  1. 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. 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 🙂

Leave a Reply

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