GreenSock

@Waiz GSAP already has TypeScript definitions in the package. Is there something else you're asking for? 

@D3press3d no, you aren't doing anything to clean up (or revert/kill) your tween(s) in your cleanup function. This is why gsap.context() is your new best friend in React - it makes it very easy to do cleanup. Please read the article above - you can wrap your GSAP code in a gsap.context() function, and then simply call .revert() on that context inside your cleanup function.

 

By the way, you could probably simplify your scroll-driven code quite a bit if you use ScrollTrigger. It looks like you're trying to fire a tween at a certain spot which is precisely what ScrollTrigger allows you to do.

 

 

If you have more questions, the best place to ask those is in the friendly forums at https://greensock.com/forums

 

Enjoy!

14 hours ago, Alexander Verbeeck said:

Is there any documentation on how to implement ScrollSmoother with a react Framework?

Not specifically, no, but plenty of people have done it. I'm not much of a React person, but it should be as simple as calling ScrollTrigger.create({...}), saving the instance in a variable, and then in your cleanup function call .kill() on it. 

Yes, ScrollSmoother is built on TOP of ScrollTrigger and it lets you apply smooth scrolling and automatic parallax and lag effects very conveniently. ScrollTrigger does MANY things related to scrolling (triggering animations at certain spots, scrubbing them, pinning, etc.). Both tools are integrated, making them easy to work with. I would recommend reading the docs and watching the videos to understand better. 

@ChenAu Please see https://greensock.com/licensing and

GreenSock uses a very permissive license for the core tools. If multiple users are charged a fee of some kind in relation to your site/app that leverages GSAP, you should get the special commercial license that comes with "Business Green" Club GreenSock memberships.

@dgmldr Thanks for the kind words! I added a list of some of the major ad networks. More arrows for your quiver can be found at:

 

Hi @stayleess. It's difficult to troubleshoot blind - we'd be happy to help if you can post your question in the forums along with a minimal demo that clearly shows the problem. As it stands now, though, it's impossible for us to know what's going on in your project or why you can't get things to work. 

4 hours ago, Sign Up said:

position:fixed will handle when using ScrollSmoother?

You can put position: fixed elements outside the wrapper. Or you can use ScrollTrigger's pinning feature of course.

10 hours ago, JoeH said:

Just noticed that it works with iframes too, what kind of wizardry did that involve?

 

**Magic** 

 

Nah, that's probably just because ScrollSmoother leverages native scrolling by default, so it's not faking scrollbars or intercepting touch/pointer/mouse/wheel events, etc. 

3 minutes ago, omarel said:

Will this be available to be used with React?

Absolutely, GSAP is just vanilla JS with no dependencies, so you can use it in any framework including React. Check out this article about using GSAP in React:

 

Have fun!

Good catch, @TomLadek. Fixed. 👍

7 hours ago, jesperstarkar said:

This is now a few years old. I don't know if you are following how WAA is developing, but as a general question, do you see that things are changing and the topic of starting using WAA in GSAP could/would make sense at some point?

I'm not aware of any significant changes that'd make WAAPI fit for use under the hood in GSAP, no. As far as I know, there are still quite a few deficiencies that just make it impossible. Perhaps that'll change one day. Thanks for asking, @jesperstarkar. Happy tweening!

On 11/18/2020 at 10:41 PM, Miguel Roman said:

What code do you enter to make an object appear from the left of the screen?

It depends how you've set up your layout/CSS, but for example you could animate it in from 500px to the left like: 

gsap.from("#element", {x: -500});

These kinds of questions are best suited to our forums - https://greensock.com/forums

 

Happy tweening!

Just now, MarkTrujillo said:

Does the Muse Motion 2 widget/addon have the same features listed here available? 

I'm not sure - you'd have to contact the author. Muse Motion is not a GreenSock project, but I believe they do use GSAP under the hood for animation. 👍 I'm not sure which version they use. 

2 hours ago, hmdeveloper said:

Looks like the old timeline render function: https://greensock.com/docs/v2/TweenLite/static.render() still exist in gsap3, however it's completely undocumented, or I can't find it? It's also not in the typescript definitions - is there an equivalent?

Well,  @hmdeveloper the static method doesn't exist but the instance render() method does. That method isn't documented because it seemed a little risky to expose to everyone. It doesn't adjust the animation's position on its parent timeline, thus if you render() an animation at a certain time on one tick, it'll revert right back on the next. Typically it's best to just set an animation's time() or totalTime() instead since that adjusts the animation's position in its parent (unless the parent has smoothChildTiming set to false). 

43 minutes ago, hmdeveloper said:

Also, is there a suggested workaround for the behaviour that used to be handled by: TweenMax.updateTo()?

Not really, but feel free to post a question in the forums with some context (hopefully a simple codepen) and we'd be happy to help craft a solution. It should be entirely doable with some custom code but TweenMax.updateTo() was rarely used by anyone and we cut it to reduce file size and API surface area  

On 11/26/2019 at 5:12 AM, chrisw894 said:

A small question though: Is there any alternative that we can use for the useFrames option?

Sure, you could mimic that by using something like this: 

// add a special function to GSAP that'll return a frames-based timeline (just do this ONCE)
gsap.framesTimeline = function(vars) {
	var tl = gsap.timeline(vars),
		framesRoot = gsap.framesRoot,
		time;
	if (!framesRoot) {
		gsap.framesRoot = framesRoot = gsap.timeline({smoothChildTiming:true, autoRemoveChildren:true});
		framesRoot.kill();
		framesRoot._dp = 0;
		framesRoot._start = gsap.ticker.frame;
		gsap.ticker.add(function() {
			time = framesRoot._tDur = framesRoot._dur = gsap.ticker.frame - framesRoot._start;
			framesRoot.render(time);
		});
	}
	framesRoot.add(tl, framesRoot._time);
	return tl;
};

// now anytime we want a frames-based timeline we can do this:
var tl = gsap.framesTimeline();

// then any durations would be frames-based, so here's an animation that'd last 60 ticks (usually 1 second at 60fps):
tl.to(".box", {duration: 60, x: 1000});

Does that help @chrisw894?

5 minutes ago, hook said:

What are the browser compatibility levels? Specifically which versions of IE are supported?

IE9+ and pretty much every other browser you can think of. Obviously certain features are browser-specific, like you can't do 3D transforms in IE9 because the browser itself can't recognize those (so they'd silently fail), but that's not a limitation of GSAP. The core of GSAP itself is pretty much universal. 

4 minutes ago, Qikker Online said:

What happened to throwProps on v3?

It's now called InertiaPlugin. It's even more streamlined and capable, but it does exactly what ThrowPropsPlugin did - it just has a more intuitive name now

On 10/16/2019 at 6:28 AM, nolafs said:

I need to install the bonus packages with yarn. Npm seems to work but yarn, it just hangs. Any idea how I can resolve this?

Hm, sounds like maybe a yarn problem, @nolafs - I'm not quite sure what to tell you. Did you try yarn cache clean dep ? Did you make sure you have a "./" on the front of the path? I read that yarn can have a problem with local dependencies. You could also try something like yarn add ./gsap-bonus.tgz

@expint2006, that's correct - since Adobe Animate exports to canvas, those plugins wouldn't be useful. It's kinda like trying to apply font-size to text inside a JPEG image. MorphSVGPlugin and DrawSVGPlugin both animate SVG shapes; they can't target a bunch of pixels in a canvas. It's a fundamentally different technology. ScrambleTextPlugin works with DOM elements that contain real text, so it won't be relevant either. If there's enough demand, perhaps we'll create special plugins specifically for Adobe Animate that might accomplish similar feats.

@expint2006, that's correct - since Adobe Animate exports to canvas, those plugins wouldn't be useful. It's kinda like trying to apply font-size to text inside a JPEG image. MorphSVGPlugin and DrawSVGPlugin both animate SVG shapes; they can't target a bunch of pixels in a canvas. It's a fundamentally different technology. ScrambleTextPlugin works with DOM elements that contain real text, so it won't be relevant either. If there's enough demand, perhaps we'll create special plugins specifically for Adobe Animate that might accomplish similar feats.

@emmanuelulloa, you shouldn't have to "fight" with networks/publishers much longer (if at all) - every major network that we know of has confirmed to us that they are GSAP-friendly and not counting its file size against ads (or they will be implementing this policy very, very soon).

@emmanuelulloa, you shouldn't have to "fight" with networks/publishers much longer (if at all) - every major network that we know of has confirmed to us that they are GSAP-friendly and not counting its file size against ads (or they will be implementing this policy very, very soon).

@zync, you control the amount of stagger using the stagger parameter. You cannot alter that with a dynamic function if that's what you meant. And these changes are for HTML5/JS only. Demand for the Flash version is tiny now that browsers are phasing Flash out, so all of our attention is on the HTML5/JS toolset at this point.

@zync, you control the amount of stagger using the stagger parameter. You cannot alter that with a dynamic function if that's what you meant. And these changes are for HTML5/JS only. Demand for the Flash version is tiny now that browsers are phasing Flash out, so all of our attention is on the HTML5/JS toolset at this point.