Jump to content
GreenSock

catchnewyork

Destroy scrollTo funcitionality

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

Hi again,

We recently added scrollTo functionality to an angular directive. It is being called in a timeline that is attached to a scrollmagic scene. I get the following message after we leave the view that corresponds with the directive that utilizes this functionality.

 

Uncaught TypeError: Cannot read property 'getBoundingClientRect' of null
    at f (ScrollToPlugin.min-449909cf0743c3496176afed49ec7c50.js?body=1:13)
    at g (ScrollToPlugin.min-449909cf0743c3496176afed49ec7c50.js?body=1:13)

 

I wonder is there a way to destroy this functionality when switching views? It appears the scrollTo plugin is adding an event listener that needs to be removed. In angular I have access to  scope.$on('$destroy', function(){ }  ... inside of which, I'd like to remove the listener. Does anyone know how that is done?

Link to comment
Share on other sites

Hm, it sounds like maybe you're creating a tween with selector text that doesn't actually return anything when that tween renders for the first time. You can kill() the tween, of course (like if you're removing the element and you no longer want the tween to run). 

 

ScrollToPlugin does NOT use addEventListener() at all. The error you're getting would only occur on the very first render when the tween is trying to figure out the starting/ending values (which it caches for the rest of the tween's duration). 

 

If you're still having trouble, feel free to post a reduced test case (maybe stackblitz.com?) and we'll try to take a peek. Disclaimer: I have zero Angular knowledge/experience. :)

  • Like 1
Link to comment
Share on other sites

cool. thanks. Good news is this is not causing any issues except a nagging console error on scroll outside of the directive's view. So its not top priority. I will probably do a codepen to recreate this soon... and will check out stackblitz too. There is so much code involved that I need to figure out how to reduce it. Could be scrollmagic needs to be ejected somehow. Maybe killing the timeline on angular's destroy function is needed. Will update if I figure anything out.

Link to comment
Share on other sites

So, I do not know if the issue is the scrollTo functionality itself or why the angular directive that houses the timeline code continues to run even when the directive itself has been destroyed. However, I found the solution! 

 

All i had to do was clear the timeline that invokes the scrollTo functionality in the directive's scope destroy function and all is GOOD!

 

scope.$on('$destroy', function(){
  tl.clear();
});

 

  • 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.
×