catchnewyork

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(); });

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.

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?

Hello again. For my exact situation, setting the height of .home-below-animation to 100vh did the trick. As suggested, the area that is supposed to scroll must be smaller than the area of its contents to scroll. While this seems simple, it took a second to figure out. When the window scrolls it is only so high and the contents are larger. That appears to be what I was missing. Anyway, thanks again!

ok, thank you for looking at it.

Looks like I need to follow up on this..... @GreenSock Thanks again for helping me on the codepen example. I have taken all of that code and applied it to my dev site in an attempt to pull this off on the live site. And yet, my css is still getting in the way somehow. I'm hoping I am just missing something very obvious. The scss and html follows all of the principles of the fixed codepen in the above comment and looks like this: <section class="home-below-animation"> <div class="spacer"></div> <section id="home-products"> THE REST OF THE HTML IS INCONSEQUENTIAL TO THIS QUESTION, I BELIEVE </section> </div> </section> .container.fixed { position: fixed; top: 0; } .home-below-animation { width:100vw; overflow-y:scroll; overflow-x:hidden; top:0; position:absolute; z-index:1; pointer-events:none; .spacer { height:100vh; width:5px; position:relative; } #home-products { background:white; position:relative; } } In this code, the main thing to know is that .spacer div acts as a margin-top workaround that is 100vh, guaranteeing that the .home-below-animation div starts directly at the absolute bottom of the page. The goal is to bring that div up to the top of the screen. The tests I am running are below. The first test - - scrollDivTest is the one I am trying to get to work that is not working. It should do exactly what the code does in the codepen example. However, nothing happens. The second test - - scrollWindowTest is just to prove that the scrollTo plugin is in fact working as expected. And it works. The third test - - topDivTest is to show the desired functionality, essentially using the top property of the .home-below-animation div The fourth "test" - - topDivReset is to reset the third test. $scope.scrollDivTest = function() { TweenMax.to(".home-below-animation", .8, {scrollTo:"max"}); } $scope.scrollWindowTest = function() { TweenMax.to(window, 10, {scrollTo:"max"}); } $scope.topDivTest = function() { TweenMax.to(".home-below-animation", .8, {top:-700}); } $scope.topDivReset = function() { TweenMax.to(".home-below-animation", .8, {top:0}); } My followup question is... what am I missing here and why is .home-below-animation refusing to scroll? The development environment I am working on can be see here: http://john-guest-site-staging.herokuapp.com/en The tests can be run by clicking the blue links below the navigation.

@GreenSock Here is a link to the final codepen example. https://codepen.io/sias/pen/vzWWKR It makes more sense to view the pen in vertical mode to see how it is affected by the height of the various sections. But ultimately, I needed this to interact with scrollmagic so as you scroll, it scrolls the window to these various IDs. You nailed it with the idea of scrolling to the IDs. I didn't understand that the scrolling was in the view of the actual div that was being affected. So, thank you very much. Hopefully this will help someone else who is trying to accomplish this same trick.

thanks! that does help. ill post final pen that does what i am trying to accomplish...

hi gsappers! hoping someone can help me out. the scrollTo plugin is having no effect on the targeted div. i am wondering if anyone knows why this is and/or what i can do to make it scroll. i need to keep it inside of a fixed container for the project that this example is to be used for. please see the attached codepen for example. any insight would be much appreciated.

ah! gotcha. thanks for explaining that.

Hey, thank you! That worked to remove the error. As a heads up, and not sure if this was just my case, but when I included TweenLite the animations didn't fire. However, once I added TweenMax, everything worked as expected. <!DOCTYPE html> <html> <head> <title>TimelineMax test</title> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0"> <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/2.0.1/TweenMax.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/2.0.1/TimelineMax.min.js"></script> </head> <body> <script> var tl = new TimelineMax({}); tl.to("body", .3, {backgroundColor:"blue"}); </script> </body> </html>

Hi, I have been using TimelineMax/TimelineLight for a few years and usually it is being brought in by rails asset pipeline or as imports in an es6 app. But I started doing some testing locally, due to the complicated nature of my codebase and so i set up a test environment to try out some new things. It is simply way too much code for codepen, dealing with THREE.js and various other technologies, it would be a nightmare to navigate all of this code in one 'pen'. So... I kept getting the error TimelineMax not defined when I try to create a new timeline. I stripped everything out of my testing environment to try to understand if there was a conflict or something. The current minimum amount of code looks like this. <!DOCTYPE html> <html> <head> <title>TimelineMax test</title> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0"> <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/2.0.1/TimelineMax.min.js"></script> </head> <body> <script> var tl = new TimelineMax({}); tl.to("body", .3, {backgroundColor:"blue"}); </script> </body> </html> Can anyone tell me why I would be getting the following error in my console? Uncaught ReferenceError: TimelineMax is not defined

We recently had an issue where we needed to use calc() in a tween to get the width (100%) of and object and then to add extra padding around the outside to allow an object to move around a responsive button. We found that when doing this.. it didn't work: TweenMax.fromTo("#divName", 1, {x:0}, {x:'calc(100% - ${15 + (this.props.left || -9)}px)'}); However, if we used the calc function for both properties TweenMax.fromTo("#divName", 1, {x:'calc(0% - 9px)', {x:'calc(100% - ${15 + (this.props.left || -9)}px)'}); it worked fine. Not sure if this is relevant to this particular use case but it was a headache to track down this and hopefully it will help someone who wants to use the css calc function in a tween.

Thank you this is awesome!

TimelineMax and Bezier plugin have such amazing possibilities, but I am a bit stuck with a few things I don't understand. On this example, The things that don't make sense to me. 1) I did not know how to determine the starting point for the bezier circle. By default, it was starting in the bottom left, and so I rotated the entire svg, and then rotated negatively the play arrow to get it back to a normal starting point. This hack is fine but I am almost 100% sure it is going to cause me issues and may already be. Is there a way to determine the beginning of a bezier curve that allows me to place the object I am rotating around it at a particular starting point? 2) The animation works great if I use TweenMax and just animate it like a normal tween. But when i create it as a TimelineMax animation that occurs on hover it starts way off the bezier curve, I'm assuming it is where it should have started in the first place before i rotated it and all of that. Once you hover over it, it jumps right on the path. Is there a way to snap it to its starting point while TimelineMax is paused? This may be the same question as 1... 3) Is there a way, besides breaking it in 2 bezier curves to have the hover animation stop in the middle of its bezier curve trip? I would prefer to have the animation pause in the middle and then on mouseout, complete the rest of the animation. But I don't see a way to have a bezier animation stop before it gets to the end. Any thoughts would be appreciated!