Use pinning to layer panels on top of each other as you scroll with reactjs.

[DevNate]

I'm newbie to gsap and i have been trying to recreate this animation in reactjs but haven't found any success Jump to section with layering - ScrollTrigger (codepen.io), any help will be greatly appreciated

See the Pen NWxNEwY by GreenSock (@GreenSock) on CodePen

[eightarmshq]

You haven't been totally clear on what you have tried so far. I notice that there is a goToSection(i)function though.

 

I added a <div class="buttons"></div> at the top of the page. Then I included this js which creates a button for each panel (the panels are already defined in the demo). When you click a button, it triggers goToSection with the panel index:

 

const buttons = document.querySelector(".buttons")

panels.forEach((panel, i) => {
  const button = document.createElement('button');
  button.innerText = `Panel ${i+1}`;
  buttons.appendChild(button);
  button.addEventListener("click", () => goToSection(i))
})

See the Pen b5b64bcc1d7494f8af91d3cbe9c6d5d6?editors=0110 by EightArmsHQ (@EightArmsHQ) on CodePen

[Rodrigo]

Hi @DevNate and welcome to the GreenSock forums!

 

To complement @eightarmshq great example, here is a fork of the codepen you linked to a React app using GSAP Context (we strongly recommend using it when integrating GSAP in a React/Next/Gatsby environment):

 

https://codesandbox.io/s/upbeat-river-b6poef?file=/src/App.js

 

For you and other users that might be interested, keep an eye in this thread 👀, since I'll create a fork of the codesandbox example using React Router as well, in order to have a working example that has routes in it.

 

Let us know if you have more questions.

 

Happy Tweening!

[DevNate]

Thank you so much @Rodrigo, as a beginner, line 13 kinda throws me off balance. 

[Rodrigo]

1 hour ago, DevNate said:

line 13 kinda throws me off balance

Hi,

 

Basically I'm setting just one GSAP Context instance to be reused everywhere in the component and I'm using state to keep it through re-renders. You could use a useRef hook as well and it shouldn't be much difference. Using state prevents using ctx.current everywhere it's used.

 

Happy Tweening!