Does GSAP work inside Duda?

Options
Matt
Matt Member Posts: 3

I've spend the last few hours trying to make a single GSAP animation work in Duda and nothing is working. I'm importing the CDN, I've got my scripts, I don't understand what the issue is.

Does anyone know is GSAP even works in Duda?

Answers

  • Shawn
    Shawn Member Posts: 18 mod
    Options

    Are you loading the GSAP CDN script with the load script function? That code could look something like this:

    <script>
    dmAPI.loadScript('https://cdn.jsdelivr.net/npm/gsap@3.12.5/dist/gsap.min.js', function() { 
      // My really cool GSAP animation
    });
    </script>
    

    Or, if you wanted to import multiple libraries, like their Flip library, then maybe:

    <script>
    dmAPI.loadScript('https://cdn.jsdelivr.net/npm/gsap@3.12.5/dist/gsap.min.js', function() { 
      dmAPI.loadScript('https://cdn.jsdelivr.net/npm/gsap@3.12.5/dist/gsap.min.js', function() {  
        // My really really cool GSAP animation
      }
    });
    </script>
    

  • Matt
    Matt Member Posts: 3
    Options

    HI Shawn,

    No, I've been putting them in the "body-end.html" file like this:

    <script src="https://unpkg.com/split-type"></script><script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.11.2/gsap.min.js"></script>

    <script>

    const myText = new SplitType('#my-text')

    gsap.to('.char', {
    y: 0,
    stagger: 0.05,
    delay: 0.2,
    duration: .1
    })

    </script>

    I've tried the way you suggested and it still doesn't seem to be working. I'm trying to make this simple codepen tutorial work, so I could build upon it but I can't, am I doing somethign wrong?

  • Shawn
    Shawn Member Posts: 18 mod
    Options

    Thank you so much for the codepen @Matt! I've put together a working example for you at https://gsap-example.multiscreensite.com. I used Editor 2.0 for this, but it should work in a similar way for any editor.

    1 - Place an HTML Widget

    You need to place the text you want to edit somewhere on your page. I'd recommend using the HTML widget for this, with the following code.

    <div class="container">
    <h1 id="my-text">
    woah.text
    </h1>
    </div>

    2 - Add CSS

    GSAP uses dynamically modified CSS to create animations, so it's important that you include it. I added the following CSS to my HTML widget, but you can add it to the page's CSS file in Dev Mode as well.

    *#dm .dmInner div.u_1802578153 h1 {
    font-size: 7rem;
    text-transform: uppercase;
    font-family: 'Bebas Neue';
    clip-path: polygon(0 0, 100% 0, 100% 100%, 0% 100%);
    line-height: 5.9rem;
    } *#dm .dmInner div.u_1802578153 .char {
    transform: translateY(115px);
    transition: transform .5s;
    } *#dm .dmInner div.u_1802578153 .container
    {
    display:grid !important;
    place-content:center !important;
    height:80vh !important;
    }

    Note that your HTML Widget's class will likely be different from mine, so don't copy and paste that directly. Mine is u_1802578153 in the above example.

    3 - Add the JavaScript

    My live site didn't include the Duda API or jQuery, so I did have to import jQuery into the head-section.html file in Dev Mode. That code looks like this.

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
    

    Then, in the body-end.html file I added the following code.

    <script>
    $.when(
    $.getScript("https://unpkg.com/split-type"),
    $.getScript("https://cdnjs.cloudflare.com/ajax/libs/gsap/3.11.2/gsap.min.js"),
    $.Deferred(function( deferred ){
    $( deferred.resolve );
    })
    ).done(function() {
    const myText = new SplitType('#my-text');
    $('#my-text').on( "mouseenter", function() {
    gsap.to('.char', {
    y: 0,
    stagger: 0.05,
    delay: 0.2,
    duration: .1
    })
    });
    });
    </script>

    Mine is a little different form the CodePen in that I chose to activate it on Hover so that it's easier to see in the example. To quickly break down what's happening here, I'm using jQuery to import both scripts then, once the scripts are ready to go, I'm calling the SplitType and GSAP functions.

    Key points

    • Make sure you have all of your CSS classes
    • Make sure your scripts are fully loaded before you try to run any functions. Duda's dmAPI.loadScript or jQuery's $.getScript functions do just that.
    • Make sure you have the HTML widget on your site with the text you want to animate.

    Hope that helps!

  • Matt
    Matt Member Posts: 3
    Options

    Thanks for the help. I tried doing exactly what you did. I'm not sure why it's not working on this site, but the screen just goes white. Nothing shows at all. It's really bizarre.