npmによるgsapライブラリの読み込みについて

Question

前提

gsapというアニメーションライブラリをnpmで読み込みました。

import { gsap } from 'gsap'; 

上記の記述で、gsapを使用することが可能になります。
最終的にwebpackを利用して複数の自作アニメーションのモジュールをバンドルしたいと思っています。

やりたいこと

以下のように、gsapを利用したanimeA.jsとanimeB.jsの2種類のアニメーションモジュールを、エントリーファイルのindex.jsで読み込みたいです。

//index.jsファイル
import { animeA } from './animeA';
import { animeB } from './animeB';

分からない点

その際に、上記のimport文をanimeA.jsとanimeB.jsの両方で記述しています。
以下で、問題なくモジュールを分割し、動作もしているのですが、両方に書くのは正しくない気がしています。

//animeA.jsファイル
import { gsap } from 'gsap'

export const animeA = () => {
gsap.to('h1', { x:300, duration:1 })
}

//animeB.jsファイル
import { gsap } from 'gsap' //2回もimportしているのが気になる

export const animeB = () => {
gsap.to('p', { x:300, duration:1 })
}

また、以下は試したコードですが、Uncaught ReferenceError: gsap is not definedとなりました。
エントリーファイルでgsapをインポートすれば、以降の読み込んだモジュールでもgsapが使用できると思ったのですが、できませんでした。
このようなケースではどのようにgsapをインポートするのが正しいのでしょうか？

//index.jsファイル
import { gsap } from 'gsap';
import { animeA } from './animeA'; 
animeA() ;

//animeA.jsファイル
export const animeA = () => {
gsap.to('h1', { x:300, duration:1 })
}


//結果
Uncaught ReferenceError: gsap is not defined