beau_dev

Members
  • Content Count

    33
  • Joined

  • Last visited

Community Reputation

29 Newbie

About beau_dev

  • Rank
    Advanced Member

Contact Methods

Recent Profile Visitors

316 profile views
  1. I thought I might thank the people in this thread for helping me to make this happen. @Rodrigo & @OSUblake
  2. This is lovely... omg.mp4
  3. @rodrigo Thanks so much for this reply. I'm needing of a "push over the edge". I've taken your point about the modifying of the prototype. I've taken your point about the "string refs"--I've opted to use the callbacks (after a bit of a rabbit hole adventure). I simply can't seem to implement this code into a full working example. I wonder if you'd kindly help me out. Perhaps it will help others in future. Thx again for all of your hard work. -Beau
  4. Really, really helpful... as was your article on gsap & react: https://greensock.com/react thanks so much. I'll try to put it all together using ref callbacks & see if I don't break the internet with it. -B
  5. Dear GSAP Magicians, I have an array of 5 fruits and 5 veggies (concat-ed) into one array of 10 (<li>) elements. They move from left to right in a very simple tl.to() timeline. (Using React, I'm dutifully targeting with refs.) What I wish to do is randomize 3 things: 1) the element moved 2) their velocity (duration) (and perhaps) 3) the "-=n" delay (so that more than a single element would perhaps be in motion at the same time. I have a fancy-schmancy method on the prototype that would (seem to) give me the id of each element randomly. Problem #1: I smell perf💩™. This approach seems over-engineered... requiring iteration over the entire array at each sequential iteration using .map(). Problem #2: The flow is unnatural. The randomized `-=${randInt(12, 30)}` –for example, seems to cause unexpected behavior (one or more elements "appear" and/or slow down mid-stream). Would anyone kindly advise me as to how to proceed? (I may just give up and run two separate arrays of 5. So that their elements are enabled to float randomly past each other. Then, call it a day...) But, I'm looking for a creative solution with a minimum of code that allows for a bit of dynamism. Ultimately, I'd like to simulate a scenario that resembles observing a far-off highway...where some cars that go by get overtaken while still in view. Best & thanks again, B
  6. This looks interesting I would like to know about this, too! (wish I could help, btw).
  7. beau_dev

    React.js navmenu (onHover) running only once(?)

    Your solution (#2) works! beau.haus thanks so much!
  8. beau_dev

    React.js navmenu (onHover) running only once(?)

    incredibly helpful... I'll try to work on a test case and post it. Many thanks!
  9. 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' ); });
  10. beau_dev

    target random DOM elements properly

    Hahaha... looks like I'm going to have a busy week... *ahem.
  11. beau_dev

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

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

    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.!
  14. beau_dev

    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.