GSAP 3.14 is now free!

1

Hello community!

For all us animators out there, there's some great news. Webflow decided to make GSAP completely free, including commercial projects. Here's the announcement: all the plugins previously paywalled under the Greensocks Club license are now free to use. Take care, and have a great Labor Day!

https://gsap.com/blog/3-13

4 Likes
2

Here is an in-depth look at the new free split text option.

3

Just read Webflow acquired GSAP looks they will add these types of animations into their builder.

1 Like
4

The acquisition occurred some time ago, but the release is now delayed.

5

Yeah Oct '24, I just tried Webflow's builder and man does it suck :smiley:

6

There’s seems to be a clause in the terms of service so it’s not truly free. They are limiting the use of GSAP as the engine for a GUI driven webflow like builder or probably other animation software. So basically you can use it in code. You can use it with some simple GuI helpers but you can’t build a full timeline based application with it. at least that’s how I understand it and there is some ambiguity in there, making it hard to distinguish at what point you’re using too much gooey with the library. That’s pretty Sad but on the other hand, there are other libraries like anime just that don’t have that limitation and are more modern.

7

I've looked on the forums for an example file with morphSVG in a function and haven't found one that has an active link. Can someone please post an example file with a function that is morphing from one SVG to another. I've made transform animations work with gsap, but I can't seem to get the morphSVG to work. Please and thank you!

p.s. I speak python pretty good, but not JS...

8

If you drag a SVG onto the hype stage it is only used as a background image and not actually “present” as addressable markup. Either use the limited Vector tool and its morphing capabilities…. or you can “stuff” some actual SVG code into the inner HTML of a rectangle (Div). Hence, you need todo a workaround to address the shortcomings of Hypes native missing SVG support. Once you have an SVG in place you can use MorphSVG from GSAP.

9

I tried stuffing the SVG…it didn’t work, I double checked the names and made sure the syntax matched. Nothing worked. That’s why I was hoping for a simple project that I could deconstruct to figure out what I was missing…I even went through the SVG markup to look for things that were different there…I spent a lot of time on the gsap site as well…finally I gave up and decided to ask for help🙃…

10

1. Add GSAP and MorphSVGPlugin to Your Project

In your Hype project:

  1. Open your project in Hype.

  2. Go to the Document Inspector (click on the scene name in the left panel).

  3. Click on the Head HTML button.

  4. In the popup, paste the following CDN links:

    <!-- GSAP Core -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.13.0/gsap.min.js"></script>
<!-- MorphSVG Plugin -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.13.0/MorphSVGPlugin.min.js"></script>

  5. After including the scripts, register the plugin in your JavaScript code:

    <script>
   gsap.registerPlugin(MorphSVGPlugin);
</script>

2. Embed Your SVG into a Rectangle Element

To include your SVG:

  1. In Hype, draw a Rectangle Element where you want your SVG to appear.

  2. With the rectangle selected, go to the Element Inspector.

  3. Click on Edit Inner HTML and paste your SVG code. For example:

    <svg id="mySVG" width="120" height="120" viewBox="0 0 120 120">
  <path id="startShape" d="M60,10 L110,110 L10,110 Z"/>
  <path id="endShape" d="M60,60 Q110,10 110,110 Q60,90 10,110 Q10,10 60,60 Z" style="display:none"/>
</svg>

Here, startShape is the initial shape, and endShape is the target shape for the morph. The endShape is hidden initially.

3. Create the Morph Function

Now, let's set up the function that will handle the morphing:

  1. In Hype, go to Resources > Functions.

  2. Create a new function, for example, morphSVG.

  3. Paste the following code:

    function morphSVG(hypeDocument, element, event) {
  // Ensure GSAP and MorphSVGPlugin are loaded
  if (typeof gsap === 'undefined' || typeof MorphSVGPlugin === 'undefined') {
    console.warn('GSAP or MorphSVGPlugin not loaded!');
    return;
  }

  // Register the plugin
  gsap.registerPlugin(MorphSVGPlugin);

  // Perform the morph
  gsap.to("#startShape", {
    duration: 1,
    morphSVG: "#endShape",
    ease: "power1.inOut"
  });
}

4. Trigger the Morph

You can trigger the morphSVG function in several ways:

  • On Scene Load:

    1. Select your scene.
    2. In the Scene Inspector, set On Scene Load to Run JavaScript Function and choose morphSVG.

  • Via Timeline Action:

    1. Open your timeline.
    2. Add a new action at the desired point.
    3. Choose Run JavaScript Function and select morphSVG.

  • On Element Interaction:

    1. Select the element you want to use as a trigger (e.g., a button).
    2. In the Actions Inspector, add an action for the desired event (e.g., On Mouse Click).
    3. Set it to Run JavaScript Function and choose morphSVG.
1 Like
11

Thank you for taking the time to do this! It worked. I think I must have missed registering the plug-in script...

1 Like