{"id":228,"date":"2024-08-03T02:22:52","date_gmt":"2024-08-03T02:22:52","guid":{"rendered":"https:\/\/codebox.keyframetechsolution.com\/?p=228"},"modified":"2025-02-08T15:23:16","modified_gmt":"2025-02-08T15:23:16","slug":"gsap-scrolltrigger-animation","status":"publish","type":"post","link":"https:\/\/codebox.keyframetechsolution.com\/gsap-scrolltrigger-animation\/","title":{"rendered":"How to Create ScrollTrigger Animations with GSAP (Source Code)"},"content":{"rendered":"<p>Using scroll-triggered animations can make websites more engaging and help improve user experience. It adds interactivity and visual appeal, making the website look more dynamic.<\/p>\n<p>In this guide, you\u2019ll learn how to create scroll-triggered animations with GSAP, enabling smooth, responsive, and engaging effects on a website.<\/p>\n<p>\u2705 <strong>Watch Live Preview<\/strong> \ud83d\udc49\ud83d\udc49<\/p>\n<p><iframe title=\"YouTube video player\" src=\"https:\/\/www.youtube.com\/embed\/YW1_iq5ujxs?si=YbNZBbQFVZMpwmxU\" width=\"100%\" height=\"450\" frameborder=\"0\" allowfullscreen=\"allowfullscreen\" data-mce-fragment=\"1\"><\/iframe><\/p>\n<p><a href=\"#conclusion\">Click Here to Download the Code<\/a><\/p>\n<h2>What is GSAP?<\/h2>\n<p>GSAP (<a href=\"https:\/\/gsap.com\/\" rel=\"nofollow noopener\" target=\"_blank\">GreenSock Animation Platform<\/a>) is a powerful, flexible, and high-performance library that allows developers to create complex animations with ease. It stands out for its fast execution, universal browser support, and easy-to-learn syntax, making it popular with web developers.<\/p>\n<h2>What is ScrollTrigger?<\/h2>\n<p>ScrollTrigger is a plugin within the GSAP library that is designed to create animations triggered by scroll events on a webpage. It can be used for a wide range of scroll-based effects, such as fading in elements, scaling up images, or even creating parallax scrolling effects. It allows us to control the timing and behavior of animations based on the user&#8217;s scroll position.<\/p>\n<h3>Why Use This?<\/h3>\n<p>It offers several advantages for websites:<\/p>\n<ul>\n<li><strong>Enhanced User Experience:<\/strong> It grabs users\u2019 attention, providing a more engaging and interactive experience.<\/li>\n<li><strong>Highlight Important Content:<\/strong> It helps draw attention to specific sections, images, or text as users scroll.<\/li>\n<li><strong>Responsive:<\/strong> It works well on mobile, desktop, and tablet devices, adapting to different screen sizes.<\/li>\n<li><strong>Improved Aesthetics:<\/strong> It can be visually stunning, adding a professional touch to your website.<\/li>\n<\/ul>\n<p><strong>Similar Posts:<\/strong> <a href=\"https:\/\/codebox.keyframetechsolution.com\/scrolltrigger-canvas-animations\/\">How to Build Dynamic Canvas Animations with GSAP ScrollTrigger<\/a><\/p>\n<h3>Getting Started<\/h3>\n<p>Here\u2019s a simple overview of how to get started:<\/p>\n<h4>Set Up Project<\/h4>\n<p>Start by creating a folder on your computer for your project. Inside this folder, create the following files:<\/p>\n<ul>\n<li><strong>index.html<\/strong><\/li>\n<li><strong>style.css<\/strong><\/li>\n<li><strong>script.js<\/strong><\/li>\n<\/ul>\n<p><strong>Include GSAP Library:<\/strong> First, add the GSAP library to your project by either downloading the files or including them via a CDN (<a href=\"https:\/\/www.cloudflare.com\/en-gb\/learning\/cdn\/what-is-a-cdn\/\" rel=\"nofollow noopener\" target=\"_blank\">Content Delivery Network<\/a>).<\/p>\n<h2><strong><span data-preserver-spaces=\"true\">Source Code<\/span><\/strong><\/h2>\n<h3><strong><span data-preserver-spaces=\"true\">HTML Code Structure<\/span><\/strong><\/h3>\n<div class=\"code-container\">\n<div class=\"toolbar\">\n<div class=\"actions\">\n        <span><\/span><br \/>\n        <span class=\"yellow\"><\/span><br \/>\n        <span class=\"green\"><\/span>\n      <\/div>\n<div class=\"title\">index.html<\/div>\n<\/div>\n<div class=\"code-content\">\n<pre><code class=\"language-markup\">\r\n&lt;!DOCTYPE html&gt;\r\n&lt;html lang=\"en\"&gt;\r\n&lt;head&gt;\r\n  &lt;meta charset=\"UTF-8\"&gt;\r\n  &lt;meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\"&gt;\r\n  &lt;title&gt;ScrollTrigger Animations with GSAP&lt;\/title&gt;\r\n  &lt;link rel=\"stylesheet\" href=\"style.css\"&gt;\r\n  &lt;link rel=\"stylesheet\" href=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/font-awesome\/4.7.0\/css\/font-awesome.min.css\"&gt;\r\n  &lt;script src=\"https:\/\/code.jquery.com\/jquery-3.5.1.min.js\"&gt;&lt;\/script&gt;\r\n  &lt;script src=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/typed.js\/2.0.11\/typed.min.js\"&gt;&lt;\/script&gt;\r\n  &lt;script src=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/waypoints\/4.0.1\/jquery.waypoints.min.js\"&gt;&lt;\/script&gt;\r\n  &lt;link rel=\"stylesheet\" href=\"https:\/\/fonts.googleapis.com\/css2?family=Poppins:wght@400;500;600;700&amp;family=Ubuntu:wght@400;500;700&amp;display=swap\"&gt;\r\n&lt;\/head&gt;\r\n&lt;body&gt;\r\n\r\n&lt;!-- CODE --&gt;\r\n\r\n&lt;script src=\"https:\/\/unpkg.co\/gsap@3\/dist\/gsap.min.js\"&gt;&lt;\/script&gt;\r\n&lt;script src=\"https:\/\/unpkg.com\/gsap@3\/dist\/ScrollTrigger.min.js\"&gt;&lt;\/script&gt;\r\n&lt;script src=\"script.js\"&gt;&lt;\/script&gt;\r\n&lt;\/body&gt;\r\n&lt;\/html&gt;\r\n<\/code><\/pre>\n<\/div>\n<\/div>\n<h3>CSS Code Structure<\/h3>\n<div class=\"code-container\">\n<div class=\"toolbar\">\n<div class=\"actions\">\n        <span><\/span><br \/>\n        <span class=\"yellow\"><\/span><br \/>\n        <span class=\"green\"><\/span>\n      <\/div>\n<div class=\"title\">style.css<\/div>\n<\/div>\n<div class=\"code-content\">\n<pre><code class=\"language-markup\">\r\n&lt; \/* Your CSS code here *\/ &gt;\r\n&lt; * { &gt;\r\n\r\n&lt; margin: 0; &gt;\r\n&lt; padding: 0 &gt;\r\n&lt; box-sizing: border-box; &gt;\r\n&lt;     text-decoration: none; &gt;\r\n&lt;     } &gt;\r\n      <\/code><\/pre>\n<\/div>\n<\/div>\n<h3>JavaScript Code Structure<\/h3>\n<div class=\"code-container\">\n<div class=\"toolbar\">\n<div class=\"actions\">\n        <span><\/span><br \/>\n        <span class=\"yellow\"><\/span><br \/>\n        <span class=\"green\"><\/span>\n      <\/div>\n<div class=\"title\">script.js<\/div>\n<\/div>\n<div class=\"code-content\">\n<pre><code class=\"language-markup\">\r\n&lt; \/\/ JavaScript Code &gt;\r\n      <\/code><\/pre>\n<\/div>\n<\/div>\n<h2>Best Approaches to Follow<\/h2>\n<ul>\n<li><strong>Use Markers for Debugging: <\/strong>It provides markers\u2014a useful option for debugging by showing visual indicators on the screen to signify when the trigger points are reached.<\/li>\n<li><strong>Use Scrub for Smoother Animations:<\/strong> The scrub option syncs the animation with the user&#8217;s scroll. It creates a smooth, fluid effect as the user scrolls.<\/li>\n<li><strong>Make Responsive:<\/strong> Make sure your animations look good on all devices. Use CSS media queries to adjust trigger points and animations for different screen sizes.<\/li>\n<li><strong>Use toggleActions for More Control:<\/strong> The toggleActions property gives you more control over the animation when entering and leaving the viewport.<\/li>\n<\/ul>\n<h2 id='conclusion'>Conclusion<\/h2>\n<p>Using GSAP to create scroll-triggered animations is the best way to enhance your website&#8217;s engagement and interactivity. The process is straightforward, and once you get the hang of it, you can create from simple fades to complex parallax effects.<\/p>\n<p>By combining these, you can enhance user experience, keep your audience engaged, and give your website a modern, dynamic feel.<\/p>\n<p>Whether you&#8217;re building a portfolio, a business website, or a blog, incorporating scroll-triggered animations will heighten your design and impress visitors.<\/p>\n<p><strong><i class=\"fa fa-download\" style=\"color: #046bd2;\"><\/i> 18 people bought this<\/strong><\/p>\n<p><strong>Grab it Now for Just <i class=\"fa fa-rupee\" style=\"color:#046bd2;\"><\/i><span style=\"color:#046bd2;\">30<\/span><\/strong><\/p>\n","protected":false},"excerpt":{"rendered":"<p>Using scroll-triggered animations can make websites more engaging and help improve user experience. It adds interactivity and visual appeal, making [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":230,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"site-sidebar-layout":"default","site-content-layout":"","ast-site-content-layout":"default","site-content-style":"default","site-sidebar-style":"default","ast-global-header-display":"","ast-banner-title-visibility":"","ast-main-header-display":"","ast-hfb-above-header-display":"","ast-hfb-below-header-display":"","ast-hfb-mobile-header-display":"","site-post-title":"","ast-breadcrumbs-content":"","ast-featured-img":"","footer-sml-layout":"","theme-transparent-header-meta":"default","adv-header-id-meta":"","stick-header-meta":"","header-above-stick-meta":"","header-main-stick-meta":"","header-below-stick-meta":"","astra-migrate-meta-layouts":"set","ast-page-background-enabled":"default","ast-page-background-meta":{"desktop":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-gradient":""},"tablet":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-gradient":""},"mobile":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-gradient":""}},"ast-content-background-meta":{"desktop":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-gradient":""},"tablet":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-gradient":""},"mobile":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-gradient":""}},"footnotes":""},"categories":[350],"tags":[337,335,336,339,338],"class_list":["post-228","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-gsap-animation","tag-gsap-scroll-smoother","tag-gsap-scrolltrigger-animation","tag-gsap-scrolltrigger-examples","tag-scrollsmoother","tag-scrolltrigger"],"acf":[],"_links":{"self":[{"href":"https:\/\/codebox.keyframetechsolution.com\/wp-json\/wp\/v2\/posts\/228","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/codebox.keyframetechsolution.com\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/codebox.keyframetechsolution.com\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/codebox.keyframetechsolution.com\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/codebox.keyframetechsolution.com\/wp-json\/wp\/v2\/comments?post=228"}],"version-history":[{"count":27,"href":"https:\/\/codebox.keyframetechsolution.com\/wp-json\/wp\/v2\/posts\/228\/revisions"}],"predecessor-version":[{"id":1431,"href":"https:\/\/codebox.keyframetechsolution.com\/wp-json\/wp\/v2\/posts\/228\/revisions\/1431"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/codebox.keyframetechsolution.com\/wp-json\/wp\/v2\/media\/230"}],"wp:attachment":[{"href":"https:\/\/codebox.keyframetechsolution.com\/wp-json\/wp\/v2\/media?parent=228"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/codebox.keyframetechsolution.com\/wp-json\/wp\/v2\/categories?post=228"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/codebox.keyframetechsolution.com\/wp-json\/wp\/v2\/tags?post=228"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}