[Sticky Cursor]

6 hours ago, AnandP said:

We are trying to use that hover only for a section not the whole page. How do we do that?

You can put the element to follow the hover inside of that section and have overflow: hidden on the section. You might want to still keep the pointer move listener on the window.

 

If you are having trouble, please make a new thread with a minimal demo showing the issue and someone will be sure to help out  

[How to get the type of GSAP tween variables in TypeScript]

@GreenSock After investigating it, I realized GSAP is exporting the tween type like I was suggesting. It's just named differently: GSAPTween (I was expecting just Tween to be correct). I assume there's some reason for those to have the GSAP prefix? 

I edited my post above to be more correct and strike out the comment about adding this.

[How to get the type of GSAP tween variables in TypeScript]

(edited) You should be able to use the GSAPTween type:

function handleComplete(this: GSAPTween) {
  (this.targets()[0] as HTMLElement)?.classList.remove("active");
}

Maybe it'd be good to export the common types (like Tween) from GSAP's core so that we can import the type directly and avoid using gsap.core?

[My animations site]

GSAP is being blocked from downloading for me because you're referring to a GSAP file on an ad network and I have adblocker enabled.

[Js, Shopify GSAP project]

@elegantseagulls didn't your agency do a site for a bike like this? Or was it @Rodrigo?

[Animate list items position]

I think you'd only need to animate flex-grow. How about you put together a minimal demo, give it a try, and post again if you get stuck?

[Animate list items position]

Hey Jloafs. This seems like a job for flexbox. See this post for more:

 

[how to reduce delay between timelines]

Hey AwSick and welcome to the GreenSock forums.

 

Which delay are you trying to reduce? I'm guessing the big change in scale at the end of your timeline? 

 

You're using a set numerical value as the position parameter, which put the tween at the given second in time of the timeline. It's useful in some circumstances but usually other methods of positioning using the position parameter are more help, especially ones that let you position tweens relative to other tweens in the timeline. I strongly recommend going through the position parameter post. I also suggest going through the most common GSAP mistakes as you're making a couple of them.

[Cannot read properties of null (reading 'getContext')]

Hey Jerry. This issue has nothing to do with GSAP. You don't have an element with an ID of sensil-product on your page, which is what your selector is looking for.

[Need help to understand this effect]

9 hours ago, BoneDigital said:

How does the getCenterCoords function work? Not too sure on the params needed.

Looks like a remnant from an approach that I ended up not using as a part of that demo. It could be removed.

[Freelance needed for a specific effect (teetering / wobbling tower)]

10 minutes ago, echorley said:

depending on what the user has selected/completed

So it's a configurator of sorts then. That means that either:

1. You have a different video (or GIF) for each possible configuration. Then you swap out which one is shown based on the selection. Or
2. You have a WebGL model (or models) where you can toggle the display of various parts depending on what the user selected.

In both cases, most of the work will probably be before any code is written. Most of the work is setting up the models and other assets. It'd probably be best to use a program like Blender to create the models. If you haven't done something like this before, it might be worth hiring someone to help you with the models.

 

In any case, it doesn't seem like you have clear enough requirements for hiring a software developer right now  

[Freelance needed for a specific effect (teetering / wobbling tower)]

Hey Emily. Are you wanting a WebGL implementation of the teetering? If you only need images, you don't need any JavaScript.

[Make text animation circle when scroll]

Hey DoPhuongAnh and welcome to the GreenSock forums.

 

Here's how I'd break down this effect:

• Position all of the text, one after another, around a circle. You've already done most of this! The text will overlap at this point.
• Select all of the parts of the text for each segment (in the case of the site you linked that means each person's name). Store this for reference.
• Keep a reference of which part is currently active.
• Whenever the active segment changes, rotate the circle so that the active one is where you want it. Also animate the transparency of all of the segments that are off screen to 0. Animate the transparency of the segments next to the active one to a value like 0.7 or so. Animate the transparency of the active segment to 1.

Hopefully that will help you get a bit further than where you are now  

[Mask in chars and lines with Split Text]

Hey Marc. This is simply because of how your CSS is set up. Each line has the overflow hidden, but some characters go more than the current line height. You can see that it's the issue if you remove your CSS for the line height.

 

There's not a simple fix for that sort of situation. One solution is to use the default line height and translate the lines minorly instead. Then when SplitText is done and you revert the HTML you could add back in your line height.

[Specify Different Progress Start Times For Elements Animated With .to()]

It sounds like you're looking for GSAP's staggers.

 

If you need more customization, use a functional value for the delay property.

[DrawSVG not functioning and breaking other gsap scripts]

11 minutes ago, TurdFerguson said:

Is there something with the authentication that I'm missing?

No, there's no client-side authentication for GSAP files.

 

Currently your site is giving a 404 for the DrawSVG file (the current URL it's looking at is /ektest/content/gsap-simply-green/esm/DrawSVGPlugin.js which I found using the Network tab in the dev tools). I'm guessing the path is wrong. But you also want to be using the minified, non-modules version, not the ESM version as Jack said.

[Update Values of Gsap and ScrollTrigger on resize?]

Hey @Akunin and welcome to the GreenSock forums.

 

Please create a minimal demo of the issue and create a new thread about your issue like this thread covers:

 

[Nested Accordion]

This came up on StackOverflow. Here's another version of Blake's pen which might be helpful for future readers:

See the Pen gOWGKQZ by ZachSaucier (@ZachSaucier) on CodePen

[Choppy Scrolltrigger animations working with .webm files]

Perhaps this thread can help:

 

[Rotate element on scroll]

Hey joaooliva and welcome to the GreenSock forums.

 

Have you gotten what you wanted working in a minimal form first? If so, then the issue is just converting it to Webflow. If not, please try to make a minimal demo first  If you still have a question let us know.

[Basic Wrap / Append for Marquee Effect]

Hey informanimated and welcome to the GreenSock forums.

 

13 minutes ago, informanimated said:

How can the animation direction be reversed?

You'd need to position it so that one copy is to the left of the viewport instead of to the right, making sure that the wrapping is happening for the updated positioning. You'd also need to change the sign of the x value in the animation. 

[Delay Scroll Behavior on Animation]

Hey Eli. It sounds like you're wanting something like this: 

 

Perhaps there's a more recent thread about the same subject - I haven't been following these forums very closely the last few months  @Cassie or @GreenSock has there been any public update related to this subject?

[Liquid Particles Animation, Liquid Image hover]

Hey Figar. Those effects are created using custom WebGL GLSL shaders. It's not the most simple thing to write one yourself but you can find a lot of existing effects on sites like Codrops. This article about mixing WebGL with regular webpage content might help as well.

[simple hover title animation needed....]

Creating that effect should be pretty straightforward with the Text plugin  

[I want to purchase the club greensocks]

Hey @vsiege. Please send member inquiries to info@greensock.com or reach out via our contact page