Jump to content
Search Community

NextJS/ReactJS: ScrollTrigger + Context with Timelines?

Jim NZ test
Moderator Tag

Go to solution Solved by mvaneijgen,

Recommended Posts

Hi there,

 

I'm relatively new to NextJS and React, and am trying to nail GSAP integration in NextJS. 

I've come across an issue I can't seem to get around.

In my codepen example how can I use timelines? I get unusual behaviour when I change to this type of format:

 

 useIsomorphicLayoutEffect(() => {
// PROBLEM 1: I tried to use `const tl = gsap.timeline()` here.
// then change `gsap.context()` to `tl.context()` but I get errors. 
    let ctx = gsap.context(() => {
      return () => ctx.revert() // cleanup
    }, [])
    
// PROBLEM 2: works okay with `gsap` but not this. 
    const tl = gsap.timeline();

    // 1. SCROLLTRIGGER ANIMATIONS
    tl.to('.spin_text', {
      scrollTrigger: '.gsap_orange',
      duration: 2,
      rotation: 360,
    })
    // ... etc

    // 2. OTHER GSAP ANIMATIONS
 
  }, [scrollPage.current]);

Thanks,

Jim

See the Pen rNqjMxQ by JSDigital (@JSDigital) on CodePen

Link to comment
Share on other sites

  • Solution

Hey @Jim NZ welcome to the forum and thanks for being a Club Greensock member 🎉

 

I would advise you to take a look at this React post, which goes in deep how and why to do certain things in React with GSAP

 

I've never used React, but I think the main thing is that your GSAP code should be inside the let ctx = gsap.context(() and you should scope this to the parent you want to target. I've forked your pen changed some tweens to timelines and it seems to work. Hope it helps and happy tweening! 

 

See the Pen PoyWbVL?editors=0010 by mvaneijgen (@mvaneijgen) on CodePen

  • Like 2
Link to comment
Share on other sites

Hi,

 

Is great to hear that everything is working as expected. An extra piece of advice is that the return function should go outside the GSAP Context instance:

useIsomorphicLayoutEffect(() => {
  let ctx = gsap.context(() => {
    // Cleanup INSIDE GSAP Context is not going to work
    return () => ctx.revert() // cleanup
  }, [])

  // GSAP Instances outside GSAP Context callback
  // will not be cleaned up, this will persist!
  const tl = gsap.timeline();

}, [scrollPage.current]);

This should work:

useIsomorphicLayoutEffect(() => {
  let ctx = gsap.context(() => {
  	const tl = gsap.timeline();
    // Add animations to your timeline here
  }, [])
  return () => ctx.revert() // cleanup
}, [scrollPage.current]);

I assume that your code already looks like this, but is always a good idea to make things as clear as possible, in case other users come by this thread.

 

Happy Tweening!

  • 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...