Need help implementing scroll animation

Answered

Anay-208 posted this in #help-forum

2024-03-05T10:30:54.000Z

I'm using a client component for scroll animation per word. Like this:

            <div ref={textRef} className="mx-4 text-center">

                    {words.map((word, index) => (
                        <span className=" text-black/50  text-3xl transition-all duration-500" key={index}>
                            {word}{" "}
                        </span>
                    ))}
            </div>

I'm using IntersectionObserver api to detect when the user scrolls.

Now what I want is that, when the user scrolls to this point in the page, the element should just stick to the top while I'm scrolling. Using fixed is not the smoothest

Answered by Anay-208

So, here's what i found:
- use sticky positioning for the thing I wanted
- use framer-motion for motion. its much easier to work with

View full answer

7 Replies

Holland Lop

2024-03-05T15:03:26.000Z

you should pass a function to intersection observer to set top-0 when element is intersecting something like this:
element.style.top = 0;

@Holland Lop you should pass a function to intersection observer to set top-0 when element is intersecting something like this: element.style.top = 0;

Anay-208OP

2024-03-05T16:28:32.000Z

I'm doing a similar one right now, but I also want it such that when the user is scrolling out of the component, it also disappears.

and this is also not that smooth

Anay-208OP

2024-03-05T17:20:52.000Z

I'm actually making this all custom. Should I use any library for it?

Tonkinese

2024-03-05T20:07:24.000Z

I might be out of date, but I still use gsap which has some great utility methods, but in the end... they're just utilities. They're not magic. I can see why someone might want to use an intersection observer to handle unneccesary computations for things that aren't in the viewport, but the way I would handle it would be to create an onScroll listener that's attached to the document or the parent that scrolls, and just use the observer to append a class that would be used in the scroll listener to get the items that are relevant at the time with a parent.getElementsByClassName... method. Then map through each element and use that elements getBoundingClientRect method to set whatever properties you need.

@Tonkinese I might be out of date, but I still use gsap which has some great utility methods, but in the end... they're just utilities. They're not magic. I can see why someone might want to use an intersection observer to handle unneccesary computations for things that aren't in the viewport, but the way I would handle it would be to create an onScroll listener that's attached to the document or the parent that scrolls, and just use the observer to append a class that would be used in the scroll listener to get the items that are relevant at the time with a parent.getElementsByClassName... method. Then map through each element and use that elements getBoundingClientRect method to set whatever properties you need.

Anay-208OP

2024-03-06T07:36:11.000Z

I think onScroll listener continously might be too heavy for older devices

Anay-208OP

2024-03-07T18:08:47.000Z

So, here's what i found:
- use sticky positioning for the thing I wanted
- use framer-motion for motion. its much easier to work with

Answer