ShibCode Posted February 15 Share Posted February 15 I want to create something like the thing in the video where the image is moving between sections. I have given it a try using Flip and ScrollTrigger but I run into some issues where the image just bugs out and get vanished from the screen. I am sorry I can not provide a codepen, it would be really appreciated if someone could help me out. Here is the code: const [activePlace, setActivePlace] = useState(0); useGSAP( () => { new ScrollTrigger({ trigger: "#section-1", end: "bottom bottom", markers: true, onEnter: () => { setActivePlace(1); }, onEnterBack: () => { setActivePlace(1); }, }); new ScrollTrigger({ trigger: "#section-2", end: "bottom bottom", onEnter: () => { setActivePlace(2); }, }); }, { dependencies: [], revertOnUpdate: true } ); useGSAP( () => { if (activePlace === 1) { const prevImg = document.querySelector(".obj"); const state = Flip.getState(prevImg); document.querySelector(".obj-wrapper-1").appendChild(prevImg); Flip.from(state, { scrollTrigger: { trigger: "#section-1", end: "bottom bottom", scrub: true, }, }); } else if (activePlace === 2) { const prevImg = document.querySelector(".obj"); const state = Flip.getState(prevImg); document.querySelector(".obj-wrapper-2").appendChild(prevImg); Flip.from(state, { scrollTrigger: { trigger: "#section-2", end: "bottom bottom", scrub: true, }, }); } }, { dependencies: [activePlace], revertOnUpdate: true } ); vid.mp4 Link to comment Share on other sites More sharing options...
GSAP Helper Posted February 15 Share Posted February 15 Without a minimal demo, it's very difficult to troubleshoot; the issue could be caused by CSS, markup, a third party library, a 3rd party script, etc. Would you please provide a very simple CodePen or Stackblitz that illustrates the issue? CodePen isn't always ideal for these tools, so here are some Stackblitz starter templates that you can fork and import the gsap-trial NPM package for using any of the bonus plugins: React (please read this article!) Next Svelte Sveltekit Vue Nuxt Please share the StackBlitz link directly to the file in question (where you've put the GSAP code) so we don't need to hunt through all the files. Once we see an isolated demo, we'll do our best to jump in and help with your GSAP-specific questions. ✅ Link to comment Share on other sites More sharing options...
ShibCode Posted February 15 Author Share Posted February 15 @GSAP Helper Thank you for your feedback https://stackblitz.com/~/github.com/ShibCode/sombra-network There may be some bugs on the first load but refreshing the preview should work fine. Also make sure to view on a bigger screen as it is not very responsive Link to comment Share on other sites More sharing options...
mvaneijgen Posted February 15 Share Posted February 15 Hi @ShibCode welcome to the forum! What files should we be looking at? You're sharing the readme file which obviously doesn't have any GSAP code. We also ask for a minimal demo not your whole project! So please delete all irrelevant code so that we can only focus on the code that is causing the issue. You'll see that when making it simple you'll probably solve the bug your self and if not we'll be happy to take a look for you. Hope it helps and happy tweening! Link to comment Share on other sites More sharing options...
ShibCode Posted February 15 Author Share Posted February 15 @mvaneijgen Sorry about that. I have gone through it and cleaned the unnecessary code. Also you may only work in the home folder within the pages folder as that is where all the code is. Thanks Link to comment Share on other sites More sharing options...
Rodrigo Posted February 15 Share Posted February 15 Hi, Unfortunately using a full repo to create a demo forces us to fork the entire repo into an existing github account, while we understand that this is easier and faster it does forces us to fork the repo if we want to tweak your demo. Also you didn't specify the file where we should look into it and due to the complexities of your demo I'd rather create a new one from scratch instead. In terms of the issue you're seeing, this is a great case for using Flip Fit: https://gsap.com/docs/v3/Plugins/Flip/static.fit() Here is a demo in React: https://stackblitz.com/edit/vitejs-vite-q8pmoy?file=src%2FApp.jsx&terminal=dev Hopefully this helps. Happy Tweening! 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