OSUblake

It's hard to say what the problem is without seeing it. First, make sure you don't have CSS animations that are animating the same properties as GSAP. Same goes for jQuery. Your're using fadeIn/Out. I would only use GSAP. I noticed a setTimeout, which can cause timing problems when working with animations. Use TweenLite.delayedCall() instead. https://greensock.com/docs/TweenLite/static.delayedCall It can also be canceled. https://greensock.com/docs/TweenLite/static.killDelayedCallsTo But the thing that sticks out the most is that you are using from animations in one of your callbacks. Rapidly click the button in the demo below to see how that can result in unexpected behavior. It's very easy to break your demo doing the same. Another thing to be aware of when using from animations is immediateRender. https://greensock.com/immediateRender

I'm loading the JavaScript from another pen. https://codepen.io/osublake/pen/e72106811a34efcccff91a03568cc790.js Feel free to use it, but I really can't offer support for it. I never got around to making it work correctly for mobile. The address bar causes problems when it moves in and out of view.

GSAP animates stuff. Look at speech recognition. https://developer.mozilla.org/en-US/docs/Web/API/Web_Speech_API/Using_the_Web_Speech_API This demo works in Chrome. https://davidwalsh.name/demo/speech-recognition.php

You're setting the strokeDashoffset as a CSS inline style, which has precedence over attributes. So you would need to set the attribute if you want to animate the attribute. TweenMax.set(path, { attr: { "stroke-dashoffset": 1 } }); My personal preference is to use CSS over presentation attributes so I don't run into problems like that.

That doesn't take ease into account. TweenMax.to(path, 3, { onUpdate: function() { path.style.strokeDashoffset = 1 - this.ratio; } }); But that's not a good way to keep track of a value. var obj = { value: 1 }; TweenMax.to(obj, 3, { value: 0, onUpdate: function() { path.style.strokeDashoffset = obj.value; } }); But why do that when you can tween an attribute? TweenMax.to(path, 3, { attr: { "stroke-dashoffset": 0 } }); The problem you were having is that you were tweening a CSS property. Check out the autoRound section in the CSSPlugin. https://greensock.com/docs/Plugins/CSSPlugin This works as expected. TweenMax.to(path, 3, { strokeDashoffset: 0, autoRound: false });

What's your use case? Trying to do that while dragging is really complicated. There is nothing to stop a user from moving their mouse through a "blocked" element. See this demo. It's using a collision detection library with responses, but the dragging is a little wonky because you can move your mouse through blocks, causing your draggable to jump around. That's a demo I quickly modified from this thread. It could be done better, but I don't have the time to rework it.

Maybe like this.

No. Finding a tutorial that covers stuff like that is pretty rare. That demo is probably going to be one of the best sources to learn from. Knowing how to work with image data is probably the most important part of that demo, and it has nothing to do with three.js. They are using rgba values of a pixel to create the mesh, much like I'm using rgba values to create particles in this demo. The image data loop in my demo would look like this if I weren't animating it. for (var y = 0; y < height; y += grid) { for (var x = 0; x < width; x += grid) { var i = (y * width + x) * 4; var r = data[i]; var g = data[i + 1]; var b = data[i + 2]; var a = data[i + 3]; var alpha = a / 255; if (!alpha) { continue; } var particle = { color: "rgba(" + r + "," + g + "," + b + "," + alpha + ")", size: size, x: x, y: y }; particles.push(particle); } } If you look at line 100 in that three.js demo, you'll see that they are doing something very similar that. The guy who made that demo also has a post about image data with some three.js demos that are similar to my demo. https://codepen.io/Mamboleoo/post/how-to-convert-an-image-into-particles

There is ONE ticker, and it controls everything: TweenLite/Max and TimelineLite/Max. You access it through TweenLite. https://greensock.com/docs/TweenLite/static.ticker

And it might be better to use an event listener to change that, like page visibility. https://developer.mozilla.org/en-US/docs/Web/API/Page_Visibility_API Or maybe blur and focus.

That's the answer. Try it.

Here's a fun little entrance. I'm scaling everything from the same point. You need to open it on Codepen to see the full effect.

Yeah, will-change can fix some problems, but it might create a bunch of new problems that you weren't expecting. That's why I said you have to be careful with it. I'm thinking that you could probably simulate brightness. Create a version of your sprites that are all black, or some dark color. Overlay those dark sprites on top of your regular sprites, and animate the opacity to simulate brightness.

You can draw an emoji on a canvas, which means you can get image data for it.

Hi @BeckBeach A mesh is like the geometry and the appearance/surface of something. Image an image. Now divide that image up into a grid. Each grid cell is split into two triangles. That's essentially what a mesh is. Animating a 2d mesh with PixiJS. The vertices are the corners of the grid cells, which are represented by the red dots. The vertices are stored inside a single array, which isn't a convenient object to animate, so I map the vertices to point objects. I then animate the point objects with GSAP, and then on every animation frame, map the point object values back to the vertices array. That might be easier to do with three.js, but the concept is still the same. You can animate the points (vectors) of a mesh. Check out this demo. It's not using GSAP, but it's the same effect you're asking about. This is what the burger looks like. They are using canvas to convert that image into a mesh. They loop through the image data, getting the rgba value of a pixel at a certain interval, and use those values to set the color and xyz value of a vector. To learn more about image data, check out this tutorial... https://developer.mozilla.org/en-US/docs/Web/API/Canvas_API/Tutorial/Pixel_manipulation_with_canvas And this post... https://codepen.io/rachsmith/post/getting-getimagedata

Oh, I meant to file a bug for Chrome. https://crbug.com/wizard I didn't check, but there might already be an open issue for it. I've been noticing weird SVG rendering glitches on Chrome for the past year. https://bugs.chromium.org/p/chromium/issues/list

Interesting approach, but it's pretty easy to do an isometric projection. It's even easier to do a diametric projection. You draw stuff at 26.565 degrees instead of 30 degrees. Why would you use a weird angle like that? Simplicity. Don't think in angles. It's a 2:1 ratio. If a tile is 100 wide, then its height would be 50. That's how isometric computer graphics are usually drawn. https://en.wikipedia.org/wiki/Isometric_computer_graphics You define positions as row and column values in a grid. Getting the projected coordinates is done like so, where x would be the column, and y would be the row. var xCoord = (x - y) * tileWidth / 2; var yCoord = (x + y) * tileHeight / 2;

I honestly don't much about CSS grids, but it looks like the problem is the columns in the middle cannot shrink anymore, so it's putting the sidebar into overflow. Is there way to force the middle columns to shrink more?

If you use requestAnimationFrame inside your onComplete, it should give you the space you need. requestAnimationFrame(() => { this.updateCardElements(); ... }); If you need more time, you can use TweenLite.delayedCall(). TweenLite.delayedCall(0.1, () => { this.updateCardElements(); ... });

Look at the image I posted. The x axis represents time. The y axis represents the call stack. And all those rectangles are function calls. Ideally, a call stack should not take longer than 16.67ms. Anything longer than that, and there's probably going to be some lag. Your updateCardElements method is creating a huge call stack. Here's a closer up view. You can see that all those calls are related to updating react. Each column is a card. Exactly. That's how rendering works. Changing the style of element doesn't immediately force the screen to update. The browser will try to update the screen around 60 times/second (16.67ms). See requestAnimationFrame. That's what GSAP and every other animation library uses. It will paint after the animation frame callback has executed. https://developer.mozilla.org/en-US/docs/Web/API/window/requestAnimationFrame

It's looking in the declaration file for something called "all", but that doesn't exist. https://github.com/DefinitelyTyped/DefinitelyTyped/tree/master/types/gsap I wonder if you could do something like the index.d.ts. https://github.com/DefinitelyTyped/DefinitelyTyped/blob/master/types/gsap/index.d.ts I can't test this at the moment, but maybe something like... declare module 'gsap/all' { export = gsap; } If that doesn't work, you could try a triple slash directive. https://www.typescriptlang.org/docs/handbook/triple-slash-directives.html

Here's what it looks like in the performance timeline. GSAP is correctly setting the final rotation value for the last card, and onComplete is firing at the correct time. The problem is the stack for the onComplete is massive. It took over 250ms in that recording. The browser won't paint anything until the animation frame callback has finished, so that's why the card appears to lag on the second to last frame. The browser had to wait 250ms to paint the final state of the card.

It isn't? Then why are you having problems importing GSAP modules? 😉 This is at the bottom of the Draggable UMD file. I think it was written before bundling tools like webpack became popular. //export to AMD/RequireJS and CommonJS/Node (precursor to full modular build system coming at a later date) I have no idea what's going on with the AOT compiler. It looks really complicated. https://angular.io/guide/aot-compiler Are you getting this error? Cannot set property _autoActivated' of undefined There's only 1 file where that would happen, but I don't know what would cause the import to fail. https://github.com/greensock/GreenSock-JS/blob/master/src/esm/TweenMax.js If you're getting that error, that means you're importing from "gsap" or "gsap/TweenMax", which I wouldn't recommend. https://greensock.com/docs/NPMUsage https://greensock.com/forums/topic/18437-import-from-gsap-vs-from-gsapall/ If tree shaking is enabled import { TweenMax, CSSPlugin } from "gsap/all"; const plugins = [CSSPlugin]; Else import "gsap/TweenMaxBase"; import "gsap/CSSPlugin"; If that doesn't work, you can add GSAP files via the scripts option inside the angular.json file. https://github.com/angular/angular-cli/wiki/stories-global-scripts

I see the lag, but what makes you think that onComplete is firing prematurely? I noticed that you're using React, and that works asynchronously, meaning updates can be an issue if you're not careful. That's why there's a .componentDidUpdate() method. But like Jack said, that should never happen. I made this demo to show the callback order and the position of the boxes. I also noticed you're using timing mechanisms like setTimeout and _.defer. That can also cause problems if you're not careful. To see what I mean, open this animation, go to another tab for like 5-10 minutes, and then go back to the animation. It's been shooting off but not animating a bunch of fireworks the whole time you were on another tab because setTimeout is not synced with animation frame updates. https://codepen.io/rachsmith/pen/YNKVxG I would recommend using TweenLite.delayedCall() instead. It's driven by GSAP's ticker, so it will keep everything synced, even if you go to another tab. https://greensock.com/docs/TweenLite/static.delayedCall()

Please make a reduced test case.