Leaderboard

You will need to use Linear.easeNone ease on each tween for smooth transition. You can also set it globally for all tweens if you want.

Thanks for the heads up @Lasercode, I had the -webkit-background-image commented out for the CSS rule #demo that was causing that. I just had to un-comment it out and swap the blue and yellow in the CSS rule. It was commented out due to how Chrome constantly changing the way the new and old syntax work for linear-gradient. You should see it work as it should in both Chrome and Firefox. Happy Tweening!

Check @OSUblake's post in this thread.

Thanks alot! I created a quick pen from this for anyone wanting to use this as a calculator.

Hi @Rager Welcome to the forum. That's coming from the ease you have set on the tweens. TweenMax.to(logoRightLines, 0.8, { ease: Power0, // this doesn't need to be here or would need to be Power0.easeNone height: 190, }), The default ease should be TweenLite too: // switch this TweenMax.defaultEase = Linear.easeNone; // to this TweenLite.defaultEase = Linear.easeNone; You're setting a default Linear ease so you don't need that ease in there anyway. Take that out and it will work just fine for you. Here's a fork of your pen. Happy tweening and welcome aboard.

If it were me, I'd probably name that infinite tween so you can easily control it later. Then add it to the main timeline. Maybe something like this. You could also put that infinite animation in a function and call it after any of the tweens on the main timeline. As with all things GreenSock, there are many roads to the goal. Hopefully that helps. Happy tweening.

I had a horrible time getting my point across in that thread. Please don't make me do it again. Changing the progress of a GSAP animation has nothing to do with the FLIP technique. A FLIP animation should always look the same. We are animating to an identity matrix. That's because we are already in the end state. There's a big difference between transitioning to a new state, and transitioning from a previous state. The underlying values are different, which makes a FLIP animation very hard to break. TweenMax.to(element, 1, { x: 0, y: 0, scale: 1 }) Please look at the many posts I've made about animating Flexbox. I may not have used the term "FLIP", but it's still doing the same thing.

Yep, that sorted it! Thanks again.

Sure, this should be relatively easy if your car is also in the same SVG (so that everything can scale together). MorphSVGPlugin has a pathDataToBezier() function that could help a lot: https://greensock.com/docs/Plugins/MorphSVGPlugin/static.pathDataToBezier() If you still need some help, just whip together a simple codepen with your assets so we can see what's going on and more quickly diagnose any issues. Happy tweening!

Here is the bug report for IE if you need it in the future: https://developer.microsoft.com/en-us/microsoft-edge/platform/issues/16452345/

You can just ask for the top/left after the transform If you're asking for the new position of a specific vertex after the square is rotated 90º, it would just be the original position on the axis it's moved across plus the length of the side in tow. If asking for something more complicated, this SE post could help https://math.stackexchange.com/questions/1917449/rotate-polygon-around-center-and-get-the-coordinates

Just to be clear, the addPause() were being ignored on tweenTo(). the slowing down of the speed was caused by the eases (as Sahil said) Demo below has no addPause() and to add an ease to a tweenTo() you can set that in the vars object tweenTo(0, {ease:Bounce.easeOut}); notice the bounce on "go back"

Hello @jesper.landberg All the F.L.I.P. technique does at its very core, is per-calculate the expensive tweening values up front. In GSAP you can do the same thing by using the progress() method before you play() the tween or timeline. https://greensock.com/docs/TimelineMax/progress Move the virtual playhead to the end of progress(1), then move it back to the start progress(0) before playing so GSAP can pre-record / pre-calculate the values. tl.progress(1).progress(0); . So for example here we have a simple animation of a box : // creates a timeline in a paused state var tl = new TimelineMax({paused:true}); // create tween for the timeline tl.to(".box", 2, {x: 50, y: 50}); // move virtual playhead to the end of the timeline, progress(1) // and then move it back to the start of the timeline, progress(0) // so GSAP can pre-record / pre-calculate the values tl.progress(1).progress(1); // then play your timeline as normal tl.play(); As you can see GSAP makes the F.L.I.P. technique very easy with one line of code. Happy Tweening!

Happy to help. That's the GreenSock experience. Let us know if you have additional GSAP questions. Happy tweening.

After I removed the `top` ainmation the animation as a whole got way smoother. I think this was one of the main issues.

Hi @TomWWD You can add an infinitely repeating tween to a timeline and the next tween will go after the infinite tween finishes its first iteration. You do have to be using TweenMax 1.20.0 or later. Your demo is currently using 1.18.2 which is over 2 years old. More info here: If you need to control that particular infinite tween separately from the main timeline, you could also create a tween or timeline for that repeating animation too. It would make it easier to control. Hopefully that helps. Happy tweening.

Sure, GSAP actually records the values in a _gsTransform object attached to the element. So you could temporarily shove your transform string to GSAP, have it do the parsing, and then read back what it got so that you could rewrite your tween values accordingly with the components. Here's a function that'll do it all for you: //we'll just log out the results here... console.log(convertTransforms("rotateX(36deg) rotateY(0deg) rotateZ(331deg)")); //feed in the transforms string and this function will return an object with the corresponding components broken out, like rotation, rotationX, rotationY, scaleX, etc. function convertTransforms(transforms) { var temp = document.querySelector("#_gsap-temp"), t; if (!temp) { temp = document.createElement("div"); temp.setAttribute("id", "_gsap-temp"); temp.style.cssText = "position: absolute; visibility: hidden;"; document.querySelector("body").appendChild(temp); } TweenLite.set(temp, {transform:transforms, immediateRender:true, lazy:false}); t = temp._gsTransform; return {x:t.x, y:t.y, z:t.z, scaleX:t.scaleX, scaleY:t.scaleY, rotation:t.rotation, rotationX:t.rotationX, rotationY:t.rotationY, skewX:t.skewX, skewY:t.skewY}; } So in your particular case, it's: rotation: -24.153747129210508 rotationX: 32.43382902141896 rotationY: 16.556422776126567 Does that help?

FLIP is a simple and not a complicated concept. The FLIP technique is all about pre-calculating the values up front. So you dont have to do all the expensive precalculations on each frame so you can achieve 60fps. GSAP does all that for you in the beginning. Its all about getting it SILKY SMOOTH.. No Jank! Paul Lewis's definition of FLIP Its all about getting that 60fps.. the buttery goodness. But precalculating is not the only thing you need, it doesn't guarantee 60fps. You still need all the correct CSS properties to play nice cross browser. This way you achieve 60fps and have it be the same cross browser

In that case you could try keeping all of the animations in your timeline with Linear eases and never play() the timeline. Always tweenTo() the next frame and add the ease to the tweenTo(). Doing this you will have to determine what the next label is, but getLabelAfter() will help With the solution above you will notice a problem if you are tweening to label4 (or any label) and you hit the next go tl button while the animation is happening, then you are still going to end up at label4. So you may want to disable clicking while animations happen or work on a more robust approach where you use getLabelsArray() and increment an index each time you click and then tweenTo() the next label based on the new index value. Also, be careful to check that there is a label after. In other words, you can't tweenTo() label6 as it doesn't exist.

Yep, GSAP is doing exactly what you're asking it to do. But again, this is an order-of-operations issue. If you really need to define your rotations in that order, you could simply tap into GSAP's string-parsing capabilities and use a proxy object like this: That circumvents the entire CSSPlugin and lets you apply the string directly. GSAP will find the numeric values inside the string and animate just those. Make sure you've got matching quantities in order for that to work, of course. Does that help?

You could also just poll the opacity property constantly to add/remove the class no matter how the Timeline is being controlled.

You can use some callback functions to set a class. With this, you have to know that the tween is tweening to an alpha 0 or from alpha 0 to set or remove the class (which, in your example, you definitely do).

Hey, thanks for the fix. Smart ass comment: I noticed that your initial gradient flips once you hover. Not that important, I admit . But if you wanna fix that too, the error is that you use "to top" in your colorize function, but then use the top param first, and then the bottom one. If you switch them, it's fine and dandy: function colorize(element) { //apply the colors to the element TweenLite.set(element, {backgroundImage:"-webkit-linear-gradient(top," + colors.bottom + ", " + colors.top + ")",background:"linear-gradient(to top," + colors.bottom + ", " + colors.top + ")"}); } (Even less imporant: I am a humble member since '12, but thanks for welcoming me )

You can play with custom ease to get desired effect when usual eases don't work for you. You can also merge two eases by using this demo by @GreenSock if you are after an effect like that.

I mean, you can have :hovered, :focus, :hovered:focus, :hovered:checked, :focus:checked, :hover:focus:checked. That seems like a lot, and I'm sure I'm forgetting some. And what about when you want different components of an animation to animate at different speeds? For instance, say I have a simple semi-transparent button. I want it to linearly transition to 100% opaque AND scale with a bouncy ease over 0.3s when hovered. But when I stop hovering, I want it to slowly go back to its previous opacity and scale, this time with a linear transition for both and over 0.5s instead of 0.3. And I want it to do a tiny "shake" animation when I click it if it's disabled. How would I achieve that with only className? Again, apologies if I misunderstood or missed something, I'm just trying to wrap my head around what you have in mind.

Dang, quick reply! Love it! Thanks so much, looks like that's my issue

1. Ya x and y translates work better than left and top. When you animate left or top property it causes layout recalculation. x and y translate take advantage of GPU and doesn't cause layout trigger so they perform better. 2. Span tags are inline by default and css transforms don't work on inline elements, if you set your span tag's display as inline-block then it will work. 3. Ya game developers use that trick but if you visit some of the websites from examples page, you will rarely find someone doing that. Generally if your animation isn't performing at 60fps on PC or on even some high end mobiles then you are doing something wrong or asking browser to do too much work. https://csstriggers.com/ You can optimize performance by avoiding triggers wherever possible. Avoid animating too many elements and use canvas to animate. Avoid creating too many tweens on movemove, scroll events by using requestAnimationFrame, so your calculations will happen only once per frame. Start measuring performance of your work from start, on mobile and by using chrome's CPU throttling. So you will have idea about how much more you can do on the page and keep performance better. Also about setting animation to 30FPS, if your animation drops around 30-45FPS on PC it will drop below 30 on mobiles, so optimizing has to be your first step. You can search through the forum for discussions on performance, recently we are getting a lot of questions on performance.

First of all, high-five for being such a longtime GSAP user. Very sorry, though, that we don't have any plans currently to create a Flutter version. We've got our hands full in the HTML5/JS world as it is, with lots of ideas for improvements. We don't have any expertise in Flutter nor do we have the resources to devote there. I wish I had better news for you, but please always feel free to chime in with suggestions like this. Happy tweening!

I don't know if there is a reason to avoid them. From a styling point of view they're safe to use because CSS just skips stuff it doesn't understand. .foo { background-color: green; // fallback background-color: var(--myColor); } IE is the only browser that doesn't support them, so the animation won't work, but it won't throw an error. But I would just disable all the animations in IE. Don't worry, your client won't check.

That's just an order-of-operations thing which I explain here: If you NEED that non-standard order-of-operation, you could just animate to the "transform" property instead of the component shortcuts (rotationX, rotationY, etc.), like: TweenMax.to('.gsap-box', 1.3, {transform: "rotateX(36deg) rotateZ(331deg)"}); Just beware that it's typically more efficient (uses fewer resources) and allows rotations beyond 180 degrees if you use the component shortcuts. The "transform" method basically converts things into a matrix3d() under the hood using the browser itself, and parsing those is inherently ambiguous math-wise. Does that explain things? Let us know if you need anything else. Happy tweening!