Welcome! In this article we're going to cover GSAP's core fundamentals and animate some HTML elements. 🥳

Anja Petry

HTML

Community Picks is a section on daily.dev where our community members share the most interesting and valuable content they've discovered online. From insightful articles to handy tools, every post is a gem curated by our dedicated coomunity. To contribute to Community Picks, you need to have at least 250 reputation points, ensuring that only active and trusted members can share their finds.

Community Picks

This article covers GSAP's core fundamentals and provides an introduction to animating HTML elements using GSAP. It explains the different types of tweens and the properties that can be animated. The article also emphasizes the use of transforms and opacity for smoother animations.

Let's get animating!

The hardest thing about animations is to be creative with them and have ideas. Sure, simple ease-in animations for cards or page sections are for example pretty easy and generic - opacity: 0 -&gt; 1 and position change. But for better-looking animations, you usually need to come up with your ideas. Also, animations are often used with SVGs so you need to know how to operate on them. Despite that, I think it’s safe to say that even simple animations can improve the look of every website even if you’re not a great designer.

want to learn this ASAP, after completing JavaScript

Oh glad to see they’re updating their docs. Really useful framework but learning it can be difficult