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
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.
Hi Irfan, thanks for your comment! Glad it helped 🙂
Ben, I love these animation design. Wish I could learn this art.
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 🙂