--- title: Let's get animating! | daily.dev description: 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... canonical: https://daily.dev/posts/let-s-get-animating--rlphqpwtz twitter:card: summary_large_image twitter:site: @dailydotdev og:type: website og:site_name: daily.dev og:title: Let's get animating! | daily.dev og:description: 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... og:url: https://daily.dev/posts/let-s-get-animating--rlphqpwtz og:image: https://api.daily.dev/og/posts/rlPhQpwTZ.png og:image:alt: Let's get animating! og:image:width: 1200 og:image:height: 630 og:locale: en --- > ## Documentation Index > Fetch the complete documentation index at: https://daily.dev/llms.txt > Use this file to discover all available pages before exploring further. # Let's get animating! **[Community Picks](https://daily.dev/sources/community)** · 6 min read · 613 upvotes · 25 comments ## Summary 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. ## Full article daily.dev links to this article rather than hosting it. Read it at the original source: ## Community discussion Top comments from developers on daily.dev. **@carpye** · 5 upvotes > 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 -> 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. **@aaronsharon** · 2 upvotes > Great. Would try this. **@rvdesignstudio** · 2 upvotes > Nice article. **@usmras** · 2 upvotes > want to learn this ASAP, after completing JavaScript **@kuro091** · 2 upvotes > Oh glad to see they're updating their docs. Really useful framework but learning it can be difficult ## Similar posts on daily.dev - [Don’t just attend KubeCon \+ CloudNativeCon, Merge Forward your experience\!](https://daily.dev/posts/don-t-just-attend-kubecon-cloudnativecon-merge-forward-your-experience--l0rpp73x8) · CNCF · 1 upvotes · 0 comments - [Announcing H2 2026 KCDs](https://daily.dev/posts/announcing-h2-2026-kcds-m96goajm1) · CNCF · 1 upvotes · 0 comments - [Two months of Open Community Groups](https://daily.dev/posts/two-months-of-open-community-groups-asf52zhbs) · CNCF · 0 upvotes · 0 comments - [CNCF Unveils Schedule for KubeCon \+ CloudNativeCon Europe 2026](https://daily.dev/posts/cncf-unveils-schedule-for-kubecon-cloudnativecon-europe-2026-ikhcoa5cb) · CNCF · 2 upvotes · 0 comments - [CNCF Debuts KubeCon \+ CloudNativeCon Japan 2026 Schedule](https://daily.dev/posts/cncf-debuts-kubecon-cloudnativecon-japan-2026-schedule-xp5pyudub) · CNCF · 1 upvotes · 0 comments --- Tags: [#webdev](https://daily.dev/tags/webdev), [#javascript](https://daily.dev/tags/javascript), [#frontend](https://daily.dev/tags/frontend) [View this post on daily.dev](https://daily.dev/posts/let-s-get-animating--rlphqpwtz) ```json {"@context":"https://schema.org","@graph":[{"@type":"Organization","@id":"https://daily.dev/#organization","name":"daily.dev","url":"https://daily.dev","logo":{"@type":"ImageObject","url":"https://daily.dev/apple-touch-icon.png","width":180,"height":180},"sameAs":["https://twitter.com/dailydotdev","https://github.com/dailydotdev","https://www.linkedin.com/company/daily-dev-ltd"]},{"@type":"WebSite","@id":"https://daily.dev/#website","url":"https://daily.dev","name":"daily.dev","publisher":{"@id":"https://daily.dev/#organization"},"potentialAction":{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https://daily.dev/search?q={search_term_string}"},"query-input":"required name=search_term_string"}}]} {"@context":"https://schema.org","@type":"TechArticle","headline":"Let's get animating!","url":"https://daily.dev/posts/let-s-get-animating--rlphqpwtz","mainEntityOfPage":{"@type":"WebPage","@id":"https://daily.dev/posts/let-s-get-animating--rlphqpwtz"},"datePublished":"2024-02-17T12:34:39.290Z","dateModified":"2024-05-09T08:22:04.995Z","description":"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...","image":"https://media.daily.dev/image/upload/f_auto,q_auto/v1/posts/806ad2e5f4bc4d196052936fd897f6e7?_a=AQAEufR","thumbnailUrl":"https://media.daily.dev/image/upload/f_auto,q_auto/v1/posts/806ad2e5f4bc4d196052936fd897f6e7?_a=AQAEufR","isAccessibleForFree":true,"articleSection":"Community Picks","inLanguage":"en","publisher":{"@type":"Organization","name":"daily.dev","url":"https://daily.dev","logo":{"@type":"ImageObject","url":"https://daily.dev/apple-touch-icon.png","width":180,"height":180}},"author":{"@type":"Organization","name":"Community Picks","logo":"https://media.daily.dev/image/upload/t_logo,f_auto/v1655817725/logos/community","url":"https://daily.dev/sources/community"},"commentCount":25,"discussionUrl":"https://daily.dev/posts/let-s-get-animating--rlphqpwtz","interactionStatistic":[{"@type":"InteractionCounter","interactionType":{"@type":"LikeAction"},"userInteractionCount":613},{"@type":"InteractionCounter","interactionType":{"@type":"CommentAction"},"userInteractionCount":25}],"keywords":"webdev,javascript,frontend","timeRequired":"PT6M"} {"@context":"https://schema.org","@type":"BreadcrumbList","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https://daily.dev"},{"@type":"ListItem","position":2,"name":"Community Picks","item":"https://daily.dev/sources/community"},{"@type":"ListItem","position":3,"name":"Let's get animating!"}]} {"@context":"https://schema.org","@type":"WebPage","@id":"https://daily.dev/posts/let-s-get-animating--rlphqpwtz","comment":[{"@type":"Comment","text":"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 -> 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.","datePublished":"2024-02-19T16:15:24.175Z","url":"https://daily.dev/posts/rlPhQpwTZ#c-XMNoNJVqm","author":{"@type":"Person","name":"Kacper Kozłowski","url":"https://daily.dev/carpye","image":"https://avatars.githubusercontent.com/u/93837654?v=4"},"interactionStatistic":{"@type":"InteractionCounter","interactionType":{"@type":"LikeAction"},"userInteractionCount":5}},{"@type":"Comment","text":"Great. Would try this.","datePublished":"2024-02-19T08:26:22.139Z","url":"https://daily.dev/posts/rlPhQpwTZ#c-E29RoF3mZ","author":{"@type":"Person","name":"Aaron Sharon Dsouza","url":"https://daily.dev/aaronsharon","image":"https://lh3.googleusercontent.com/a/ACg8ocJDgMU6957r4DFPJyngenFm_S_YIgnnl0rzUBD3I2KHOTo=s96-c"},"interactionStatistic":{"@type":"InteractionCounter","interactionType":{"@type":"LikeAction"},"userInteractionCount":2}},{"@type":"Comment","text":"Nice article.","datePublished":"2024-02-18T10:06:59.331Z","url":"https://daily.dev/posts/rlPhQpwTZ#c-NXHQ7KCaH","author":{"@type":"Person","name":"Reinier","url":"https://daily.dev/rvdesignstudio","image":"https://media.daily.dev/image/upload/s--Kz1FdzK_--/f_auto/v1770580056/avatars/avatar_ErgQ3AuOe?_a=BAMAMiiu0"},"interactionStatistic":{"@type":"InteractionCounter","interactionType":{"@type":"LikeAction"},"userInteractionCount":2}},{"@type":"Comment","text":"want to learn this ASAP, after completing JavaScript","datePublished":"2024-02-19T05:54:36.136Z","url":"https://daily.dev/posts/rlPhQpwTZ#c-Qt5gh4caT","author":{"@type":"Person","name":"Usman","url":"https://daily.dev/usmras","image":"https://media.daily.dev/image/upload/s--EsLpehPU--/f_auto,q_auto/v1698192507/avatars/avatar_dLh42ZFuF"},"interactionStatistic":{"@type":"InteractionCounter","interactionType":{"@type":"LikeAction"},"userInteractionCount":2}},{"@type":"Comment","text":"Oh glad to see they’re updating their docs. Really useful framework but learning it can be difficult","datePublished":"2024-02-19T12:37:10.447Z","url":"https://daily.dev/posts/rlPhQpwTZ#c-CrbDbvVIk","author":{"@type":"Person","name":"Công Minh Lưu (Kuro091)","url":"https://daily.dev/kuro091","image":"https://lh3.googleusercontent.com/a/ALm5wu3vynjoRgUa07Nw4VauVFCX83km-Y9De7o6qnEX3A=s96-c"},"interactionStatistic":{"@type":"InteractionCounter","interactionType":{"@type":"LikeAction"},"userInteractionCount":2}}]} ```