Leaderboard

Thank you all so much! I'm very new to Greensock and css animations in general, so I wasn't aware there was such a simple solution, comparing to the onUpdate method. Also, very useful to know about autoRound. Thank you!

I have done similar animation some time ago with images. It can be done very simply! 0) You want to render into a canvas 1) Write a method to split a video into different elements (create few video elements with the same video) 2) Position each video element so it creates one whole piece in canvas 3) Create an animation for each element so it actually moves and makes splits visible. <li> elements are only for the texts, all the magic that happens within the video is rendered in the canvas. Very nicely done by the authors, works so smoooothly ( ͡° ͜ʖ ͡ °) PRO TIP: In dev console go to Performance tab, click record, trigger animation, stop record. This way you'll be able to see each frame of the animation to really see what's going on

Hm, I can't imagine how GSAP could possibly make that happen, but I'd be happy to take at a reduced test case. Have you tried reverting to an older version to verify that it indeed resolves the issue? I wonder if it's more likely about an update to your graphics card driver or perhaps a browser update that caused the problem(?) I just can't fathom how any of the changes in 2.0 could affect things in that way, and nobody else has reported anything similar. But of course if there's a problem in the codebase, I'd want to fix it ASAP.

Sorry, but I'm not following what you are trying to do. Are you trying to animate one css var based on the value of another css var? It would really help if you could put together a very basic codepen that shows how your elements are set up and how you expect them to animate. It doesn't have to be fancy, just the bare minimum of code to illustrate the issue. It would be of even greater help to see how you would do this in CSS even without animation... just so we have an idea of the end result you are trying to achieve (and if its even possible). Thanks! ps. In case you haven't seen it, this article shows how GSAP handles css var tweening: https://greensock.com/css-variables

You can do something like this, by using fake cursor. It will be a lot easier to control and to get smooth animation. I am using HTML but you can do same concept with PIXI.

Ha.. @OSUblake beat me to it, I was gonna suggest the same thing to do with autoRound and without an onUpdate. @maguskrool That codepen you forked from me was made several years ago when CSS Filters were not supported consistently cross browser. But since then browser support has increased and there is really no need to animate CSS filters with an onUpdate anymore. Plus GSAP supports animating CSS Filters without it now. CSSPlugin Docs: autoRound: https://greensock.com/docs/Plugins/CSSPlugin#autoRound Happy Tweening

Hi All: The question of using GSAP in WordPress has come up several times over the years, including a couple of questions from me. I finally got around to figuring it out and I wrote a tutorial on how this can be done. If anyone has suggestions or corrections, I'd appreciate passing them along. Hopefully it will be helpful as non-WordPress GSAPers continue to want to use your fantastic library in WordPress. Thanks.

If I'm killing a draggable instance, that usually means I'm also removing the element, so this has never been a problem for me. The only thing I expect is that any references will be cleared so the object can be removed memory. That's not to say you're wrong, but I honestly can't think of a single plugin that returns something back to it's previous state when you kill it.

Here's one by @Jonathan

Did you notice how the line turns green when you are close to the path in my boxes demo. That's kind of what you're asking, but it will still allow you to jump around. Really simple demo showing the problem.

Thanks for getting back to me, Jack. Actually the mask is rendering fine but I can't move the mask as I would like from JS. I want to put up a Codepen but right now I am under the gun for EOD so I'll have to approach this later tonight or sometime next week. Thanks for getting back to me though - I will post asap.

It's am impressive effect for sure. Below is a video that shows that the video is rendered to canvas. Notice that I delete the canvas element and can still interact with the slideshow. https://greensock.d.pr/6i3M1d I didn't realize until now that you could horizontally drag the slideshow.

Fantastic, much appreciated. Thank you for the explanation as well.

You're actually doing it in exactly the correct way. It's much better to just do x:headerLeftWidth than to do: transform: "translateX(" + headerRightWidth + ")" ...because when you use the GSAP shortcuts like x, y, rotation, scaleX, scaleY, etc., it allows GSAP to avoid re-parsing the matrix from the browser, plus it's more accurate for any rotational values beyond 180 degrees (matrix decomposition is inherently ambiguous when it comes to rotational values). Happy tweening!

you are insane! thank a lot , i will study this in few hour ..

Thanks, Blake. That's good to know!

CSSPlugin rounds values. TweenMax.to("#logo-home", 4, { filter: "blur(6px)", autoRound: false });

hmm, it appears to be an optimization built into the browser. I simplified your demo quite a bit to make use of GSAP's advanced tweening of complex strings. It appears the browser is only allowing integers to be set. I'm not sure there is a valid work-around.

Check out the following thread that shows how you can drag along the path. You should able to draw your Path using total Length and knob's current position using that demo.