Jump to content
Search Community

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

eatmangos test
Moderator Tag

Warning: Please note

This thread was started before GSAP 3 was released. Some information, especially the syntax, may be out of date for GSAP 3. Please see the GSAP 3 migration guide and release notes for more information about how to update the code to GSAP 3's syntax. 

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,
})
  • Like 1
  • Thanks 1
Link to comment
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 6
Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.
×
×
  • Create New...