Tahir Ahmed

Hey! Thanks for the reply Jack. Ah! yes of course. I think you are right about using `.stagger..()` methods with `0` duration as a replacement of `.set()` or with `0` stagger value for `.to()` (and other) calls. This has been one of the interesting things, at least for me, about GSAP that there always are numerous ways to achieve the same result. `cycle` is a powerful addition for me and I just wondered why it wasn't part of the other calls. Thanks for clearing that up. I suppose `.stagger..()` methods are soon to become my go-to method for a number of things because a lot of times, I am working with loops. Thanks again for this very useful 1.18.0 update.

Hi guys, I was wondering since `.to()`, `.from()` and `.fromTo()` also accept arrays, why is this `cycle` not available for them and only available to `.stagger...()` methods as of 1.18.0? I could definitely use that in other array-based methods e.g. `.set()`.

Sweet. Love learning new things. Wasn't aware of _gsTransform object either. So, two takeaways for me from this thread: _gsTransform & force3D: 'auto'. Brilliant tool. Thanks Carl and Diaco. T

very cool. Didn't know about force3D: auto; default setting. Thanks man.

Hey Diaco, Totally in agreement about the animations on a webpage part. As for your example, this is indeed a clean and elegant solution. AFAIK the fewer lines of code, the better in most cases, right? right? (I do not know why didn't I just directly tween the DIV itself like you are instead of a pseudo tempObject. Duh! silly me.) However, I am curious to know if recursion, which is what your solution essentially is if I understand it correctly, is something we should be aiming at when we need repetitive animations like those. Control of the tween is lost perhaps in such a case? Plus there is a repeat:-1 for such cases precisely. Open to hearing ideas / suggestions on this. As for the Paint Rectangles, I think my example can modified to add translate3d into it instead of the simple translate and voila! No more re-drawing, takes it to its own GPU layer if I am not wrong. Does TweenMax automatically take it to GPU? Is this force3D in action without actually being apparent in the code? As I said, from a pure implementation perspective, your solution seems elegant. Thanks a lot for your feedback man. T

Not the kind of start I was looking for Completely understand that Carl. No way was I trying to take anything away from GSAP. I owe many 'this looks fantastic'-like moments to this great tool over the years. The intention, for a simple requirement with such limited scope as this one, was to propose a solution not dependant on external tools i.e. if this is something stot is fine with in the first place. If they already are using TweenMax then by all means hand all your animation needs over to it. That is all. Now, let me try this solution again. RoughEase is definitely a game-changer and it brings wealth of options to play with, which is what I have tried to do with this modified version of the same thing using TweenMax. Here is the updated code of the same: JavaScript: var myDIV = document.querySelector('div'); var translateMin = -40, translateMax = -60, scaleMin = .9, scaleMax = 1.1, rotateMin = -10, rotateMax = 10; var strengthMin = 2, strengthMax = 4, pointsMin = 40, pointsMax = 100; var tween = null, duration = .2; var ease = RoughEase.ease.config({ template: Power0.easeNone, strength: randInt(strengthMin, strengthMax), points: randInt(pointsMin, pointsMax), taper: 'none', randomize: true }); //set taper to 'in' and randomize to 'false' var tempObject = {}; tempObject.posX = tempObject.posY = -50; tempObject.destX = randInt(translateMin, translateMax); tempObject.destY = randInt(translateMin, translateMax); tempObject.scale = 1; tempObject.destScale = roundDecimal(rand(scaleMin, scaleMax), 2); tempObject.rotation = 0; tempObject.destRotation = randInt(rotateMin, rotateMax); tween = new TweenMax(tempObject, duration, { posX: tempObject.destX, posY: tempObject.destY, scale: tempObject.destScale, rotation: tempObject.destRotation, onUpdate: onUpdate, onRepeat: onRepeat, repeat: -1, yoyo: true, ease: ease }); function rand(min, max) { return min + (Math.random() * (max - min)); } function roundDecimal(value, place) { return Math.round(value * Math.pow(10, place)) / Math.pow(10, place); } function randInt(min, max) { return Math.floor(Math.random() * (1 + max - min) + min); } function onRepeat() { //ease=RoughEase.ease.config({template:Power0.easeNone,strength:randInt(strengthMin,strengthMax),points:randInt(pointsMin,pointsMax)}); tempObject.destX = randInt(translateMin, translateMax); tempObject.destY = randInt(translateMin, translateMax); tempObject.destScale = roundDecimal(rand(scaleMin, scaleMax), 2); tempObject.destRotation = randInt(rotateMin, rotateMax); tween.updateTo({ posX: tempObject.destX, posY: tempObject.destY, scale: tempObject.destScale, rotation: tempObject.destRotation }, true); } function onUpdate() { tempObject.posX = roundDecimal(tempObject.posX, 2); tempObject.posY = roundDecimal(tempObject.posY, 2); tempObject.scale = roundDecimal(tempObject.scale, 2); myDIV.style.transform = 'translate(' + tempObject.posX + '%,' + tempObject.posY + '%) scale(' + tempObject.scale + ') rotate(' + tempObject.rotation + 'deg)'; } I have used RoughEase before and I am always blown away by the randomness that it brings to our animations (or a controlled randomness thanks to taper and randomize parameters). Would love to hear comments on the approach used here by the way? I am still learning. T

Long time reader but first time posting on this forum, so please excuse me if I break any written or unwritten rules. IMHO, I don't think you need to use TweenMax for this because you can pretty much get the same effect using the requestAnimationFrame API i.e. if I have been able to understand your question correctly in the first place. Take a look at this example that I just created and try playing with the values. HTML: <div> </div> CSS: div { position:absolute; top:50%; left:50%; transform: translate(-50%, -50%); background:#f00; width:80px; height:80px; } JavaScript: window.requestAnimFrame = (function () { return window.requestAnimationFrame || window.webkitRequestAnimationFrame || window.mozRequestAnimationFrame || function (callback) { window.setTimeout(callback, 1000 / 60); }; })(); var myDIV = document.querySelector('div'); var interval = 2, iterator = 0; var translateMin = -48, translateMax = -52, scaleMin = 0.98, scaleMax = 1.02, rotateMin = -4, rotateMax = 4; function rand(min, max) { return min + (Math.random() * (max - min)); }; function roundDecimal(value, place) { return Math.round(value * Math.pow(10, place)) / Math.pow(10, place); }; function randInt(min, max) { return Math.floor(Math.random() * (1 + max - min) + min); }; function render() { iterator+=1; requestAnimFrame(render); if (iterator > interval) { myDIV.style.transform = 'translate(' + randInt(translateMin, translateMax) + '%,' + randInt(translateMin, translateMax) + '%) scale(' + roundDecimal(rand(scaleMin, scaleMax), 2) + ') rotate(' + randInt(rotateMin, rotateMax) + 'deg)'; iterator=0; } } requestAnimFrame(render); Notice that the available transform-able properties to play with are scale(), translate(), rotate() and their is an interval variable to control the frequency of the updates, set it to zero to render at full 60 fps. Hope it helps in some way. T

Ok. I am in need of / today . Think of a dropdown scenario. I need to know when it starts expanding and when it starts collapsing, similar to when it has expanded and collapsed. Ideas?

This is something I created about 6 months ago for Mercedes-Benz using TweenMax. http://www.mideast.mercedes-benz.com/mlamg/