[Using Splittext from GSAP in Nuxt.js]

@Rodrigo Yes, I am a member of gsap club. I made the settings as specified. As I said, I use it as in the example above, but I get an error.

[Using Splittext from GSAP in Nuxt.js]

I'm using nuxtjs 3 and the @hypernym/nuxt-gsap package. I want to use splittext but I get the following error. Can you help with this?

const { $gsap } = useNuxtApp();
onMounted(() => {
  var childSplit = this.SplitText(".text-animation", {type: "lines"});
  console.log(childSplit);
});

My Error :

 

index.vue:144 Uncaught (in promise) TypeError: Cannot read properties of undefined (reading 'SplitText')

[Gsap Scale Element with ScrollTrigger]

Up...

[Gsap Scale Element with ScrollTrigger]

As I scroll the page, I want the element's size and location to change in each section. Likewise, when I scroll up the page, I want it to return to the position it was in in every section. How can I do that. Can you help me?

See the Pen ExOGxzX by mrtsiradisi (@mrtsiradisi) on CodePen

[SmoothScroll Bottom to Top Problem]

When I first open the page when I use smoothscroll, it scrolls from bottom to top. The problem is when I add hcaptcha to this site, such a problem happens. I don't know how to fix this. Can you help me solve the problem?

[SplitText Loop with ScrollTrigger]

Thank you...

[SplitText Loop with ScrollTrigger]

Hi,

 

I add effects to texts using splittext. How can I do this for every text? I tried with foreach but it doesn't work as I want.

See the Pen vYQEGvo by mrtsiradisi (@mrtsiradisi) on CodePen

[Gsap SmoothScroll Custom Cursor is Not Moving Enough]

Thank you for the explanation.

[Gsap SmoothScroll Custom Cursor is Not Moving Enough]

I have a problem when I use custom cursor with smoothscroll plugin. The error occurs when I scroll down the page. Is there any way I can fix this problem?

See the Pen yLQLrRY by mrtsiradisi (@mrtsiradisi) on CodePen

[DrawSVG with ScrollTrigger Multiple Element]

Thanks, what I was trying to do was as follows.

 

scrollTrigger: { trigger: container+" svg", start: "top+=20% center", end: "bottom-=20% center", toggleActions: "play none reverse none", markers: true }

I was getting an error when I did it this way. That's all it takes to do. thank you for your time.

 

const item = container.querySelectorAll("path");

[DrawSVG with ScrollTrigger Multiple Element]

Hi, How can I get the animation to be triggered separately for each svg?

See the Pen KKGJdYe by mrtsiradisi (@mrtsiradisi) on CodePen

[Make Canvas Background Transparent]

Is there anyone who can help?

[Make Canvas Background Transparent]

Hi, I'm trying to make the white background transparent. But I couldn't solve it. Can you help me?

See the Pen JjawgLV by chrisgannon (@chrisgannon) on CodePen

[Cancel Image Reveal Effect Repeat]

Wow... Good to know that. Thank you.

[Cancel Image Reveal Effect Repeat]

Hello, I have a sample project at codepen.io. The image opens when you scroll down the page. When it goes up, the picture turns off. I just want the picture to open when it goes down. When you go up again, the picture does not turn off. Animation needs to run once. Would you help me with this topic?

See the Pen bGjeorr by mrtsiradisi (@mrtsiradisi) on CodePen

[Gsap Image Reveal Animation Horizontally]

@Cassie Thank you Cassie.

[Gsap Image Reveal Animation Horizontally]

Hello,

The effect works on all areas simultaneously. I need to get this to work only on the visible part. Also the animation goes up and down and then the picture appears. I have to do this so that it only comes up and the image is visible. Would you help me with this topic?

See the Pen ZERqWVo by mrtsiradisi (@mrtsiradisi) on CodePen

[How to pin a container and mask the inner sections using ScrollTrigger]

@OSUblake Hi, in this example it goes from left to right. Is it possible to make this effect round?

 

Example : https://www.moonsafari.archi/

[Clock Shaped Slider]

@Rodrigo Thank you. Very good examples to start.

[Clock Shaped Slider]

Hi, 

 

Example Url : https://www.moonsafari.archi/

 

I want to make a slider on this page. I think I can do it with gsap. But since I'm new to gsap, I didn't know where to start. Can you help me with this?