Questions tagged [react-intersection-observer]
52 questions
5
votes
2 answers
Intersection Observer API going into infinite rendering loop
I am trying to use the intersection observer API to conditionally display items in a CSS grid when the user starts scrolling, but it seems to go into an infinite rendering loop. Here is my code.
Here is the link to my live code on StackBlitz
Also…
Soham Dasgupta
- 5,061
- 24
- 79
- 125
4
votes
3 answers
How do I turn off Framer Motion animations in mobile view?
I am trying to create a React website using Framer Motion, the problem is that my animation looks good in desktop view, but not really in mobile. Now I want to disable the animation. How do I do this?
iamkyo
- 71
- 1
- 2
- 7
3
votes
1 answer
Why does a react component, tested with React Testing Library has issue with react-intersection-observer?
I wrote a component built with react 17.0.2 that uses react-intersection-observer 9.1.0
import { useInView } from 'react-intersection-observer'
...
const [ref, inView] = useInView({
threshold: 0.99,
root: scrollRef.current,
…
axel
- 3,778
- 4
- 45
- 72
3
votes
1 answer
IntersectionObserver in useEffect with TypeScript and Next js
I'm trying to use IntersectionObserver in UseEffect and it works fine but TypeScript is complaining about cachedRef. It says:
Argument of type 'HTMLDivElement | null' is not assignable to parameter of type 'Element'.
I've seen this question but…
J C
- 85
- 2
- 8
3
votes
0 answers
react-spring and react-intersection-observer - tons of rerenders
JSFiddle
Code:
export default function App() {
const spring = useSpring({ from: { opacity: 0 }, to: { opacity: 1 } });
const [ref] = useInView();
rerenders++;
return (
John Smith
- 3,863
- 3
- 24
- 42
2
votes
1 answer
Implementation of react-intersection-observer module not working on multiple components
I am struggling with the implementation of the "react-intersection-observer" and i can't for the life of me find a solution.
Details:
I have a simple presentation site which i wanna do with React so i can also learn. Right now the website has only…
Andrei Teodorescu
- 21
- 4
2
votes
0 answers
React useInView triggers before Element is in view
I am building a scroll triggered animation in React, however some elements are triggered before they are in the view.
For this I have built a small component for triggering:
import { useInView } from 'react-intersection-observer';
import {…
DeadApe
- 416
- 1
- 3
- 10
2
votes
0 answers
React intersection observer does not work when responsive
I'm using react-intersection-observer in order to make some animations when the component is in view.
It works cool, but, when i try to go to a mobile screen, like, 633px width and 400px height, it does not work, and i really don't know why.
Let me…
Diego
- 421
- 3
- 9
- 34
2
votes
1 answer
Framer motion Animate Presence exit issue
I am having an issue with framer-motion AnimatePresence component. I am trying to start the animation after the component is visible within the viewport, to achieve this, I used react-intersection-observer. It works as intended for the starting…
paul
- 121
- 1
- 10
1
vote
1 answer
Why I take 'Expected 1 arguments, but got 2.' error of IntersectionObserver?
I converted a code (from https://react.dev/reference/react/useEffect#usage) to TypeScript like:
function Box() {
const ref = useRef(null);
React.useEffect(() => {
const div = ref?.current;
const observer = new…
Carasidelt
- 47
- 5
1
vote
3 answers
React : render a component only when they are visible ( react-intersection-observer )
We have some components that we want to render only once they are visible. Once rendered we do not want them to be invisible again.
What is the best way to do this with react-intersection-observer (without creating additional divs) ?
ic3
- 7,917
- 14
- 67
- 115
1
vote
1 answer
hide text before animaiton get triggered
I use react-intersection-observer and enter code here. I have multiple titles on my page and when I scroll, I want the animation to launch when the title is in the view.
This part ok, I get to trigger animation when visible.
Problem: I trigger…
Johan
- 2,088
- 2
- 9
- 37
1
vote
1 answer
How to set root in react-intersection-observer
I got a list based on I render list items I want to track which elements overflows container (especially index of first elements that overflew) in order to do this I wanted to use react-intersection-observer library.
My problem:
const List =…
Kacpero
- 11
- 4
1
vote
0 answers
React & Typescript Issue: trigger elements with InsertionObserver using props and manage them in other component
Small premise: I'm not a great Typescript expert
Hi everyone, I'm working on my personal site, I decided to develop it in Typescript to learn the language.
My component tree is composed, as usual, of App.tsx which render the sub-components, in…
AlexCav
- 21
- 5
1
vote
0 answers
Intersection observer not observing
I am trying to observe an element to apply animations on it. I have used intersection observer before but this time for some reason its not working. I am unable to find the issue.
Below is my js code
useEffect(() => {
const observer = new…
user19763623