beau_dev

? naming my first kid after you. thank you!

I'm grateful for the incredible help I've received on this forum. I've seen other posts regarding randomization, but they're a bit above my head & seem to address randomization of attrs rather than my objective. Anyway, apologies if this has been mentioned. I have a great many divs. The example I'm posting below contains 9. I simply wish to render an effect of random fade-ins & fade outs of each DOM element, infinitely, (with different animation durations and delays between them). (Much in the same way Christmas lights slowly go on and off again seemingly out of sync...). I would hope to randomize animation duration so that they overlap. It's a simple animation to write procedurally, I suppose. I would like, however, to learn how to do it properly in GSAP. (I've seen on the forum, occasional suggestion to use jquery's each() in different contexts. Unfortunately, jQuery isn't available to me). Again, Opacity is the only attribute that I wish to animate: from 0 to 1 and then back to 0--repeatedly on each element... infinitely. Duration of this animation is what I would like to randomize. Additionally, (but of lower priority) I would like to randomize the order in which each item animates. I am not interested and a stepwise animation of elements down an Array & then back up again. {yoyo: true} was useful, on the entire array of staggerFromTo() elements... but I quickly discovered that isn't relevant to my problem. I wish, simply, to randomize the sequence (so, I suppose, the index) of each DOM element to be animated. Secondarily, I would like to randomize animation duration. Q.: Does cycle() perhaps do this? --I've only seen it address values for attrs... One useful post points to this: HOWEVER, these elements are animating simultaneously with equal duration values. I'm very grateful, again, for any assistance. What I learn here is giving me insight into a great deal of what I've tried to learn for years. --- P.S. (I'm doing something in react & cannot use jQuery.) targeting within react.js is another nut I'll crack once I solve this problem (with your kind help).

genius

Wow... really nice. This is really kind of wonderful. thank you.

Really helpful, Thanks!

That's very useful, Sahil, Thank you. I have a further question that, perhaps, you may be able to answer. How would I render, statically, the turbulence (as it appears on the shape above)--without distorting the edges? Is this possible without the use of clip-path? (I'm assuming that I'm close to the 'best practice' to render a texture on an svg). I forked this pen whose background is more-or-less the texture I would like to produce. --However, I notice that turbulence is applied to the background--hence, rectangular in shape--So, while it renders an effective pattern, no shapes/filters "layers" need modification. Would I need to use clip-path in order to say, render a triangle or other polygon, or a circle (as above)? TL;DR: All I'm looking for is to render a bit of noise on an svg that is NOT a rectangle. I am looking to maintain the integrity of the shape's edges while "distorting" the surface to give the element some texture. https://codepen.io/beau_dev/pen/pLvLNJ Many, Many thanks to you & cheers! -Beau P.S. From the stuff I've read, I'm beginning to think that clipping is the only way I'm going to be able to do this.

I'm really drawing a blank here... I'm trying to apply a turbulence filter exclusively to a circle. I'm wondering whether it's possible to do so without a clipping mask of some kind. I'm trying to get my head around filters so I will later animate them with GSAP. I'd really appreciate any help at all... I'm at my wits end. Many thanks! -Beau

Yep. I figured it was smth like that. That's helpful, thanks!

✋?call me confused. Does it stop me from copy-pasta? noop! Thanks! P.S. I think it's the method .reversed() together with the arg !tl.reversed that's got me stumped. I'll get it somehow, tho. It, at least, starts a conversation in my small brain. Here's another example for future visitors to this thread. This alters both the svg (top right corner) and an array of buttons.

FWIW... That is really well done. thx for the example

My brain just exploded. --Never knew this.

Oh.. I'm crushed... . Thank you both for the info.. It's really helpful...! I guess it's just another problem to work around. Cheers!

Thanks so much for the reply! I'm almost sure there's a way to rotate on more than just the z-axis. It's just a matrix under the hood--as I understand. --But perhaps I'm wrong. Thank you for the help! -B

Dearest GSAP-pers, I've lurked a long time & am very happy/desperate to post this problem regarding nesting rotation in a DRY svg. The attached pen shows 3 bars of color. I would like to have them tumble down out of frame on their own axes. (I plan to randomly generate the values of x/y/z rotation later). If you click on the left (purple) bar, you will see an approximation of what I'm going for. PURPLE BAR (absolutely positioned & stacked on top of the first<svg>): Independently rotating on all 3 axes & is a separate SVG BLUE BAR (<use> element within the top SVG): rotates successfully on the z-axis, but I cannot manage x or y rotation. CORAL BAR (embedded <svg> element within the parent<svg> & is a sibling of the blue BAR): receives the click event, but refuses to rotate on any axis. . THE PLAN: My ambition is to populate this circle with many bars along the edge in a pattern (as though they were marks around a gauge or second ticks on a clock) that tumble down as the needle (not pictured in the pen) rotates around the center of the parent SVG. The Problem: I would like to avoid stacking SVG upon SVG upon SVG in my html and would like to use the <use> (or <symbol>?) tag --or perhaps nest children SVGs for each bar in a pattern. --However, while z-axis rotation in gsap has worked like a charm for me, it doesn't really "sell" the effect of these bars becoming suddenly un-anchored and being pulled down by gravity. PS I really would like to learn how to do this within one parent SVG. (It doesn't matter to me what child elements I'd require for the effect. I'd just like to learn the proper way). If anyone could give me a hint or two, I'd be very grateful... I've looked over the forum, and elsewhere, quite a bit and haven't quite found a solution. GSAP is a joy and thank you to the authors. @beau_dev