Gr0x Posted May 6, 2021 Share Posted May 6, 2021 Hi guys (again)! 😄 So.. My issue is that I can't make this (codepen) horizontally and fit into my react app... I have been looking at: https://edidiongasikpo.com/using-gsap-scrolltrigger-plugin-in-react without any progress. The goal: On scroll it triggers the page to go from one section to another horizontally (with a smooth feeling/animation) (like the codepen) See the Pen NWxNEwY by GreenSock (@GreenSock) on CodePen Link to comment Share on other sites More sharing options...
Cassie Posted May 6, 2021 Share Posted May 6, 2021 I'm afraid I can't help with the React side of things, but this one is a horizontal scrolling demo. Maybe that's enough to kick start you? See the Pen YzygYvM by GreenSock (@GreenSock) on CodePen 2 Link to comment Share on other sites More sharing options...
Solution Rodrigo Posted May 6, 2021 Solution Share Posted May 6, 2021 Hi, This should be the easiest/simplest setup for the codepen @Cassie linked in a React app: https://codesandbox.io/s/lively-sunset-9ifwq?file=/src/App.js Happy Tweening!!! 5 Link to comment Share on other sites More sharing options...
Sorumeiji Posted January 31, 2022 Share Posted January 31, 2022 @Rodrigo I was wondering if it was possible to have a react demo of the vertical version as well? What confuses me is understand how the panels are set up, so you don't have to call an effect for each section? Link to comment Share on other sites More sharing options...
OSUblake Posted January 31, 2022 Share Posted January 31, 2022 Hi Sorumeiji, You should be able to do everything inside a single effect just like in Rodrigo's example. Is that not working? Link to comment Share on other sites More sharing options...
Sorumeiji Posted January 31, 2022 Share Posted January 31, 2022 Oh, it is working. I am just not understanding how it is working. I been trying to study the code to make it vertical, but I am kinda struggling with the formula he is using to make it go horizontal. Mostly this section here: gsap.to(panels.current, { xPercent: -100 * (totalPanels - 1), ease: "none", scrollTrigger: { trigger: panelsContainer.current, pin: true, scrub: 1, snap: 1 / (totalPanels - 1), // base vertical scrolling on how wide the container is so it feels more natural. end: () => "+=" + panelsContainer.current.offsetWidth } }); }, []); Link to comment Share on other sites More sharing options...
OSUblake Posted January 31, 2022 Share Posted January 31, 2022 What do you mean make it vertical? If you just want snapping, CSS provides a way to do that. See the Pen YzyaKrq by GreenSock (@GreenSock) on CodePen 2 Link to comment Share on other sites More sharing options...
Sorumeiji Posted January 31, 2022 Share Posted January 31, 2022 Yes, the pinning part! Thank you for the simpler example. I am new to animation and GSAP. So jut been trying to wrap my head around everything. I might just need to practice more simple things with GSAP. Then slowly approach the advance things as well. 1 Link to comment Share on other sites More sharing options...
Recommended Posts
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 accountSign in
Already have an account? Sign in here.
Sign In Now