anecko Posted April 27, 2023 Share Posted April 27, 2023 how to change this code to the one in the video? https://gyazo.com/847d30e010cca560fce5f60067ce9047 See the Pen MWmVwpX by GreenSock (@GreenSock) on CodePen Link to comment Share on other sites More sharing options...
GreenSock Posted April 27, 2023 Share Posted April 27, 2023 Welcome to the forums, @anecko I think the best way to approach this is to ignore ScrollTrigger initially - just focus on getting that animation of the cards unstacking to run the way you like (standalone). Sequence it in a gsap.timeline(). Then, once you're happy with that, it should be quite easy to hook that up to the scroll position by adding a ScrollTrigger to the timeline, and set scrub: true (or a number if you want to smooth it), and pin the container. Give it a crack and then if you get stuck, feel free to post your minimal demo here showing your progress. 👍 Link to comment Share on other sites More sharing options...
anecko Posted April 27, 2023 Author Share Posted April 27, 2023 @GreenSock hi, i did something that it still breaks(, can you help fix it? See the Pen KKGqaew by aneckon (@aneckon) on CodePen Link to comment Share on other sites More sharing options...
Cassie Posted April 27, 2023 Share Posted April 27, 2023 First step with stuff like this is to get the content positioned and styled the way you want it, then create a timeline that does what you want, then add ScrollTrigger once you're happy. Here's a good starting point! See the Pen YzJQQEe by GreenSock (@GreenSock) on CodePen 2 Link to comment Share on other sites More sharing options...
Solution GreenSock Posted April 27, 2023 Solution Share Posted April 27, 2023 Yep, Cassie is exactly right. And then look how easy it is to slap a ScrollTrigger on that once you've got the animation nailed down: See the Pen bGmRoBo?editors=1010 by GreenSock (@GreenSock) on CodePen 2 Link to comment Share on other sites More sharing options...
anecko Posted April 28, 2023 Author Share Posted April 28, 2023 Thank you very much Link to comment Share on other sites More sharing options...
anecko Posted April 28, 2023 Author Share Posted April 28, 2023 @GreenSock it breaks on my react project, how can it be fixed in this case? Link to comment Share on other sites More sharing options...
GreenSock Posted April 28, 2023 Share Posted April 28, 2023 @anecko if you want help troubleshooting, you need to provide a minimal demo that clearly shows the issue. Here's a Stackblitz that you can fork: https://stackblitz.com/edit/react-cxv92j I'd strongly recommend reading this: gsap.context() is your best friend in React because it makes cleanup so easy. Link to comment Share on other sites More sharing options...
anecko Posted April 28, 2023 Author Share Posted April 28, 2023 @GreenSock did as here, for some reason it breaks all the time - https://stackblitz.com/edit/react-cxv92j?file=src%2FApp.js Link to comment Share on other sites More sharing options...
GreenSock Posted April 28, 2023 Share Posted April 28, 2023 @anecko it looks like you forgot to hit the "fork" button or save it - you just posted back the exact same link I gave you to the starter template. In order to troubleshoot, we really need to actually see the Stackblitz that illustrates the issue Link to comment Share on other sites More sharing options...
anecko Posted April 28, 2023 Author Share Posted April 28, 2023 @GreenSock https://stackblitz.com/edit/react-prmmqj?file=src%2FApp.js,src%2Fstyle.css Link to comment Share on other sites More sharing options...
GreenSock Posted April 28, 2023 Share Posted April 28, 2023 You've got logic issues in your code - you're looping through every box and creating an entirely new timeline and ScrollTrigger each time through, and every one of those timelines is fighting for control of all of the boxes. Plus you're pinning the boxes instead of the container. So you've got a ton of conflicts going on. Since you have 3 boxes, you're creating 3 timelines, each of which is trying to control all 3 boxes (so 9 tweens). I assume you meant to do this (I simplified the code for you too): https://stackblitz.com/edit/react-4q639w?file=src%2FApp.js Better? Link to comment Share on other sites More sharing options...
anecko Posted April 28, 2023 Author Share Posted April 28, 2023 @GreenSock I want to do this but something is not working for me, and you also have bugs with it there See the Pen bGmRoBo by GreenSock (@GreenSock) on CodePen Link to comment Share on other sites More sharing options...
Cassie Posted April 28, 2023 Share Posted April 28, 2023 Can you explain what do you mean by 'bugs?' and 'something is not working for me' - That's very vague. Link to comment Share on other sites More sharing options...
anecko Posted April 28, 2023 Author Share Posted April 28, 2023 @Cassie look at how this code works - See the Pen bGmRoBo by GreenSock (@GreenSock) on CodePen and this - https://stackblitz.com/edit/react-4q639w?file=src%2FApp.js, I need them to work like on simple js but to transfer evo to react Link to comment Share on other sites More sharing options...
Rodrigo Posted April 28, 2023 Share Posted April 28, 2023 Hi, There are a few issues in your setup. You are already importing both hooks (useLayoutEffect and useRef) so there is no need to use the React. notation there, just use the hooks directly: import React, { useLayoutEffect, useRef } from 'react'; import gsap from 'gsap'; import { ScrollTrigger } from 'gsap/ScrollTrigger'; gsap.registerPlugin(ScrollTrigger); export default function Scroll() { const contentRef = useRef(null); useLayoutEffect(() => {}, []); return (); } Also you have an issue with scoping on your GSAP Context instance. This is your HTML <div ref={contentRef} className="paralax"> <div className="card one">1</div> <div className="card two">2</div> <div className="card three">3</div> </div> And this is your GSAP Context: const ctx = gsap.context((self) => { let tl = gsap.timeline({ scrollTrigger: { trigger: ".paralax", start: 'top top', end: '+=1000', scrub: 1, pin: true, markers: true, }, }); tl.to('.one, .two, .three', { yPercent: 150, stagger: -0.5, ease: "none" }); }, contentRef); Basically you're passing he same class selector that the scope parameter contentRef so GSAP is looking for an element with a .paralax class within the scope and is not finding it because that is the actual scope ref. See the problem? This seems to work the way you expect: export default function Scroll() { const contentRef = useRef(null); useLayoutEffect(() => { const ctx = gsap.context((self) => { let tl = gsap.timeline({ scrollTrigger: { trigger: contentRef.current, start: 'top top', end: '+=1000', scrub: 1, pin: true, markers: true, }, }); tl.to('.one, .two, .three', { yPercent: 150, stagger: -0.5, ease: 'none', }); }, contentRef); return () => ctx.revert(); }, []); return ( <div ref={contentRef} className="paralax"> <div className="card one">1</div> <div className="card two">2</div> <div className="card three">3</div> </div> ); } Here is a fork of your Stackblitz example: https://stackblitz.com/edit/react-mptzzr?file=src%2Fstyle.css,src%2FApp.js Finally I strongly recommend you to read the articles Jack linked, since they provide a solid starting point for using GSAP in your React apps. Happy Tweening! 3 Link to comment Share on other sites More sharing options...
anecko Posted April 28, 2023 Author Share Posted April 28, 2023 @GreenSock thx) 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