• Content count

  • Joined

  • Last visited

Community Reputation

1 Newbie

About beau_dev

  • Rank

Contact Methods

Recent Profile Visitors

41 profile views
  1. Toggle reverse and play

    Yep. I figured it was smth like that. That's helpful, thanks!
  2. Toggle reverse and play

    ✋🏽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.
  3. Page transitions with loading element

    FWIW... That is really well done. thx for the example
  4. My brain just exploded. --Never knew this.
  5. x/y axis rotation of nested elements

    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!
  6. x/y axis rotation of nested elements

    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
  7. 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