Archive for the ‘GSAP’ Category

GreenSock for Beginners: a Web Animation Tutorial (Part 1)

Posted on: No Comments
My aim in this article is to give you a thorough introduction to GreenSock, also known as GSAP (GreenSock Animation Platform), a super performant, professional-grade HTML5 animation engine for the modern web. This is the fourth article in the series B...

Animating Bootstrap Carousels with the GSAP Animation Library

Posted on: No Comments
In a previous post, I covered the process of converting a Bootstrap carousel into a full screen carousel with a random initial image. Today, I'll build on that and show you how to use GSAP (GreenSock Animation Platform), a popular JavaScript library, f...

Cars with Broken Windshield Wipers

Posted on: No Comments
I was stopped at an intersection the other day. It was raining. The road on the other side sloped upwards, so I could see the stopped cars on the other side of the road kind of stadium-seating style. I could see all their windshield wipers going all at...

How to Create an Interactive Animated SVG Drum Kit

View demo Download source Today we’re going to create an animated SVG drum kit that can be played by clicking, tapping or using your keyboard, and that can also be programmed to play by itself! We’ll be making use of GreenSock’s Twee...

Elastic Progress

Posted on: No Comments
View demo Download source Today we’d like to share an interesting progress button effect with you. The effect is based on a very nice Dribbble shot called “Download” by xjw. The button starts as an icon with an arrow and once it̵...

Creating a “Jump Loader” Animation with SVG and GSAP

Posted on: No Comments
View demo Download source In this tutorial you will learn how to create a playful Jump Loader animation using SVG and GSAP, the animation platform by GreenSock. The Jump Loader effect relies on a very useful plugin, the DrawSVGPlugin, which is a premi...