Jump to content


Defining Tweens for Intersection Observer

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 question is more of a best practice question.


I'm in a react app and right now, I'm defining all of my tweens as separate functions and importing them when needed. 


Is there any reason why "you" should not define Tweens in a separate file?


I'm doing this because I plan on passing them to a Intersection Observer as the callback.

Link to comment
Share on other sites

I don't think it's an issue, no. But I don't use React much. Have you run into anything that has given you concern?

Link to comment
Share on other sites

Let's fire up the @Rodrigo React Signal.



  • Like 1
  • Haha 3
Link to comment
Share on other sites

@ZachSaucier no nothing ill has happened yet. My only worry at this point is making sure I kill my tweens and timelines appropriately. 


For example... in a component, I might call a tween like this:


const Component = () => {
  const nodeRef = useRef(null)
  useEffect(() => {
  	// imported up above of course...
    return () => {
    	// import TweenMax above
      	// Does this kill the tween even through the actual Tween
      	// is located in another file?
  }, [nodeRef.current])
  return // Stuff


I'm not sure if that call to killTweensOf() actually kills the tween. 


Is there a way to figure out for sure if a tween is "dead"?


I didn't see anything in the docs.

Link to comment
Share on other sites

Honestly I haven't played with the intersection observer API at all. By doing some quick reading on the subject I don't see any issue as long as you're careful about passing an actual DOM node to the function that creates the GSAP instance. IMHO I don't see any big issue on keeping the code that creates the GSAP instances inside the components unless is exactly the same code for a bunch of different components, and I mean that in the DRY-way (Don't Repeat Yourself), ie, if you don't want to write the same code over and over again.


Regarding the kill feature, this is not like a biological kill in terms that the GSAP instance ceases to exist, basically the instance is stopped and you can be sure that is not moving in any direction and that anything related to it will be executed until is explicitly set in that way. If you want to completely remove the instance you can reset it's reference in memory with null. The only check I can think of is the isActive() method, that should return false if the GSAP instance was killed. Finally the GSAP instance should be killed even though is instantiated in a different file because the DOM node will have a reference to the instance's position in memory, this does not depends of the context where the animation is actually created, which is exclusive of the code block where it happens. Also keep in mind that this will eventually happen in the same file but in a specific closure of the bundled file between lines X and Y.


Happy Tweening!!

  • Like 2
Link to comment
Share on other sites

@Rodrigo Thanks!! I'll report back if I can get all of this working correctly.

  • Like 1
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.