<?xml version="1.0" encoding="UTF-8"?>
<rss version="2.0" xmlns:atom="http://www.w3.org/2005/Atom" xmlns:dc="http://purl.org/dc/elements/1.1/">
  <channel>
    <title>Forem: Ismail Kitmane</title>
    <description>The latest articles on Forem by Ismail Kitmane (@ismail_kitmane).</description>
    <link>https://forem.com/ismail_kitmane</link>
    <image>
      <url>https://media2.dev.to/dynamic/image/width=90,height=90,fit=cover,gravity=auto,format=auto/https:%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Fuser%2Fprofile_image%2F3162637%2F96ee9712-ff0f-4115-ba50-44c105338292.jpg</url>
      <title>Forem: Ismail Kitmane</title>
      <link>https://forem.com/ismail_kitmane</link>
    </image>
    <atom:link rel="self" type="application/rss+xml" href="https://forem.com/feed/ismail_kitmane"/>
    <language>en</language>
    <item>
      <title>One year of GSAP being completely free, what changed in the web ?</title>
      <dc:creator>Ismail Kitmane</dc:creator>
      <pubDate>Tue, 10 Mar 2026 19:24:10 +0000</pubDate>
      <link>https://forem.com/ismail_kitmane/one-year-of-gsap-being-completely-free-what-changed-in-the-web--3i1n</link>
      <guid>https://forem.com/ismail_kitmane/one-year-of-gsap-being-completely-free-what-changed-in-the-web--3i1n</guid>
      <description>&lt;p&gt;In 2025 something unusual happened in the front end ecosystem.&lt;/p&gt;

&lt;p&gt;The entire &lt;strong&gt;GSAP ecosystem became free&lt;/strong&gt;. Plugins that had been locked behind paid licenses suddenly became accessible to everyone. That included tools like ScrollTrigger, MorphSVG and SplitText.&lt;/p&gt;

&lt;p&gt;For years these tools were mostly used by agencies and studios that could justify the license.&lt;/p&gt;

&lt;p&gt;When the paywall disappeared, many expected a major shift in how web animations are built.&lt;/p&gt;

&lt;p&gt;And in some ways that did happen.&lt;/p&gt;

&lt;p&gt;But not where most people expected.&lt;/p&gt;

&lt;h2&gt;
  
  
  Adoption Actually Did Explode
&lt;/h2&gt;

&lt;p&gt;If you look at npm statistics, GSAP usage increased significantly after the license change.&lt;/p&gt;

&lt;p&gt;It now sits around &lt;strong&gt;2 to 2.1 million downloads per week&lt;/strong&gt;, which is extremely high for a specialized animation engine.&lt;/p&gt;

&lt;p&gt;&lt;a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2F5g1el0is03o81ge9x6l6.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2F5g1el0is03o81ge9x6l6.png" alt="Image of GSAP's page on npmjs.com" width="800" height="454"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;That number alone shows something important.&lt;/p&gt;

&lt;p&gt;Developers are installing it.&lt;/p&gt;

&lt;p&gt;They are experimenting with it.&lt;/p&gt;

&lt;p&gt;They are shipping it in projects.&lt;/p&gt;

&lt;p&gt;But when you browse the web, you rarely encounter sites that fully use what GSAP enables.&lt;/p&gt;

&lt;p&gt;The gap between &lt;strong&gt;installation and visible usage&lt;/strong&gt; is surprisingly large.&lt;/p&gt;

&lt;h2&gt;
  
  
  Most Sites Still Animate the Same Way
&lt;/h2&gt;

&lt;p&gt;Despite the adoption numbers, the majority of websites still animate in a very limited way.&lt;/p&gt;

&lt;p&gt;Typical animation patterns remain simple:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;fade in on scroll&lt;/li&gt;
&lt;li&gt;small translateY entrances&lt;/li&gt;
&lt;li&gt;hover scale effects&lt;/li&gt;
&lt;li&gt;simple page transitions&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;These patterns can be done with CSS alone.&lt;/p&gt;

&lt;p&gt;Which means the full orchestration power of GSAP is rarely used.&lt;/p&gt;

&lt;p&gt;And the most interesting part is that GSAP is not really designed for those small interactions.&lt;/p&gt;

&lt;p&gt;Its real strength appears when animations become &lt;strong&gt;systems&lt;/strong&gt;.&lt;/p&gt;

&lt;h2&gt;
  
  
  GSAP Is Built for Orchestration
&lt;/h2&gt;

&lt;p&gt;Most animation tools think in terms of individual transitions.&lt;/p&gt;

&lt;p&gt;Element appears. Animate.&lt;/p&gt;

&lt;p&gt;User clicks something. Animate.&lt;/p&gt;

&lt;p&gt;GSAP encourages something very different.&lt;/p&gt;

&lt;p&gt;It encourages building &lt;strong&gt;timelines&lt;/strong&gt; where multiple pieces move together.&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight javascript"&gt;&lt;code&gt;&lt;span class="kd"&gt;const&lt;/span&gt; &lt;span class="nx"&gt;tl&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="nx"&gt;gsap&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;timeline&lt;/span&gt;&lt;span class="p"&gt;()&lt;/span&gt;

&lt;span class="nx"&gt;tl&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="k"&gt;from&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="s2"&gt;.hero-title&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt; &lt;span class="na"&gt;y&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="mi"&gt;80&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="na"&gt;opacity&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="mi"&gt;0&lt;/span&gt; &lt;span class="p"&gt;})&lt;/span&gt;
  &lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="k"&gt;from&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="s2"&gt;.hero-illustration&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt; &lt;span class="na"&gt;scale&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="mf"&gt;0.8&lt;/span&gt; &lt;span class="p"&gt;},&lt;/span&gt; &lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="s2"&gt;-=0.3&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt;
  &lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="k"&gt;from&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="s2"&gt;.hero-cta&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt; &lt;span class="na"&gt;opacity&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="mi"&gt;0&lt;/span&gt; &lt;span class="p"&gt;})&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;That structure becomes far more powerful when applied to SVG.&lt;/p&gt;

&lt;p&gt;Complex vector graphics can be broken into pieces and orchestrated like scenes in a film.&lt;/p&gt;

&lt;p&gt;This is where GSAP becomes something closer to a &lt;strong&gt;motion engine&lt;/strong&gt; than an animation helper.&lt;/p&gt;

&lt;h2&gt;
  
  
  The Untapped Power of SVG Storytelling
&lt;/h2&gt;

&lt;p&gt;SVG animation is where GSAP becomes extremely interesting.&lt;/p&gt;

&lt;p&gt;You can animate:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;paths&lt;/li&gt;
&lt;li&gt;shapes&lt;/li&gt;
&lt;li&gt;masks&lt;/li&gt;
&lt;li&gt;morphs&lt;/li&gt;
&lt;li&gt;entire illustrations&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;And synchronize them with scroll or timelines.&lt;/p&gt;

&lt;p&gt;This opens the door to a style of interface that feels closer to &lt;strong&gt;visual storytelling&lt;/strong&gt; than traditional web pages.&lt;/p&gt;

&lt;p&gt;In a world of short attention spans, storytelling matters more than ever.&lt;/p&gt;

&lt;p&gt;Landing pages increasingly behave like narratives.&lt;/p&gt;

&lt;p&gt;A user scrolls and the product reveals itself piece by piece.&lt;/p&gt;

&lt;p&gt;Concepts appear visually instead of through long paragraphs.&lt;/p&gt;

&lt;p&gt;Many of the most memorable product pages follow this pattern.&lt;/p&gt;

&lt;p&gt;But most teams building those experiences are not using pure GSAP + SVG pipelines.&lt;/p&gt;

&lt;h2&gt;
  
  
  The Tools Companies Actually Use
&lt;/h2&gt;

&lt;p&gt;When companies want visual storytelling, they usually choose tools like:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;Rive&lt;/li&gt;
&lt;li&gt;Slider Revolution&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;These tools offer something developers often underestimate.&lt;/p&gt;

&lt;p&gt;A &lt;strong&gt;visual timeline interface&lt;/strong&gt;.&lt;/p&gt;

&lt;p&gt;Designers can build motion without writing code.&lt;/p&gt;

&lt;p&gt;But these tools come with tradeoffs.&lt;/p&gt;

&lt;p&gt;Rive runs its own runtime and rendering engine.&lt;/p&gt;

&lt;p&gt;Slider Revolution produces extremely heavy outputs.&lt;/p&gt;

&lt;p&gt;In both cases the resulting payload can become large and opaque.&lt;/p&gt;

&lt;p&gt;Ironically, the browser already has a perfect rendering format for vector animation.&lt;/p&gt;

&lt;p&gt;SVG.&lt;/p&gt;

&lt;p&gt;And GSAP already knows how to orchestrate it.&lt;/p&gt;

&lt;h2&gt;
  
  
  The Missing Tool
&lt;/h2&gt;

&lt;p&gt;What does not really exist yet is a bridge between those worlds.&lt;/p&gt;

&lt;p&gt;Imagine something like this:&lt;/p&gt;

&lt;p&gt;A &lt;strong&gt;visual animation editor&lt;/strong&gt; similar to Rive.&lt;/p&gt;

&lt;p&gt;But instead of exporting a proprietary runtime, it exports:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;pure SVG&lt;/li&gt;
&lt;li&gt;GSAP timelines&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;The output would be transparent.&lt;/p&gt;

&lt;p&gt;Readable.&lt;/p&gt;

&lt;p&gt;Native to the web platform.&lt;/p&gt;

&lt;p&gt;Developers could tweak the timeline directly in code.&lt;/p&gt;

&lt;p&gt;Designers could build the animation visually.&lt;/p&gt;

&lt;p&gt;Right now the ecosystem is split between:&lt;/p&gt;

&lt;p&gt;developer driven motion systems&lt;br&gt;
and&lt;br&gt;
designer driven animation tools&lt;/p&gt;

&lt;p&gt;A graphical timeline editor that outputs &lt;strong&gt;GSAP + SVG&lt;/strong&gt; could connect both worlds.&lt;/p&gt;

&lt;h2&gt;
  
  
  Why This Matters
&lt;/h2&gt;

&lt;p&gt;Landing pages are evolving.&lt;/p&gt;

&lt;p&gt;Static pages are less effective in environments where attention spans are measured in seconds.&lt;/p&gt;

&lt;p&gt;Motion driven storytelling is becoming one of the most powerful ways to communicate complex ideas quickly.&lt;/p&gt;

&lt;p&gt;Yet the tools used to create those experiences are often heavier than necessary.&lt;/p&gt;

&lt;p&gt;The web already has:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;SVG for vector graphics&lt;/li&gt;
&lt;li&gt;GSAP for orchestration&lt;/li&gt;
&lt;li&gt;modern browsers capable of smooth animation&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;What it lacks is the &lt;strong&gt;design interface layer&lt;/strong&gt; that makes these systems accessible.&lt;/p&gt;

&lt;h2&gt;
  
  
  One Year Later
&lt;/h2&gt;

&lt;p&gt;Almost a year after GSAP became free, adoption numbers show strong developer interest.&lt;/p&gt;

&lt;p&gt;But the web itself still looks mostly the same.&lt;/p&gt;

&lt;p&gt;The real potential of orchestrated SVG storytelling is still largely untapped.&lt;/p&gt;

&lt;p&gt;Which raises an interesting question.&lt;/p&gt;

&lt;p&gt;If the engine already exists, and millions of developers already have it installed…&lt;/p&gt;

&lt;p&gt;maybe the next big shift in web animation will not come from another library.&lt;/p&gt;

&lt;p&gt;Maybe it will come from &lt;strong&gt;the tool that makes GSAP visual&lt;/strong&gt;.&lt;/p&gt;

</description>
      <category>webdev</category>
      <category>javascript</category>
      <category>animation</category>
      <category>gsap</category>
    </item>
  </channel>
</rss>
