Submit my project

Your next move.

Follow the web agency Blacksmith on LinkedIn

You have a great idea or project to bring to life?

Our web development and web design agency is ready to create it!

Blog

WhatisGSAPandhowcanIuseittocreateanimations?

19.12.225MIN
JSNextReactUIUX
Jean-François Arnaud
Jean-François ArnaudCEO of Blacksmith

What is GSAP

GSAP (GreenSock Animation Platform) is a JavaScript library that makes creating animations easy and efficient.

It offers a wide range of features to animate all types of content, be it text, images, vector shapes, etc.

GSAP offers many features to animate elements in a more advanced way, such as the ability to specify speed curves, trigger animations in response to page events, or even create complex animation sequences.

What is GSAP

How can I use GSAP to create animations?

To use GSAP, you must first include the library's JavaScript file on your web page. You can do this statically by uploading the file to your server and including it in your page via a <script> tag, or dynamically by using a load URL like this:

<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.6.1/gsap.min.js"></script>

Once the library is included, you can start using GSAP to animate your HTML elements. Here is a simple example that uses GSAP to animate a <div> element from red to green in 2 seconds:

// Select the element to animate

const element = document. querySelector('#myDiv');

// Create an animation using GSAP's animate() function gsap.to(element, { duration: 2, // animation duration in seconds backgroundColor: '#00ff00' // CSS property to animate });

You can also use GSAP to animate multiple elements at the same time, using a similar syntax:

const elements = document.querySelectorAll('.myElements'); gsap.to(elements, { duration: 2, x: '100px', // move elements right 100px

rotate: '360deg' // rotate the elements 360 degrees });

To know more about GSAP, I recommend that you consult the official documentation : https://greensock.com/docs/

Articles of the same category

Contact
Ready to workwith us ?
Click to copy