Questions tagged [react-intersection-observer]
52 questions
1
vote
0 answers
React Lazy loading and infinite scoll to top
I am currently working on a messaging platform and previously, we just load all the messages at once as there are not that many messages. Now that that there are many messages, it is starting to take a long time to load everything.
As such, I would…
Mervyn
- 11
- 3
1
vote
0 answers
Smooth scroll (locomotive scroll) and scroll triggered animation (framer motion + react-intersection-observer) bug
How can we make smooth scroll from locomotive scroll and scroll triggered animations (with framer motion and react-intersection-observer) coexist ?
I've made a very basic codesandbox with smooth scroll enabled and a small animation scroll triggered…
Alexandre PUJOL
- 121
- 8
1
vote
0 answers
Stagger divswhen they are in view using react-intersection-observer and framer-motion
I'm working on a React app and I want to add some animations using react-intersection-observer and framer-motion.
CodeSandbox
So far, everything is working correctly. All my divs are animating when they are in view.
But I want to add staggering to…
Marius Gardelli
- 77
- 7
1
vote
1 answer
How can we specify the time upto which an element should remain on viewport in Intersection Observer
I am using Intersection Observer API in react to detect an element coming on viewport. But I also want that the element should remain on viewport for minimum 3 seconds and detected after that. How can I do so? Give below is the code I am using.
…
Khushboo Gour
- 21
- 2
1
vote
0 answers
How to change viewport from browser window to my declared component when using react-intersection-observer?
I am using react-intersection-observer. I am trying to change bar color from orange to purple only when the bar comes inside the green box as shown in the image below.
i.e I am trying to change my viewport from the browser window to the green…
Pawan
- 459
- 5
- 17
1
vote
0 answers
ReactJS Intersection Observer only working once if I change something in App.tsx... if I refresh the browser, it will not work work anymore
I am facing an issue where the intersection observer only working once I have changed something in App.tsx and saved it via "ctrl+s"
App.tsx:
import React, {
lazy,
RefObject,
Suspense,
useState,
useEffect,
…
69JonDoe69
- 41
- 1
- 6
1
vote
1 answer
Framer animation using react intersection observer. Need multiple animations but get only one
I'm trying to assign the same animation to multiple instances of a component, using Framer Motion and the react-intersection-observer package
import { useEffect, useRef, useCallback } from "react";
import { motion, useAnimation } from…
MrFacundo
- 167
- 3
- 13
1
vote
0 answers
Change header color from transparent to white using react intersection observer
I am trying to change the background color of my header which is fixed on top when scrolled 100px from the top. How can I achieve this using react-intersection-observer? Is there any way to add a className to my object if the viewport is scrolled…
Sachin Titus
- 1,960
- 3
- 23
- 41
1
vote
0 answers
Intersection observer used in conditional inner root output in React
I am trying to use the intersection observer to lazy load components.
The parent component is conditional and doesn't render immediately until a keyword is searched. The intersection observer should be triggered when the rendered component touches…
badex
- 11
- 1
1
vote
0 answers
Framer Motion/React- Inline styles by framer persisting after new variant is passed to the motion component
Working on a 'Gallery' component that has two children, 'GalleryImage' which animates via Framer-Motion when the variable 'inView' is true which is provided by 'useInView' from react-intersection observer. My issue is that these images need…
Quan Cao
- 105
- 1
- 8
1
vote
1 answer
Cannot update a component from inside the function body of a different component warning
I wrote a component called component1 as below and it is inside the parent component. The component1 is at the bottom of the page and I don't want to render it unless the user scroll down to that area. Thus I use the InView from…
bunny
- 1,797
- 8
- 29
- 58
1
vote
2 answers
React ref.current is undefined in useLayoutEffect
I'm trying to implement a POC for a horizontally scrollable section on a project. I have 3 h3s next to each other above the horizontally scrollable section, the h3s should correspond to the individual sub-sections in the horizontal bit.
I am using…
louis.sugar
- 171
- 9
1
vote
1 answer
React-spring how to animate letters of an array correctly
In this code with react-spring I am getting an animation where each letter waits until the previous animation ends, and also in the meantime it is being animated
Why is this happening, and how could I fix it?
const text = [...'hey there how are…
GWorking
- 4,011
- 10
- 49
- 90
0
votes
0 answers
Issues with SVG Path Animation using Framer Motion in React(Next.Js)
I'm currently facing an issue while implementing SVG animations using Framer Motion in my NextJS project. I'm trying to animate certain paths within an SVG element when they come into view (viewport). However, the SVG animations don't seem to be…
umar
- 1
0
votes
0 answers
intersection observer is working when I add a small change in code add a console log like this
intersection observer is working when I add a small change in code add a console log like this, but I open that page to duplicate tab , that's not working
this is my code
const airlineSideMenuObserverRef = useCallback(() => {
const obbb =…
Tharmi
- 1