--- title: A Guide to Web Animation with GSAP (1 line of JavaScript... description: Learn how to make things move easily on your website with just one line of JavaScript code using GSAP (GreenSock Animation Platform). GSAP animates anything... canonical: https://daily.dev/posts/a-guide-to-web-animation-with-gsap-1-line-of-javascript-code---part-1-alk3ldqbd twitter:card: summary_large_image twitter:site: @dailydotdev og:type: website og:site_name: daily.dev og:title: A Guide to Web Animation with GSAP (1 line of JavaScript code) - Part 1 | daily.dev og:description: Learn how to make things move easily on your website with just one line of JavaScript code using GSAP (GreenSock Animation Platform). GSAP animates anything... og:url: https://daily.dev/posts/a-guide-to-web-animation-with-gsap-1-line-of-javascript-code---part-1-alk3ldqbd og:image: https://api.daily.dev/og/posts/aLK3lDqBD.png og:image:alt: A Guide to Web Animation with GSAP (1 line of JavaScript code) - Part 1 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. # A Guide to Web Animation with GSAP (1 line of JavaScript code) - Part 1 **[Community Picks](https://daily.dev/sources/community)** · [@olawanlejoel](https://daily.dev/olawanlejoel) · 6 min read · 9 upvotes · 0 comments ## Summary Learn how to make things move easily on your website with just one line of JavaScript code using GSAP (GreenSock Animation Platform). GSAP animates anything JavaScript can touch and solves browser inconsistencies with blazing speed. This article introduces the basics of GSAP animation and provides examples of the gsap.to(), gsap.from(), gsap.fromTo(), and gsap.set() methods. ## Full article daily.dev links to this article rather than hosting it. Read it at the original source: --- Tags: [#frontend](https://daily.dev/tags/frontend), [#javascript](https://daily.dev/tags/javascript), [#web-animation](https://daily.dev/tags/web-animation) [View this post on daily.dev](https://daily.dev/posts/a-guide-to-web-animation-with-gsap-1-line-of-javascript-code---part-1-alk3ldqbd) ```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":"A Guide to Web Animation with GSAP (1 line of JavaScript code) - Part 1","url":"https://daily.dev/posts/a-guide-to-web-animation-with-gsap-1-line-of-javascript-code---part-1-alk3ldqbd","mainEntityOfPage":{"@type":"WebPage","@id":"https://daily.dev/posts/a-guide-to-web-animation-with-gsap-1-line-of-javascript-code---part-1-alk3ldqbd"},"datePublished":"2023-04-22T12:26:34.150Z","dateModified":"2026-05-28T02:13:16.509Z","description":"Learn how to make things move easily on your website with just one line of JavaScript code using GSAP (GreenSock Animation Platform). GSAP animates anything...","image":"https://media.daily.dev/image/upload/f_auto,q_auto/v1/posts/036438eda719b64fb7ed3f851b4ceed4?_a=AQAEufR","thumbnailUrl":"https://media.daily.dev/image/upload/f_auto,q_auto/v1/posts/036438eda719b64fb7ed3f851b4ceed4?_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":"Person","name":"Olawanle Joel","url":"https://daily.dev/olawanlejoel","image":"https://avatars.githubusercontent.com/u/57611810?v=4","interactionStatistic":{"@type":"InteractionCounter","interactionType":{"@type":"EndorseAction"},"userInteractionCount":390}},"commentCount":0,"discussionUrl":"https://daily.dev/posts/a-guide-to-web-animation-with-gsap-1-line-of-javascript-code---part-1-alk3ldqbd","interactionStatistic":[{"@type":"InteractionCounter","interactionType":{"@type":"LikeAction"},"userInteractionCount":9},{"@type":"InteractionCounter","interactionType":{"@type":"CommentAction"},"userInteractionCount":0}],"keywords":"frontend,javascript,web-animation","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":"A Guide to Web Animation with GSAP (1 line of JavaScript code) - Part 1"}]} ```