Jump to content
Search Community

Search the Community

Showing results for tags 'refs'.

  • Search By Tags

    Type tags separated by commas.
  • Search By Author

Content Type


Forums

  • GreenSock Forums
    • GSAP
    • Banner Animation
    • Jobs & Freelance
  • Flash / ActionScript Archive
    • GSAP (Flash)
    • Loading (Flash)
    • TransformManager (Flash)

Product Groups

  • Club GreenSock
  • TransformManager
  • Supercharge

Categories

There are no results to display.


Find results in...

Find results that contain...


Date Created

  • Start

    End


Last Updated

  • Start

    End


Filter by number of...

Joined

  • Start

    End


Group


Personal Website


Twitter


CodePen


Company Website


Location


Interests

Found 3 results

  1. As you can observe in the code pen link, both the instances get triggered on interacting with any one of them. What concept am I missing? I guess this is because both button instances share the same ref. I am unsure. What is the gsap way of doing this? I read gsap context, This gsap thread, and gsap with react basics But I am still confused.
  2. While working on a GSAP timeline, I switched from targeting IDs to targeting refs. Now, I know that this code worked with targeting both #bgVideo and #bgImg: customTimeline = gsap .timeline({ scrollTrigger: bgFadeProps(), }) .fromTo( '#bgVideo, #bgImg', { opacity: 1, }, { opacity: 0, ease: fadeEase, }, '<' ); However, as soon as I switched both elements to refs, it doesn't seem to work the way I expected: customTimeline = gsap .timeline({ scrollTrigger: bgFadeProps(), }) .fromTo( `${bgVideoRef.current}, ${bgImg.current}`, { opacity: 1, }, { opacity: 0, ease: fadeEase, }, '<' ); I realize that the solution may also be super simple since GSAP is using querySelectorAll() under the hood, but I couldn't find other examples or this yet. What would be the right way to select these refs?
  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' ); });
×
×
  • Create New...