Introducing Webflow Interactions, powered by GSAP

<p id="">We’ve been busy since acquiring <a href="<https://webflow.com/blog/webflow-acquires-gsap>" id="">GreenSock Animation Platform (GSAP)</a> last fall. At the end of April, we made <a href="<https://webflow.com/blog/gsap-becomes-free>" id="">GSAP, the leading animation engine on the web, 100% free</a> for the entire web community. Together, we’ve been hard at work taking Webflow’s native interactions solution to the next level. In fact, you may have seen a sneak preview in this <a href="<https://youtu.be/2TYLsY-FhF8>" id="">video</a>. &nbsp;</p><p id="">Today, we are thrilled to introduce the newest version of Webflow Interactions, powered by GSAP.&nbsp;</p><div data-rt-embed-type='true'><figure style="max-width: 100%;">

  <div style="position: relative; width: 100%;">

    <!--video (update src to change video)-->

    <video style="width: 100%;" src="<https://dhygzobemt712.cloudfront.net/Web/interactions/07-2025-videos/ix3-joseph-berry-short.mp4>" muted autoplay loop playsinline></video>

    <!--play/pause button-->

    <a video-playback="button" role="button" href="#" class="bg-video_playback-btn w-inline-block">

      <div video-playback="pause" class="bg-video_playback-btn-state cc-pause">

        <div class="bg-video_playback-btn-icon w-embed">

          <svg xmlns="<http://www.w3.org/2000/svg>" viewBox="0 0 24 24" fill="currentColor">

            <title>Pause</title>

            <path d="M8 7H11V17H8zM13 7H16V17H13z"></path>

          </svg>

        </div>

      </div>

      <div video-playback="play" class="bg-video_playback-btn-state cc-play">

        <div class="bg-video_playback-btn-icon w-embed">

          <svg xmlns="<http://www.w3.org/2000/svg>" viewBox="0 0 24 24" fill="currentColor">

            <title>Play</title>

            <path d="M7 6L7 18 17 12z"></path>

          </svg>

        </div>

      </div>

    </a>

  </div>

  <!--caption text

 <figcaption style="margin-top: 1rem;"></figcaption>-->

</figure></div><div data-rt-embed-type='true'><!-- Scripts for inline video functionality -->

<script>

  window.addEventListener('load', async () => {

    // Get all buttons with the attribute 'video-playback="button"'

    const buttons = document.querySelectorAll('a[video-playback="button"]');

​

    // Add click event listeners to each button

    buttons.forEach(button => {

      button.addEventListener('click', (event) => {

        event.preventDefault(); // Prevent default action of the button

​

        // Find the parent element and then the video within the same container

        const video = button.parentNode.querySelector('video');

​

        // Toggle play/pause based on the video's current state

        if (video.paused) {

          video.play();

          button.querySelector('[video-playback="pause"]').style.display = 'block';

          button.querySelector('[video-playback="play"]').style.display = 'none';

        } else {

          video.pause();

          button.querySelector('[video-playback="play"]').style.display = 'block';

          button.querySelector('[video-playback="pause"]').style.display = 'none';

        }

      });

    });

​

    // fallback: show controls if autoplay fails

    let video = document.querySelector('video[muted][autoplay]');

    try {

      await video.play();

    } catch (err) {

      video.controls = true;

    }

  });

</script></div><p id="">With this initial release, we’re unlocking:</p><ul id=""><li id="">The ability to craft sophisticated and performant animations powered by GSAP — without writing a single line of code. This includes leveraging GSAP favorites like SplitText, Staggers, and ScrollTrigger.</li><li id="">A completely reimagined workflow featuring a horizontal timeline and purpose-built controls that give designers and developers surgical precision over their animations — without compromising speed.&nbsp;</li><li id="">The ability to reuse interactions across your entire site, eliminating repetitive work and driving consistency.&nbsp;</li><li id="">…with so much more coming soon!</li></ul><p id="">Interactions with GSAP is now available to all Webflow users – at no additional cost. To get started, check out the <strong id="">Versions</strong> dropdown at the bottom of your<strong id=""> Interactions panel</strong> and change the version to <strong id="">Interactions with GSAP (new)</strong>.&nbsp;</p><p id="">At this time, the previous version of interactions will remain the default, and is labeled <strong id="">Classic Interactions</strong> in your version dropdown. However, you can switch between the two versions freely.</p><p id=""><a href="<https://webflow.com/blog/webflow-interactions-with-gsap>" target="_blank">To learn more, read the full launch announcemen</a>t or check out our <a href="<https://help.webflow.com/hc/en-us/articles/33961310025107-Intro-to-Interactions>" target="_blank" id="">Help Center</a>.</p>