beau_dev

Members
  • Content count

    26
  • Joined

  • Last visited

Community Reputation

22 Newbie

About beau_dev

  • Rank
    Member

Contact Methods

Recent Profile Visitors

140 profile views
  1. React.js navmenu (onHover) running only once(?)

    Your solution (#2) works! beau.haus thanks so much!
  2. React.js navmenu (onHover) running only once(?)

    incredibly helpful... I'll try to work on a test case and post it. Many thanks!
  3. I'm hovering on a div with mousover/mouseout handlers. hoveron/hoveroff runs just fine... but.. hovering back on... forces it to stick so that hoverOff is never triggered. I feel like I've seen this before, but I can't tell where. I'd really appreciate any help on this. Many thanks in advance! Sincerely, Beau link to video handleMenuHoverOn(arg) { const {tl, refs } = this; BtnDB.btns.forEach((btn, idx) => { tl.to( refs[`dot-${btn.id}`], 0.15, { x: btn.hoverPos }, '-=0' ); tl.to( refs[`text-${btn.id}`], 0.5, { opacity: 1 }, '-=.5' ) }); } handleMenuHoverOff(arg) { const { tl, refs } = this; BtnDB.btns.forEach((btn, idx) => { tl.to( refs[`dot-${btn.id}`], 1, { x: 0 }, '1' ); tl.to( refs[`text-${btn.id}`], 0.5, { opacity: 0 }, '-=.5' ); });
  4. target random DOM elements properly

    Hahaha... looks like I'm going to have a busy week... *ahem.
  5. GSAP + React.js The quest for best practices

    Wow... never read those words before. ------ Been working on this all day... You are a genius. thank you so much! Got it working on local host... As soon as I get it into codepen, I'll post something. Thanks so so much, again.
  6. GSAP + React.js The quest for best practices

    Most definitely out of my comfort zone here... This code was created with the help of craig and pointC on these forums. But this is what I've got so far... The effect is staggering 🤣 . (...sorry).... What I'm really looking to do is to randomly slowly flash them (at speeds within a random range that is rather slow). So far, they stagger down a line... However, I think the code: ref={ node => this.elements.push(node) } pushing elements to an array ...and THEN .map() that array with timelines... (I think...). Perhaps that will produce the randomness of the actual targets. ----- (FYI)...The jQuery rendered effect I'm looking to produce is here: At any rate... I've made lots of progress out of my comfort-zone and am very encouraged. It has been painful. But... I'm beginning to believe. ::insert morpheus.gif here:: Thank you again, for the help. After I sleep a bit... I'll revisit this with better results hopefully. Perhaps documenting this progress may help others for future reference. Cheers... beau The_Matrix_He_s_Beginning_to_Believe.mp4 The_Matrix_He_s_Beginning_to_Believe.mp4
  7. GSAP + React.js The quest for best practices

    @rodrigo Really, really helpful and interesting. The second example was j-u-u-st above my head without working through the code. But it's great motivation for me to skip out of work & start my weekend early Many thanks again for the helpful advice.!
  8. GSAP + React.js The quest for best practices

    Yes.. Sorry early morning post. I'm losing the powers of articulation :). This is one thread I should've added. It's very useful for context.
  9. I've done a great deal of looking around... I could be off, but there seems to be a lack of authority on best practices for GSAP and react. There once was a 'gsap-enhancer' (no longer supported) that enabled jQuery-like targeting of dom nodes and their children. Syntax was easy. From looking around on the interwebs-- FindDOMnode() was once recommended for targeting... & then "ref='' " attrs (with it's callback feature--which is a bit above my paygrade to understand at the moment I'm frankly, beginning to feel a bit discouraged from using GSAP in react altogether because there is such a broad spectrum of misinformation out there. https://medium.com/@marcmintel/react-meets-gsap-c6dd82edeb72 In the comments, the author says "use refs!" but publishes code examples using findDOM node() 😭... It's endlessly frustrating for people to learn about this incredibly powerful, wonderful library. If only a tutorial were available with a simple example of iterating over some list-items using best practices... it would be a big help to a huge number of people. There are a few similar unanswered questions on stack overflow re GSAP and react as well... Clearly there is a gap to fill... ---That said, if anyone could point me in the right direction, I'll write the article myself for noobs like me who remain "out of the loop" P.S. For reference, I did this thing without realizing what a "breach" of best practices it is. I would so like to improve it so that I can learn about using GSAP and react properly. Anyway... Best wishes & many thanks in advance to whoever could point me in the right direction. Cheers, Beau
  10. target random DOM elements properly

    LOL --Great! I had a minor seizure... But I love it! This is kind of what I'm interested in doing. Thx so much for the help.
  11. target random DOM elements properly

    Hmm... I'm thinking "CC"... Kids, like Adobe CC, will have me paying out of pocket for the rest of my days.
  12. target random DOM elements properly

    So very cool, Carl. Thank you!
  13. target random DOM elements properly

    😭 naming my first kid after you. thank you!
  14. target random DOM elements properly

    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).
  15. Random (min,max) animation

    genius