search

w3c / IntersectionObserver

Intersection Observer
https://www.w3.org/TR/intersection-observer/
Other
3.62k stars 526 forks source link

Any fixes with SVG elements yet? #376

Closed danboyle8637 closed 3 years ago

danboyle8637 commented 5 years ago

I saw an old issue in 2017 with Intersection Observer not working with SVG. I am still finding this to be the case.

When I setup my observer on an element of an SVG it immediately kicks off an entry even when the SVG isn't on screen yet.

And it never records any further entries or isIntersecting.

I am currently testing in Chrome.

danboyle8637 commented 5 years ago

Just messing around and so far I have found the observer will observe the element as a whole, but not any of it's inner elements.

1sd15 commented 4 years ago

Any further updates on this? Still got the issue myself. I heard it was a Chrome-Based Bug and it seems to work on Firefox. Either this is an issue with Chrome or Interaction Observer. Need it for Lazy Loading the Image Elements in the SVG as they are CMS/Client Side and often rather large and it speeds up the site a lot to defer them.

danboyle8637 commented 4 years ago

@1sd15 I do have an implementation that works. But I have to look back to see if I can set it on the SVG.

Most of the time I am observing a wrapping section or div.

I will check it out and get back to you. Sorry for the late response.

prat391 commented 4 years ago

Hi,

I'm facing the exact same issue. I'm trying to use Intersection Observer to delay animations on multiple elements inside an SVG. While IntersectionObserver is firing on the top level svg, it doesn't on the child level elements.

Any help would be appreciated, thanks.

danboyle8637 commented 4 years ago

What I have been doing is using another element to listen to with my observer. Usually I will listen to the main SVG element itself and then orchestrate the animations from there. Lately I have been using Framer Motion in my React apps and sites and it makes orchestrating these animations very easy.

prat391 commented 4 years ago

hi!

I am an absolute beginner, so even though in theory i understand what you're saying, i won't be able to implement it :/

My question is, can i use either just the parent svg class to trigger the entire animation, or use a separate element altogether to trigger the animation?

What would the code look like for this? I am a beginner so i am having a tough time figuring this out. In layman terms, i want this: when x comes into view, trigger all the animations for Y.

Thanks

danboyle8637 commented 4 years ago

Sorry I am working on a project with a deadline of this weekend. I will show you how I built my intersection observer in Hugo. I think that is the closest to vanilla JS and HTML. I will make a video and also post some code on a CodeSandbox. Sorry but I am under a serious deadline.

IamSaransh commented 4 years ago

@prat391 if you are working with basic HTML and javascript then I can send you a code snippet of how I achieved it for my project. I am very new to React so I won't be of much help. Drop a message if you want code snippet. That might help you.

prat391 commented 4 years ago

@Sonny1314 would greatly appreciate it thanks!

IamSaransh commented 4 years ago

I have also provided codePen link below. Hope it helps. So here is the basic layout of my code structure. I have pasted an SVG file inside my HTML document directly. You can use element to insert as well but the js code will change slightly. So I have Two sections _and I have nested the SVG inside the second section of my code. I have used Intersection observer to observe the Second section ie. <section id="section2">**MY SVG CODE HERE**<section/> and once the intersection ratio of the second section is above 0 I have used javascript to toggle classes (animation class defined in my CSS) and the SVG elements.

below are the code snippets. HTML CODE image ..inline css for filling svg elements and then comes picture of the svg elemets image

MY CSS CLASSES FOR ANIMATION image

JS CODE: image

I have used window.addEventListener("load", function() { so that everything is executed after the whole page loads. Then coming to line 7 I have stored value of my section in which SVG is located in a variable called section. I created a new intersection observer and Iam observing this section variable as you can see in line 30.

`var TreeLeft = document.getElementById("_3TreeLeft"); // left tree is element in my svg if(entries[0].intersectionRatio > 0){

         TreeLeft.classList.toggle("slide-in-bck-bl-left-tree"); 
         house.classList.toggle("slide-in-bck-bl-house");
         TreeeRight.classList.toggle("slide-in-bck-bl-right-tree");
         moon.classList.toggle("Moon");

     }`

Now when the intersection ratio is more than one I select the element in SVG and toggle an animation class to it.

The CodePen link is below, make sure to switch to the sideView in CodePen to make viewport height big.

CODEPEN LINK: https://codepen.io/sonny1314/pen/GRovpEQ

image

szager-chromium commented 3 years ago

Just to confirm the discussion thus far: chromium does not currently support observing an svg element other thant the top-level . There is a chromium bug tracking this:

https://bugs.chromium.org/p/chromium/issues/detail?id=963246

As this is not an issue with the spec text, I am closing this issue.

  • © Githubissues.
  • Githubissues is a development platform for aggregating issues.