Jump to content
GreenSock

Search In
  • More options...
Find results that contain...
Find results in...
eatmangos

Is there a clean up function that I should be running within my useEffect Tweens

Recommended Posts

My goal is to fix buggy performance when iterating a large array using React refs and Gsap tweens. Is it possible to remove DOM nodes when they leave the view port as a user scrolls, maybe in combination with React Intersection Observer?

For example..

useEffect(() => {
    TweenMax.to(hoverRef.current, .2, { opacity: hovered ? 1 : 0 })
    TweenMax.to(imageRef.current, .5, { scale: hovered ? .5 : 1, opacity: hovered ? .9 : 1, ease: Back.easeOut, y: hovered ? '-12px' : '0px', })
    TweenMax.to(imageRef.current, .2, { delay: .1, y: hovered ? '-12px' : '0px', })
    !props.fromExplore ?
        (TweenMax.to(utencilRef1.current, .5, { x: hovered ? 0 : 20, rotation: hovered ? 0 : 20, ease: Back.easeOut }) &&
            TweenMax.to(utencilRef2.current, .5, { x: hovered ? 0 : -20, rotation: hovered ? 0 : -20, ease: Back.easeOut }))
        :
        TweenMax.to("#nothing-999", 1, { opacity: 0 })
}, [hovered])

VS

useEffect(() => {
    ...
    return function cleanup(){};
}, [hovered])




const [trackingRef, inView, entry] = useInView({
    threshold: 0,
})

Share this post


Link to post
Share on other sites

Hi,

 

You should try using the Transition wrapper from React Transition Group to unmount the elements after the animation is complete.

 

This was discussed in this thread, where @OSUblake shares His approach to this as well:

You could definitely use the intersection observer API, to set the in property in the <Transition> element to remove the elements if you want to animate them out. If the element is not going to be visible anymore (because of the scroll position) then you could use the intersection observer and simply use state or props to conditionally (not)render the element.

 

Finally as an advice you're running a ternary operator several times in the useEffect hook based on the hoveredvalue. Since you're in a function just create an if statement, an object and add the properties as keys and the values depending on the value of hovered. In terms of performance it shouldn't really matter (unless you run a few hundreds in a short span of time), but your code will be easier to read and maintian, just my two cents on the subject.

 

Happy Tweening!!!

  • Like 4

Share this post


Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...

  • Recently Browsing   0 members

    No registered users viewing this page.

×