Sonix Posted October 12, 2020 Share Posted October 12, 2020 Hi, i have the following issue: I am making a Website using Vuejs and would like to use the ScrollTrigger in a sub-page. On this sub-page images should be revealed on scroll using the ScrollTrigger and toArray. However for some reason the starting point "top bottom" is only set properly for the first image at the first visit of the site. On all following images the start trigger is kind of the same as the first one, which shouldn't be the case. If i reload the page or visit it for the second time, everything works properly and the start and end triggers are at the right place. I don't know whether this i a vue, webpack or gsap bug, or do i miss something? How it should look like and does on reload. On first load mounted() { gsap.utils.toArray(".anim").forEach(anim => { gsap.from(anim, { scrollTrigger: { start: "top bottom", end: "top center", markers: true, scrub: 1, trigger: anim }, y: 120, opacity: 0.3 }) }) } Link to comment Share on other sites More sharing options...
Visual-Q Posted October 12, 2020 Share Posted October 12, 2020 This is just a guess as I'm not a vue guy and it's hard to troubleshoot just from code and an image but the fact that it works on reload might suggest that scroll triggers are trying to intialize before items are fully loaded in to the DOM. On reload the elements may be already cached so scrollTrigger can find their positions and properities straight away. 2 Link to comment Share on other sites More sharing options...
ZachSaucier Posted October 12, 2020 Share Posted October 12, 2020 I'm guessing this is an issue of you not destroying and setting things up properly as Visual-Q talked about. Please make a minimal demo using something like CodePen if you'd like our help debugging: Link to comment Share on other sites More sharing options...
Sonix Posted October 14, 2020 Author Share Posted October 14, 2020 Hi, back with a code pen: See the Pen GRqoqav by sonix875 (@sonix875) on CodePen So in the CodePen demo everything works fine. I think i need to somehow rerender the Dom with vue after the Gsap animation is called. I tried to add a window.addEventListener('load', () => {}or document.onreadystatechange but non of these worked. Here is the Page with the issue. Again the issue only appears if the visitor is rerouted from home to the project("/bildprache" in this case). Thanks already! Link to comment Share on other sites More sharing options...
ZachSaucier Posted October 14, 2020 Share Posted October 14, 2020 It's pretty hard to debug something that we can't reproduce. Can you try modifying the demo that you made to recreate the issue? Link to comment Share on other sites More sharing options...
Sonix Posted October 14, 2020 Author Share Posted October 14, 2020 Here is the Github code, so you can reproduce the issue precisely. Link to comment Share on other sites More sharing options...
ZachSaucier Posted October 15, 2020 Share Posted October 15, 2020 Please recreate the issue in minimal form using something like CodePen or CodeSandbox. Asking us to clone a repo, figure out how to get it running (I tried to do so with your repo but got errors when running the resulting index.html file after I built it), then debug it is asking a lot of us for free. Link to comment Share on other sites More sharing options...
Sonix Posted October 15, 2020 Author Share Posted October 15, 2020 Sorry that the repo didn't work, I thought it would be easier and more precise if you have the same code as I. I simply can't reproduce the code in a codepen or so, because i use vue router and also the structure would not be the same. So I will invest more time and probably find the issue... Thanks for the support! Link to comment Share on other sites More sharing options...
Mehrooz Posted November 29, 2020 Share Posted November 29, 2020 On 10/13/2020 at 2:00 AM, Sonix said: Hi, i have the following issue: I am making a Website using Vuejs and would like to use the ScrollTrigger in a sub-page. On this sub-page images should be revealed on scroll using the ScrollTrigger and toArray. However for some reason the starting point "top bottom" is only set properly for the first image at the first visit of the site. On all following images the start trigger is kind of the same as the first one, which shouldn't be the case. If i reload the page or visit it for the second time, everything works properly and the start and end triggers are at the right place. I don't know whether this i a vue, webpack or gsap bug, or do i miss something? How it should look like and does on reload. On first load mounted() { gsap.utils.toArray(".anim").forEach(anim => { gsap.from(anim, { scrollTrigger: { start: "top bottom", end: "top center", markers: true, scrub: 1, trigger: anim }, y: 120, opacity: 0.3 }) }) } I am facing the same issue while using scrollTrigger in NUXTjs . Link to comment Share on other sites More sharing options...
GreenSock Posted November 30, 2020 Share Posted November 30, 2020 This sure sounds like you're loading content in dynamically or something, so just make sure you call ScrollTrigger.refresh() when all your stuff is loaded and ready to go. That'll force ScrollTrigger to recalculate all the start/end positions. Does that help? 2 1 Link to comment Share on other sites More sharing options...
MCP Posted December 4, 2022 Share Posted December 4, 2022 On 11/30/2020 at 6:51 AM, GreenSock said: This sure sounds like you're loading content in dynamically or something, so just make sure you call ScrollTrigger.refresh() when all your stuff is loaded and ready to go. That'll force ScrollTrigger to recalculate all the start/end positions. Does that help? You are the best. ScrollTrigger.refresh() helped me with responsive layout in React as well! Link to comment Share on other sites More sharing options...
Rodrigo Posted December 5, 2022 Share Posted December 5, 2022 Hi @MCP, If you are using React I recommend you to stop by and have a look at this article: Also we strongly recommend using GSAP Context when working with React: https://greensock.com/docs/v3/GSAP/gsap.context() Happy Tweening! Link to comment Share on other sites More sharing options...
MCP Posted December 7, 2022 Share Posted December 7, 2022 On 12/5/2022 at 4:25 PM, Rodrigo said: Hi @MCP, If you are using React I recommend you to stop by and have a look at this article: Also we strongly recommend using GSAP Context when working with React: https://greensock.com/docs/v3/GSAP/gsap.context() Happy Tweening! Thank you! Absolutely love GSAP. I'll dive deeper into it. First time I found GSAP was not so long ago while deconstructing someone's website from awwwards. 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