Jump to content
Search Community

SVG - TweenMax - and Intersection Observer

danboyle8637 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

I asked a question about intersection observer here:

 I wanted to update because I got my intersection observer working. I set it up as a hook to watch DOM elements you pass in from any given React component.


I found a three year old post saying that Intersection Observer has issues with SVG. And through experimenting, I found you can only observe the top level <svg> element. 


But through observing the <svg> as a whole, you can still pass a reference through to my observer hook to trigger an animation.


In this codesandbox: https://codesandbox.io/embed/intersection-observer-svg-tweenmax-u6ief


When you scroll down, you can see the little compass icon starts animating when it hits 200px from the bottom of the view port.


But when I scroll the icon off the screen and back on, I can't get my animation to replay.


I am using a TweenMax but I have tried to use a timeline and that doesn't work either. 


I hope my code is followable.

See the Pen by embed (@embed) on CodePen

Link to comment
Share on other sites

Honestly I'm out of my element with the intersection observer API here so I won't be able to help you with that, sorry :blink:


The one thing that gets my attention is the fact that the animation's target is the same element. If we're not talking about a dynamic element why not create the animation in the same component and trigger it with the intersection observer (if that is even possible).


By playing a bit with your code and adding some callbacks I can see that the animation is actually starting, updating and completing, so the issue lays on the DOM node passed to it not being affected by the GSAP instance which is odd.


Unfortunately the only advice I can give you is try to create your animation inside the component and just control that instance instead of creating it over and over again and use that in the component's hook.

  • Like 3
Link to comment
Share on other sites


@Rodrigo I did create my animation in the component itself and I have it working now. 


Nevermind. I'm still getting some strange behavior with the animation. I must be a react thing. I'll update my example once I run through a few ideas.


I also look at this tutorial again which helped. https://medium.com/the-non-traditional-developer/how-to-use-an-intersectionobserver-in-a-react-hook-9fb061ac6cb5


A little confused on how a state change is handled from within a ref... but that's a react thing.


But by returning the entry that's being observed... and then using the isIntersecting property... you can trigger the animations and it does work.


Now I need to test it with 10 or more observers on one page!




@mikel Thanks too for you pen. I like to see all these examples.

Link to comment
Share on other sites

@Rodrigo @mikel

Not sure... I changed my code sandbox and moved the animation to the SVG component. 




It works or at least seems to but if you scroll up and down the screen... you'll notice the animation starts to "die"... it moves less and less each time. 


But the isIntersecting property still fires correctly. 


I've tried it will TweenMax and TimelineMax but they both do the same thing.


I wanted to use Intersection Observer because it's performant... and I don't think ScrollMagic uses it... it still listens to scroll events... I think.


Is ScrollMagic still the best option for scroll based animations?

Link to comment
Share on other sites



As I was researching the best ways to do scroll animations... that's when I learned about intersection observer. 


And for performance reasons, "they" said to stay away from scroll events because the window is constantly listening even when the element is out of the viewport.


My needs are pretty small... I think.


The most animations I have are on a page where I have small benefit paragraphs with a SVG icon. I wanted to animate these icons on scroll. Some of them just for user experience (something cool)... some of them because they help show what the benefit paragraph is talking about... a little demo.


I've used scroll magic in the past and it seems to work fine, but I feel like I always need to be on the bleeding of performance and page speed.


Thanks for the demos. I'll have to dig into the moon landing one for sure. 

  • Like 1
Link to comment
Share on other sites

On 7/22/2019 at 11:31 AM, danboyle8637 said:

Is ScrollMagic still the best option for scroll based animations?


Was it ever the best option for scroll based animations? ;) It just makes certain things more simple to do on scroll. 


Doing some things on scroll is fine. You need to be mindful of what you're doing on scroll though. And often times it's a good idea to throttle the scroll event. 

  • Like 1
Link to comment
Share on other sites

@danboyle8637 I made a scroll spy for a React app a while ago based on this repo: https://github.com/makotot/react-scrollspy. It is quite experimental and rudimentary, If you want I can look around to find it and give it to you so you can check it. The principle is quite simple, the code listens to the scroll event (I know is not the best way) of a main wrapper and compares the scroll top value with the position of the elements that you want to animate or in the use case of that particular project set the active menu item. When the scroll position exceeds the top position of an element and if the current element is different from the value stored in the state, it updates a visible property in the state. Like that the state is updated only once per element and not on every scroll update. Is not the most efficient way but is far more efficient than constantly updating the state on every scroll event.

  • Like 1
Link to comment
Share on other sites

@Rodrigo Thanks, but I think I have this working. At least on my code sandbox project.


I am going to be testing it on my dev site and across browsers to see what happens but I am not losing any animation performance when my SVG gets triggered by the intersection observer.


The short of it was I think two things. 


One... I have an "exit" animation that's slightly different so when the SVG goes out of the root, it runs that animation. Then when it comes back into the root, it runs the "original" animation. 


Two... I am using state to trigger the animation running. I'm not sure if my thought process is correct, but because I'm triggering a rerender of the component and the animation is changing, I'm getting a new instance of the animation. I think that thought process of what react is doing is correct. 


Anyway, after I test it some more, I'll report back.

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