Have anyone tried creating GSAP code with ChatGPT?

[Detrol]

For anyone that wonders, it works! But it took me a few tries to make the bot learn what i wanted it do do.

Sure, i might have confused it a couple of times, but it's an AI. So hopefully it learns by each creation we assign it to.

 

If anyone wanna see the conversation i had with it, check it out here. Although it's a pretty long read. (i noticed that i couldn't paste the url itself without it generating the image inside the post, so you might have to right click and open it yourself).

 

Either way, try it out for yourself!

 

 

Here is the working example it eventually generated for me, as i wanted it to work.

 

// Trigger the animation when the .test element is in view
gsap.to(".test", {
    scale: 1.1,
    duration: 1,
    yoyo: true,
    ease: "power1.inOut",
    repeat: 1, // Repeat the animation once on enter and once on re-entry
    scrollTrigger: {
        trigger: ".test",
        start: "top center",
        end: "bottom center",
        scrub: true, // Smoothly progress through the animation while scrolling
        onEnter: () => {
            gsap.to(".test", {
                scale: 1,
                duration: 1,
                ease: "power1.inOut",
            });
        },
        onEnterBack: () => {
            gsap.to(".test", {
                scale: 1,
                duration: 1,
                ease: "power1.inOut",
            });
        },
    },
});

 

[Cassie]

I'd be interested to see the result it bumped out for you.

I've had very mixed results, a lot of older syntax and convoluted routes, needed quite a bit of handholding to get to the result I would have recommended.

Hopefully soon we'll be able to get some AI help in the forums though!

[Detrol]

5 minutes ago, Cassie said:

I'd be interested to see the result it bumped out for you.

I've had very mixed results, a lot of older syntax and convoluted routes, needed quite a bit of handholding to get to the result I would have recommended.

Hopefully soon we'll be able to get some AI help in the forums though!

 

Yeah sorry, i forgot to add that part. I've added it to the top post now.

But yeah, just tell the bot how it should work, and eventually it will figure it out, that's my experience at least.

 

Would be really cool if it was able to create more advanced features in the future. But as i said, that the more we use it, the more it should learn all the syntaxes and how to create clean code.

 

PS. I'm very new to GSAP myself, so i can't really say that what i asked it to do is optimal in any way.

[Rodrigo]

Hi,

 

Yeah I don't think the AI dude did a good job in this one. There is one big logic issue in the code. The GSAP instance animates the element to scale 1.1 (110%), then the ScrollTrigger configuration has a scrub true, then it has an onEnter callback that executes another GSAP instance that takes the scale back to one. So this is what will happen. The scroll will reach the start point at that moment the element scale will grow to 1.1 based on the start/end points using scrubbing. But as soon as the onEnter callback is triggered, IDK if on the same tick or the next, another GSAP instance will take over and take the element back to scale 1, so as long as the instance that is triggered on the onEnter callback is running there will be a fight between the instance being scrubbed and the one that is running for updating the scale of the element.

 

I think the bot still needs to check the API and take a tour through the forums. We'll be eager to answer all the questions it has as long as it provides a minimal demo

 

Happy Tweening!

[cwiens]

Just tried it today. It made some weird choices but it shows some promise for sure.