mrstevejobs

When changing background images i notice the image that comes in is bended at the beginning and then it becomes normal when the transition finishes. This is happening at the same time as the fading transition takes place while changing from one image to another. So I'm interested in the bending part. From bended to normal.

I've seen this site in the showcases (https://asmobius.co.jp) and I got interested in replicating a similar effect (without the circular thing). Any suggestion to point me in the right direction regarding how to create those image distortions that appear from the right and fade to the left while getting to its original shape? Thanks!

I've seen this amazing effect in this site I would really love to see if it is possible to replicate with GreenSock. If so, could you guys point me in the right direction? https://www.perceptionacme.com/

Thanks for the info guys!

What about the beizer parameters? Is it possible to know which ones is using? For example here are some equivalents with the beizer parameters: [0.250, 0.460, 0.450, 0.940], /* outQuad */ [0.215, 0.610, 0.355, 1.000], /* outCubic */ [0.165, 0.840, 0.440, 1.000], /* outQuart */ [0.230, 1.000, 0.320, 1.000], /* outQuint */ [0.390, 0.575, 0.565, 1.000], /* outSine */ [0.190, 1.000, 0.220, 1.000], /* outExpo */ [0.075, 0.820, 0.165, 1.000], /* outCirc */ [0.175, 0.885, 0.320, 1.275], /* outBack */ Useful tool: https://matthewlein.com/tools/ceaser

I mean getting the function for it, like this: easeInOutQuad: function (t, b, c, d) { if ((t/=d/2) < 1) return c/2*t*t + b; return -c/2 * ((--t)*(t-2) - 1) + b; }, easeInCubic: function (t, b, c, d) { return c*(t/=d)*t*t + b; }, easeOutCubic: function (t, b, c, d) { return c*((t=t/d-1)*t*t + 1) + b; },

Thanks for the answer! I guess there's no easy way to take that same ease outside of tweenlite? I'm playing with other animations on my own outside Tweenlite and I would like to apply the exact same easing effect so it can look similar to the tweenlite ones I use in the same page.

If I animate a path like this: var g_1 = TweenLite.to('#path', 0.5, { attr:{d: getPath('M2.6 2.8 L 96.3 4.8 L 98.5 98.4 L 0 100 Z')} }); Which animation is TweenLite using by default? Linear? Ease? EaseOutCubic? It seems to me that the end part is a bit slower than the begining, but I do not mange to find this info in the docs. Thanks!

I've seen this amazing website and I noticed a nice effect when mouving the mouse around the right or left sides of the page. They are animating an SVG path as if it was a liquid. In a wavy way. Any tips to achieve this? I'm totally lost. I have the path but I have no idea how to "guess" which values should I apply to it to create the wave effect: https://jsfiddle.net/9o3f8vm4/ Thanks!