Animate elements based on container rather than page

When I want to animate a specific element in a specific section of a page, I have to create a really long-winded code solution to allow me to do so.

For example, I have to use the viewportscroll whilst calculating my sections offset from the top of the page and my sections height too, to be able to work out when to run the desired animation on an element either inside the section or on the page in general.

In short: Im wanting to tie an animation to a specific section of my page.

Heres my current code solution that is working - but it is messy and constantly means I have to repeat the code for every component:

    const ref = useRef();
    const [elementTop, setElementTop] = useState(null);
    const [elementBottom, setElementBottom] = useState(null);
    const [elementHeight, setElementHeight]= useState(null);
    
    useEffect(() => {
        if (!ref.current) return;
    
        function setValues() {
            setElementTop(ref.current.offsetTop);
            setElementHeight(ref.current.offsetHeight);
            setElementBottom(elementTop + elementHeight);
            scrollY.current = scrollY.current + elementHeight;
        };
    
        setValues();
        document.addEventListener("load", setValues);
        window.addEventListener("resize", setValues);   
       
    },[elementTop, elementBottom, elementHeight,]);
    
    let start = elementTop - elementHeight;
    let end = elementBottom - elementHeight;

    const closedRotate = useTransform(scrollY, [start, end], [0, -20], { clamp: true });
    const closedPosL = useTransform(scrollY, [start, end], [200, -300], { clamp: true });
    const closedPosY = useTransform(scrollY, [start, end], [-100, 300], { clamp: true });

I would like a solution that is written the same way as useElementScroll - as i was unaware that useElementScroll was only made for a scrollable (overflowed) div.

I want to be able to specify a REF of my section container and only animate from within that ref when the section is within the vewport.

[liqueflies]

Hello, I have a particular issue with useScroll({container}) option. If you are on a child component and you want to track its scroll progress based on a container ref that it’s from the parent component, it will not trigger any value change. I tried passing the parent ref as a prop or getting the div with getElementById but it didn’t work. I have a list of Card that should parallax but are contained into a scrolling div instead window.

[olehkhalin]

Hello, I have a particular issue with useScroll({container}) option. If you are on a child component and you want to track its scroll progress based on a container ref that it’s from the parent component, it will not trigger any value change. I tried passing the parent ref as a prop or getting the div with getElementById but it didn’t work. I have a list of Card that should parallax but are contained into a scrolling div instead window.

Have you managed to solve this issue?