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

There are currently no comments on this article. Why don't you add the first?

Have Your Say

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