OSUblake

Hey @jonkwheeler I'll be sure to check it out next week. Unfortunately, I'm limited to mobile ATM. ?

It works in all modern browsers. https://caniuse.com/#feat=intersectionobserver For those who think supporting IE is a good idea, there are polyfills. https://github.com/w3c/IntersectionObserver Well this is a gsap forum, so I'm of course including gsap as a library. But you don't need any scrolling libraries when using the intersection observer. That kind of defeats the whole purpose.

1) Use the intersection observer. It's a browser feature, not a library, so it performs better. 2) See #1

The most performant way to do that is with the Intersection Observer API. https://developer.mozilla.org/en-US/docs/Web/API/Intersection_Observer_API You can toggle the play and paused states of an animation based on if an element is visible. If you search around the forums, there are plenty of example of how to do this.

More direct link. https://github.com/jonkwheeler/ScrollMagic/blob/99339d953a10e2ebc814675521cd9f73c707e5bf/dev/src/plugins/animation.gsap.js Raw https://raw.githubusercontent.com/jonkwheeler/ScrollMagic/99339d953a10e2ebc814675521cd9f73c707e5bf/dev/src/plugins/animation.gsap.js

I already posted this link. https://github.com/janpaepke/ScrollMagic/pull/920 Secret, magic fixes are inside. That's all I have to say.

Make sure you're using v3 plugins. You're text plugin is v2. I can't tell what version drawSVG you're using from those images. Also, it's a good idea to register your plugins. gsap.registerPlugin(MotionPathPlugin, TextPlugin, DrawSVGPlugin);

Does it hamper the performance of your site? If yes, change it. If no, then it's probably not a problem. The location doesn't matter. JavaScript code is still running to make it animate. BUT.... just because JavaScript is running does mean there is going to be a performance problem. Most people don't understand what affects performance. GSAP JavaScript code will almost never be a performance issue. It's more about WHAT your are animating. Browser rendering is almost always the performance bottleneck. To maximize performance, you can animate a div instead of an SVG with force3D set to true, and set will-change: transform; in the css. gsap.to("#spinning-logo-triangle", { duration: 3, scaleX: 0, yoyo: true, repeat: -1, force3D: true }); More advanced optimizations could include only animating the triangle when the logo is visible, but that's beyond the scope of this post. In the end, I think your friend is making a mountain out of a molehill for such a simple animation.

Eases are just functions now. var easedValue = Power2.easeIn( value ); Note that you can use use gsap.parseEase() to get the ease function from a string. var power2In = gsap.parseEase("power2.in"); var easedValue = power2In( value );

I like this idea, but it requires reworking the API. increment would be my second choice.

I don't have strong feelings either way, but I can see how this might be useful for interactive stuff, like dragging.

Like this. .to('#panda *', { duration: 2, scaleX: 1.2, scaleY: .85, y: -18, rotationX: 15, rotationY: -15, rotationZ: 2, ease: "elastic", stagger: 0.015 }, 0.2) .to('#panda *', { duration: 2, scaleX: 1, scaleY: 1, y: 0, rotationY: 0, rotationX: 0, rotationZ: 0, ease: "elastic", stagger: 0.015 }, 0.4) More advanced stagger options. https://codepen.io/GreenSock/pen/vYBRPbO Simplified easing using strings. https://greensock.com/docs/v3/Eases

That's what I was suggesting with having a promisify method here. You would have to explicitly opt in, but it didn't make the final cut. https://github.com/greensock/GSAP/issues/322#issuecomment-553763556

It's only a problem in you try to pass in an animation to resolve that hasn't completed. Yes you can. https://codepen.io/osublake/pen/2504af1cc0b6c6a7cc6219b07e698776 Same here. Everything works as expected. https://codepen.io/osublake/pen/4302c3d070c282d9488d0ed20cde131c

Cool! Quick question, were you using a server/framework, and if so what e.g. node, express, apache, wordpress, etc? I'm just wondering what was making it show the 404, because I don't think that should happen by default.

Clarification. I meant that we do not need to see your entire project. Just a simple project that clearly shows the error. The less, the better.

Where's your html, css, and other js files? We should be able to download your project, fire up a server, and see the problem.

Assuming your iframe is same origin, you would have to get the iframe document. https://developer.mozilla.org/en-US/docs/Web/API/HTMLIFrameElement/contentDocument And then select the your element. var rotateElement = iframeDocument.querySelector(".rotate"); animationA.to(rotateElement,5, { rotation:44, transformOrigin:"50% 50%", repeat: -1, yoyo:true }, 0);

So yes, that's by design. Here's a long discussion about it. https://github.com/greensock/GSAP/issues/322

The animations are promisable, so you can't pass a timeline like that into resolve because the timeline hasn't been resolved. It will go into an infinite loop waiting for the timeline to resolve. To get around that, you can pass in an object or array with the timeline to resolve like this. https://codepen.io/osublake/pen/4c1ea85a70347ba60cee3d9e8e55905b

Forgot to say this. There's just add and remove. Straight from the source code. add(callback) { _listeners.indexOf(callback) < 0 && _listeners.push(callback); _wake(); }, remove(callback) { let i; ~(i = _listeners.indexOf(callback)) && _listeners.splice(i, 1); },

All of that is kind of pointless when you can use bind. https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Function/bind var onTick = myCallback.bind(myScope, "param1", "param2"); gsap.ticker.add(onTick); ... gsap.ticker.remove(onTick);

You should set any defaults in your main file before animating anything. But that doesn't fix the problem. I think this is something that @GreenSock might need to investigate. Just do this. gsap.set(el, { opacity: 0, y: 5 }); gsap.to(el, { duration: 1, y: 0, opacity: 1, ease: "none", onComplete: done });

I don't know why you would even use setTimeout to begin with. You should resolve a promise with an animation's onComplete callback. setTimeout is NOT synced to anything animation related. If you're using setTimeout/setInterval for animations, you're doing it wrong. But gsap animations are already promisable in v3. Have at it. Be sure to update to the latest version (3.0.4) as there have been a lot of bug fixes related to promises. gsap.to(obj, {}).then(result => console.log(result)); Promise.all([ gsap.timeline().to(obj, {}), gsap.to(obj, {}), gsap.to(obj, {}) ]).then(result => console.log(result)); async function init() { await gsap.timeline().to(obj, {}); await gsap.to(obj, {}); }

You can find some of the map files here. https://github.com/greensock/GSAP/tree/master/dist Put it on GitHub. We don't need to see your project. Just enough to reproduce the error. I don't know why your setup is trying to load it though. The map files are only used for errors. Maybe the problem is ScrollMagic. It hasn't been updated to work with v3. https://github.com/janpaepke/ScrollMagic/pull/920