I want to get the position of the Skills component and add an animation when the scroll reaches to that point. However, it returns an error "TypeError: Cannot read property 'getBoundingClientRect' of null". I followed tried to follow this blog but I don't know what I am doing wrong. Can somebody help me?
Card.js
import classes from './Card.module.css';
import React from 'react';
const Card = React.forwardRef((props, ref) => {
return (
<section
className={`${classes.card} ${props.className}`}
id={props.id}
ref={ref}
>
{props.children}
</section>
);
});
export default Card;
Skills.js
const Skills = () => {
const ref = React.createRef();
const topPos = ref.current.getBoundingClientRect().top;
const onScroll = () => {
const scrollPos = window.scrollY + window.innerHeight;
if (topPos > scrollPos) {
// enter animation code here
}
};
useLayoutEffect(() => {
window.addEventListener('scroll', onScroll);
return () => window.removeEventListener('scroll', onScroll);
}, []);
return (
<Card className={classes.skills} id='skills' ref={ref}>
<H2>Skills</H2>
<div className={classes['skills-list-container']}>
<div className={classes['skills-list']}>{skillsList}</div>
</div>
</Card>
);
};
export default Skills;
ref.current before it gets attached to elementAfter creating a ref, you will need to wait for the initial render, then that ref will be attached to an actual element.
By doing like above, you are accessing ref.current before the initial render result in a null.
So just move it inside your onScroll function like so:
const onScroll = () => {
const topPos = ref.current.getBoundingClientRect().top; <-- MOVE HERE
const scrollPos = window.scrollY + window.innerHeight;
if (topPos > scrollPos) {
// enter animation code here
}
};
Moving your ref.current to eventHandler body because that handler is only being triggered after the component is completely rendered so ref also already be attached.