Gsap Magento2 and RequireJS: initialization of GSAP

[francescorm]

Hi there, i'm trying to initialize gsap for testing a basic sample on Magento 2.4.1 theme.

This is the basic example i'm testing:

https://codemyui.com/airplane-on-runway-to-flying-transition-toggle-switch/

In my cms page i loaded the html

this is my requirejs-config

 

/**
 * Copyright © Magento, Inc. All rights reserved.
 * See COPYING.txt for license details.
 */

 var config = {
    map: {
        '*':{
               
                gsap_js: 'js/gsap.custom',
               
         }
        },


    paths: {            
            'gsap': 'js/gsap.min',
           
        },   
    shim: {
        'gsap': {
            exports: 'gsap'
        },
        
       'gsap_js':{
             deps: ['jquery','gsap']
                 }
    }
};

And here it is the js code gsap_js

 

require([
    "jquery",
    "gsap",
    "domReady!"
    ], function($,gsap){

//ALL THE JS CODE OF THE BASIC EXAMPLE
// FOR EXAMPLE in some line has been called this method:
// gsap.timeline

});

The problem is that when i go to the page i receive this error:

 

Uncaught TypeError: gsap.timeline is not a function

 

If i check inside network tabs, the gsap library has been loaded and it should be all okey but i don't know why, gsap.timeline is not identified as a function.

 

Can someone help me on this?

[OSUblake]

Hi @francescorm

 

It's really hard to troubleshoot builds, and I'm not really familiar with require.js. Perhaps someone else with more experience with it can chime in.

 

The gsap files inside the dist folder are umd, so they should work with amd. Have you logged out what gsap is?

 

require([
    "jquery",
    "gsap",
    "domReady!"
    ], function($,gsap){

 console.log(gsap);

});

 

[rahulmagento2]

On 6/23/2021 at 3:00 PM, francescorm said:

Hi there, i'm trying to initialize gsap for testing a basic sample on Magento 2.4.1 theme.

This is the basic example i'm testing:

https://codemyui.com/airplane-on-runway-to-flying-transition-toggle-switch/

In my cms page i loaded the html

this is my requirejs-config

 

/**
 * Copyright © Magento, Inc. All rights reserved.
 * See COPYING.txt for license details.
 */

 var config = {
    map: {
        '*':{
               
                gsap_js: 'js/gsap.custom',
               
         }
        },


    paths: {            
            'gsap': 'js/gsap.min',
           
        },   
    shim: {
        'gsap': {
            exports: 'gsap'
        },
        
       'gsap_js':{
             deps: ['jquery','gsap']
                 }
    }
};

And here it is the js code gsap_js

 

require([
    "jquery",
    "gsap",
    "domReady!"
    ], function($,gsap){

//ALL THE JS CODE OF THE BASIC EXAMPLE
// FOR EXAMPLE in some line has been called this method:
// gsap.timeline

});

The problem is that when i go to the page i receive this error:

 

Uncaught TypeError: gsap.timeline is not a function

 

If i check inside network tabs, the gsap library has been loaded and it should be all okey but i don't know why, gsap.timeline is not identified as a function.

 

Can someone help me on this?

i am facing same issue on magento 2.4.6p3

 

[Rodrigo]

Hi,

 

I have zero experience with Magento so I can't really help you. As @OSUblake suggested, have you tried the files inside the UMD folder?

 

Go to your dashboard or to this page:

https://gsap.com/docs/v3/Installation

 

There you can download the file gsap-public.zip, here is the folder structure inside that particular file:

You should be able to use the files inside that particular folder with RequireJS.

 

Happy Tweening!