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...
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...
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...
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...
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...
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...
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...
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...
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...
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 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