Leaderboard

This is definitely a Chrome issue... Adding will-change: transform to either the div or the span fixes the jitter, but makes the text become very blurry when it's finished scaling. One solution (not a very convenient one) is to immediately change the font-size of the text at the start of the animation, and scale it down to make it appear as if it was still at its initial size, and figure out the transform values so that the position is the same, and then animate back to scale: 1. After that, you can remove the will-change property. But yeah, it's cumbersome, especially if you don't know exactly where the text will be beforehand. (I've cleaned up a bit, btw)

What.. no more IE8 support coming soon. But I love IE, I was just getting used to the no more IE6 being supported. (that was a joke, good riddance)

Great question. Yes, I'm working on 2.0.0 and plan to drop IE8 support which will allow me to drop some legacy code and lighten up the files a bit. I do not expect 2.0.0 to ship for a while, though, since my plan is to rework a bunch of things and add features too. It'll likely take several months. Is there anything in particular you wish we'd do (or not do)? What prompted the question?

One option (depending on how rigid the requirements are) would be to tween the alpha of the .raindrops parent elements to 0 and then kill the .raindrops timelines.

Awesome Codepen , I was waiting like whats next whats next , way to go , You were helping everyone when they need you , thanks , keep going !

I posted this before, but I think it's appropriate to drop it in here again. Here's what you say to clients who are still using IE.

Hm, how about if roundProps could accept an object and for each property, you define a number that's the smallest gap, like: roundProps: { x: 0.1, //round to the closest tenth (0, 0.1, 0.2, 0.3, etc.) y: 5, //round to the closest 5 (0, 5, 10, 15, etc.) rotation: 45 //round to the closest 45 (0, 45, 90, 135, etc.) } Do you think that's intuitive? Here's an updated TweenMax with this functionality embedded (note: it required some tweaks to CSSPlugin too, so this wouldn't be backwards compatible for CSS properties): https://s3-us-west-2.amazonaws.com/s.cdpn.io/16327/TweenMax-latest-beta.js Is that the kind of thing you're looking for? Does it work well for you?

One of the fundamental benefits GSAP delivers is consistency in transforms' order-of-operation and being able to query those values at any given time. Like "what's the rotation right NOW?" (even if it's partway through an animation). Since CSS transforms can be chained infinitely and they're all shoved into one property, that's virtually impossible with raw CSS. Consequently, GSAP can't just pass through whatever string you feed into the transform. For example: "rotate(20deg) translate(50% 10%) scale(2) translateX(20px) skewX(10deg)" - what's the "x" in that exactly? Hm. All of those values ultimately get combined into a matrix() or matrix3d() by the browser anyway (which, by the way, are ALWAYS px-based). GSAP interprets that matrix data and populates the x/y/scaleX/scaleY/rotation/... accordingly. Again, this can be a huge convenience. But it also makes it tough to accommodate relative values like % and vw/vh. For %-based stuff, that's why GSAP offers xPercent and yPercent. There's currently no ideal solution for vw/vh but those are typically pretty easy to just convert on your own (see for a function that'll do it for you). //converts viewport units to pixels (like "50vw" or "20vh" into pixels) function toPX(value) { return parseFloat(value) / 100 * (/vh/gi.test(value) ? window.innerHeight : window.innerWidth); } //then, in your tween: TweenMax.to(... {x:toPX("50vw"), y:toPX("20vw")}); In order to work around browser issues like Firefox not reporting transforms correctly that weren't in a visible element, GSAP automatically applies string-based transforms to a proxy <div> internally but since your example uses values that are relative to the element's own width/height, it was failing (that proxy <div> had a width/height of 0). I applied a fix in the upcoming 1.20.5 release which you can preview (uncompressed) here: https://s3-us-west-2.amazonaws.com/s.cdpn.io/16327/TweenMax-latest-beta.js So that should solve the bug in Blakes reduced test case. If you need to apply string-based transforms that are vw/vh based, I'd recommend using the conversion function I mentioned above and then in an onComplete you could just element.style.transform = "your values" so that it remains responsive and doesn't get px-based. Does that help?

Awesome, glad to help! Welcome to GSAP and happy tweening

Hi Miks, Yes, With the Business Green 1 developer membership, one developer can use the GreenSock tools on an unlimited number of sites. Let us know if you have any more questions. Carl

Thanks for the demo. See if adding a slight rotation to the div inside main helps TweenMax.set(".main div", {rotationZ:0.01}) I think it does, but frankly I'm not sure I'm trusting my own eyes after watching it so many times

It's not too confusing as long as rotation is not involved. It uses skew and scale. SVG and canvas could be a little different because the transform origin might be part of the matrix. matrix(a, b, c, d, tx, ty); But yeah, it looks like a possible bug. GSAP doesn't seem to handle translate as a percentage correctly. Compare it to setting the transform with jQuery. Definitely something @GreenSock should look at to confirm.

Assuming by this you mean you wish to use a percentage transform and have the percent based on the parent height not the box itself you could perhaps do it like this. This calculates a ratio to multiply the transform by based on the item and parents height. var transformRatio = $('.div').height()/$('.box').height(), tl = TweenMax.fromTo(".box", 2, { yPercent: 50 * transformRatio}, { yPercent: -50 * transformRatio} ); $("button").on("click", function() { tl.play(0); }) yPercent will also animate the Y translate value directly instead of calculating it in the matrix I believe. <div class="box" style="transform: translate(0%, -262.727%) matrix(1, 0, 0, 1, 0, 0);"></div> ...from browser tools If you want the item to start and end off screen or outside the parents bounds append code to: var transformRatio = $('.div').height()/$('.box').height(), tl = TweenMax.fromTo(".box", 2, { yPercent: 50 * transformRatio + 50}, { yPercent: -50 * transformRatio - 50} ); $("button").on("click", function() { tl.play(0); })

Hi @radutrs Welcome to the forum. That's a pretty neat website. They have quite a bit going on there and most of it is happening on canvas. From what I can tell, they are are using GSAP and three.js for most of the heavy lifting. three.js is what creates the displacement on the pictures. They've also got some Vray reflection maps in there to really make it shine. The effect that you asked about isn't too difficult. You could make it work with canvas or SVG. You might be able to do it with regular DOM elements too. I made a little demo to show one way you could do it. I've used a SVG. However you design it, the basic mechanics will be the same. You'll probably have two images and a mask. The full color image will be hidden until the end. A mask will reveal the line art version of the picture and its size can be increased by holding down the mouse button. I just made a timeline for the mask expansion animation and play/reverse it on mousedown/mouseup. Once that timeline hits 100%, the onComplete fires which fades in the full color version of the image. Here's some more info about three.js. https://threejs.org/ You can also take a look at Pixi for a canvas option. http://www.pixijs.com/ Pixi has an impressive variety of filters that can create some neat effects http://pixijs.io/pixi-filters/tools/demo/ Hopefully that gets you started. Happy tweening and welcome aboard.

Hi @Gumbo This sounds a lot like this thread: I think that info should get you started. Happy tweening.

I think this is super good, personally. Best implementation of this I can think of – to the point where if it was up to me and I didn't need the library to keep working for 70 bazillion websites, I'd deprecate the current string grammar

Thanks @Carl. I thought that was a neat effect and I was having some fun with it so I made another version too.

I'm glad you liked it @anotheruser. Those demos are fun to make and answering questions here is a blast so I'll keep going. Next stop - 3,000. Happy tweening.

Ha ha. Cool. Yeah, we definitely place a huge priority on performance. Dropping IE8 (and earlier) probably won't result in much of a performance gain because we structured things in a way that minimized its impact. But I'll certainly feel good about dropping that legacy code

Thanks for the answer There is no particular trigger for this question: I was just figuring out the complexity of your code, the several browser-exceptions you were applying, the difficulties of any amend by keeping in mind any legacy browser; all of this, above all, while keeping the first place in performance leaderboard Trimming IE8 (and IE6, as far as I can read on Draggable docs!) would save bytes, time, CPU cycles and above all neurons

super fantastic demo, Craig.

The people with the green capes. Generally, you don't need decimal precision when tweening, but that's not to say that there aren't use cases for it. I mean, it is called the RoundPropsPlugin, so it wouldn't be too crazy if it handled rounding precision to some degree. Note that there are edge cases where rounding like in the examples above will fail, but they are edge cases, and probably not worth the effort to fix. There are some workarounds in this article. https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Math/round

I.. practically.. taught.. BLAKE (!) something? :OOO Where's my award? I'm freeing up the whole wall for that certificate Jokes aside: TIL that RoundProps is done with the modifiers Plugin 8) Both of your solutions work – but you know me by now: My suggestion would be way more comfortable for users (in my opinion at least :D). Even if you are a blake-esc GSAPper, coming up with a solution for specific number of decimals is distracting you from the main goal. This is (arguably) an unnecessary detour. I'm all for "help the user concentrate on what they want to do, not on the how" My use case doesn't seem farfetched to me. So who do I have to get on his nerves until this gets implemented? 8)

Check out the Dynamic Remarketing Build Guide, which is available with the dynamic templates in GWD. There's also information in the GWD Help Center. There are also GWD training videos in Google's Academy for Ads and Youtube.

Well, besides it allowing the context menu? Not much that I can think of.

Hi everyone, Just wanted to let you all know that our HTML5 banner builder (of course, powered by Greensock) now also supports exporting zip files for Sizmek MDX 2.0/SAS and DSP platforms. We previously already support Adwords and DoubleClick compatible exports. Zip export for the different platforms requires a paid subscription, but just send me a PM if you want to test this feature out - and I'll set you up. Check out the tool on http://tweenui.com/animator and let me know what you think. As always, I'm very interested to get the feedback of this community. Keep on Tweening! Erik

@beau_dev In my opinion, if you don't feel too kosher about React's refs there's always the react-transition-group route. The <Transition> component provides callbacks with the transitioning DOM node which makes doing GSAP animations easier.

Hi dear community! I know you missed new releases with HERO banners. Today I present 3 of them! Please give us feedback if you like them. 1. World Of Tanks — Take Control Animation here 2. World Of Tanks — Video 360° Animation here 3. World Of Warships — Dunkirk Collaboration Animation here Thank you!