Jump to content
Search Community

Using IntersectionObserver and React (custom hook) with GSAP

Marina Gallardo test
Moderator Tag

Recommended Posts

Hello,

 

I hope you can help me with this. I am trying to create a custom hook for creating an image parallax using intersectionObserver API. Seems work partially but when I scroll I get this error:

 

backend.js:6 Invalid property y set to 47.666666666666664 Missing plugin? gsap.registerPlugin()

 

My goal: using Y or backgroundPosition from/to everytime the element is visible.

 

 

import React, { useEffect } from 'react';
import { gsap } from 'gsap/all';
 
function useImageParallax(imagesParentSelector) {
useEffect(() => {
const appWrapper = document.querySelector('.app--layout');
const elements = document.querySelectorAll(imagesParentSelector);
const scrollHandler = () => {
let options = {
root: null,
};
// parallax effect
let observer = new IntersectionObserver(function(entries) {
entries.forEach((entry) => {
const offset = appWrapper.scrollTop / 3;
gsap.to(entry, { y: offset });
});
}, options);
 
for (let elm of elements) {
observer.observe(elm);
}
};
appWrapper.addEventListener('scroll', scrollHandler, { capture: false, passive: true });
return () => {
appWrapper.removeEventListener('scroll', scrollHandler, { capture: false, passive: true });
};
}, [gsap]);
}
export default useImageParallax;

 

See the Pen by s (@s) on CodePen

Link to comment
Share on other sites

Hey Marina.

 

It looks like you're trying to animate the entry of the intersection observer, but the entry's target is the reference to the actual element itself. This should work I believe (but it's untested given you didn't provide a minimal demo):

gsap.to(entry.target, { y: offset });

 

2 hours ago, Marina Gallardo said:

I also tried to add this, as I read in other threads:


import { CSSPlugin } from 'gsap/CSSPlugin'

I'm curious - what thread suggested this? You never need to import or register CSSPlugin in GSAP 3. It's baked into GSAP's core.

  • Like 2
Link to comment
Share on other sites

6 hours ago, Marina Gallardo said:

I also tried to add this, as I read in other threads:


import { CSSPlugin } from 'gsap/CSSPlugin'

// Force CSSPlugin to not get dropped during build
gsap.registerPlugin(CSSPlugin)

 

Where do you see that? I think that should be deleted. 

 

It's best to stick to what the installation documentation says, and by using the install helper.

https://greensock.com/docs/v3/Installation#modules

 

 

  • Like 3
Link to comment
Share on other sites

Sorry, the thread made references to GSAP 2 then. I was a little confused.

 

I'm sorry to not providing a demo, I want to but codesandbox.io it's down, I'll try to figure out how to make a codepen demo as a React project with dependencies. I tried for a while without success, I'l try later again.

 

I'm very grateful for your help! I am very newbie, but all of us are newbies before experts and with your help and documentation guide I'll make it.

 

I fixed the missing plugin issue, but gsap translate effect are applying to all elements at the same time, not the visible element... I'll go deep into the Observer, sure I am doing something wrong.

Link to comment
Share on other sites

Well you can start by changing your import. If you do export default, you cannot import with braces.

import useImageParallax from "../src/useImageParallax";

 

But you have a bunch of errors you need to fix, like some elements that can't be found. And if you're using intersection observer, you don't use scroll events for it. It observes scroll changes for you.

 

  • Like 2
Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.
×
×
  • Create New...