GSAP Motion Path Responsive Animation

[Ericksen Julius]

I have a problem with my gsap, it seems i can't make my image responsive when the window is resized, here's my code
 

gsap.registerPlugin(MotionPathPlugin);

 

// const bee4Atas = gsap.to("#phase1_lebah_4_atas", {

//     duration: 3,

//     ease: "none",

//     motionPath: {

//         path: "M145 1C43.4906 20.7739 -104.744 84.2574 114.394 180C49.306 126.057 64.6793 108.916 145 91.7071C68.8778 73.0773 68.7868 53.2371 145 1Z",

//         align: "self"

//     },

//     repeat: -1

// })

let tween;

function createTween() {

    let progress = tween ? tween.progress() : 0;

    tween && tween.progress(0).kill();

    tween = gsap.to("#phase1_lebah_4_atas", {

        duration: 3,

        ease: "none",

        motionPath: {

            path: "#pathLebah4Atas",

            align: "#pathLebah4Atas",

            alignOrigin: [0.5, 0.5]

        },

        repeat: -1

    })

    tween.progress(progress);

}

createTween();

window.addEventListener("resize", createTween);

 

 <div class="lebah4Atas-container absolute w-[8%] top-[4.7%] right-[15%] z-[25]">

            <img src="{{ asset('/assets/home/new_phase1/lebah_4.png') }}" alt="Lebah 4 atas"

                id="phase1_lebah_4_atas" class="w-[100%]" loading="eager">

            <svg width="146" height="181" viewBox="0 0 146 181" fill="none"

                xmlns="http://www.w3.org/2000/svg">

                <path id="pathLebah4Atas"

                    d="M145 1C43.4906 20.7739 -104.744 84.2574 114.394 180C49.306 126.057 64.6793 108.916 145 91.7071C68.8778 73.0773 68.7868 53.2371 145 1Z"

                    stroke="black" />

            </svg>

        </div>

 

[GSAP Helper]

Without a minimal demo, it's very difficult to troubleshoot; the issue could be caused by CSS, markup, a third party library, a 3rd party script, etc. Would you please provide a very simple CodePen or Stackblitz that illustrates the issue? 

 

Please don't include your whole project. Just some colored <div> elements and the GSAP code is best. See if you can recreate the issue with as few dependencies as possible. Start minimal and then incrementally add code bit by bit until it breaks. Usually people solve their own issues during this process! If not, at least we have a reduced test case which greatly increases your chances of getting a relevant answer.

 

See the Pen aYYOdN by GreenSock (@GreenSock) on CodePen

that loads all the plugins. Just click "fork" at the bottom right and make your minimal demo: 

 

Using a framework/library like React, Vue, Next, etc.? 

CodePen isn't always ideal for these tools, so here are some Stackblitz starter templates that you can fork and import the gsap-trial NPM package for using any of the bonus plugins: 

• React (please read this article!)
• Next
• Svelte
• Sveltekit
• Vue
• Nuxt

 

Please share the StackBlitz link directly to the file in question (where you've put the GSAP code) so we don't need to hunt through all the files. 

 

Once we see an isolated demo, we'll do our best to jump in and help with your GSAP-specific questions. ✅

[Rodrigo]

Hi @Ericksen Julius and welcome to the GSAP Forums!

 

I'm far from being an SVG expert, but I believe the issue resides in the fact that your <svg> tag has fixed values for with and height:

<svg width="146" height="181" viewBox="0 0 146 181" fill="none" xmlns="http://www.w3.org/2000/svg">

As far as I understand, no matter the size of the screen (320px phone or 4K) the SVG will always have the same dimensions and the path will always be the same. Maybe an alternative could be to make the dimensions of the SVG relative to the screen size, like using percentages or something like that.

 

Happy Tweening!