Andy777 Posted February 20, 2023 Share Posted February 20, 2023 hello there, On my local development the animation works well but if i replicate it on my site it doesn't work here is the code: .body{ height: 100vh; } .myskillssection{ width: 100%; height:100vh; background-color: black; } .box{ border:1px solid red; overflow: hidden; } .box .text{ color:aqua; } <div class="myskillssection"> <div class="box"> <div class="text">My text</div> </div> </div> gsap.set(".text",{ y: -25}) var tx = gsap.timeline({ defaults: { duration: 100, ease: "none" }, scrollTrigger: { trigger: ".myskillssection", scrub: true, start: "top top", end: "bottom top", pin:true, markers: true } }); tx.to(".text", {y:0}) In my site it translateY to -25px default and when it is in viewport it transform to translate3d(0px, -24.9795px, 0px) -24.etc instead of 0px, how i fix that issue? Link to comment Share on other sites More sharing options...
Cassie Posted February 20, 2023 Share Posted February 20, 2023 Hi there - there shouldn't be any differences between dev and prod. Do you have any extra CSS being added on prod? I'm afraid it's very hard for us to help debug issues like this. What you'll need to do is play 'spot the difference' - what has changed in between your local setup and your production build? The issue won't be in the GSAP code, it'll likely be something else that has changed between local and prod affecting it, maybe some additional markup, some new CSS or conflicting JS. Quote In my site it translateY to -25px default and when it is in viewport it transform to translate3d(0px, -24.9795px, 0px) -24.etc instead of 0px, how i fix that issue? I don't understand this I'm afraid, maybe you could rephrase? Good luck hunting it down! Link to comment Share on other sites More sharing options...
Andy777 Posted February 20, 2023 Author Share Posted February 20, 2023 I try to rephrase. When i scroll into the view gsap set the .text translate3d(0px, -24.9795px, 0px) instead of translate to y axis to 0px, that's the problem i think @Cassie Link to comment Share on other sites More sharing options...
elegantseagulls Posted February 20, 2023 Share Posted February 20, 2023 You have markers set to true, what are those showing you? Is there any way you can provide a minimal demo? 1 Link to comment Share on other sites More sharing options...
Andy777 Posted February 20, 2023 Author Share Posted February 20, 2023 Here the working minimal demo @elegantseagulls it work well but not i my site webflow See the Pen LYJGyyd by Andy199807 (@Andy199807) on CodePen Link to comment Share on other sites More sharing options...
elegantseagulls Posted February 20, 2023 Share Posted February 20, 2023 I'd wonder if webflow is lazy loading images that are causing the page to move the start and end points, which is why I was asking what the start/end points look like in the markers. Also, are you seeing anything in the console that may give some clues? 1 Link to comment Share on other sites More sharing options...
Andy777 Posted February 20, 2023 Author Share Posted February 20, 2023 Nothing says console @elegantseagulls Link to comment Share on other sites More sharing options...
GreenSock Posted February 20, 2023 Share Posted February 20, 2023 2 hours ago, elegantseagulls said: I'd wonder if webflow is lazy loading images that are causing the page to move the start and end points, which is why I was asking what the start/end points look like in the markers That's an excellent point. I would definitely recommend looking into that. Just for the purpose of troubleshooting, what happens if you add this?: // after 3 seconds, force a refresh setTimeout(() => ScrollTrigger.refresh(), 3000); I assume your site has fully loaded within 3 seconds - so let it load and then after 3 seconds, do things work? (after adding the above code) If so, we know that you must have some kind of lazy loading going on or something else is shifting the layout in a way that messes up the measurements, so you'd need to figure out what that is and just call ScrollTrigger.refresh() once you know the DOM has settled. Like others have said, it's super difficult to troubleshoot without a minimal demo, so if there's any way you can provide one of those that shows the problem, you'll exponentially increase your odds of getting a good answer. 1 Link to comment Share on other sites More sharing options...
Andy777 Posted February 20, 2023 Author Share Posted February 20, 2023 i post to you the link to my port when you maybe find what's going on on inspect element tab css of element. @GreenSock you will see that on not in viewport of the tirdth section the text is translated(0px, -25px) and that's okay and when the third section in in viewport it impost to text IT translate3d(0px, -24.9795px, 0px) and not translate3d(0px, 0px, 0px) that's the problem. Here my site : https://andyrighetto.com Link to comment Share on other sites More sharing options...
elegantseagulls Posted February 20, 2023 Share Posted February 20, 2023 You have scrub: true, but aren't letting the ScrollTrigger scroll to the bottom of the section to "scrub" it, if you want it to just slide in onEnter, don't set a scrub value, otherwise add some space at the bottom (an additional section) or change your start/end values to accommodate for the scrub distance. 1 Link to comment Share on other sites More sharing options...
GreenSock Posted February 21, 2023 Share Posted February 21, 2023 Yep, it sounds like @elegantseagulls is right. Your end position must be so far down the page that you can't even scroll to it. If you want to basically say "as far as the page will scroll", you can set end: "max" Link to comment Share on other sites More sharing options...
Andy777 Posted February 21, 2023 Author Share Posted February 21, 2023 It wooooks thanks @elegantseagulls and @GreenSock, but now want the duration to during 2 second but it don't work, you can see my site at the same address: http://andyrighetto.com, how i solve this issue? Link to comment Share on other sites More sharing options...
Rodrigo Posted February 21, 2023 Share Posted February 21, 2023 Hi, What duration exactly. I see three sections in the URL you provide and the third section is the only one that is not scrubbed by ScrollTrigger. If you mean the third section then just set the duration to 2 in your GSAP instance's configuration object: gsap.to(element, { duration: 2 }); If you're referring to the first two sections, scrubbed animations are not about time but about scrolling distance as @Cassie points in this video: Hopefully this helps. Happy Tweening! 1 Link to comment Share on other sites More sharing options...
elegantseagulls Posted February 21, 2023 Share Posted February 21, 2023 6 hours ago, Andy777 said: but now want the duration to during 2 second You'll want to remove scrub: true, otherwise the timing will be dependent on how fast you are scrolling. You'll also want to set duration: 2, (in your example code above, you have the duration default set to 100 seconds, which is really quite long). If you're looking to have it animate on every 'enter' check out the toggleAction controls: https://greensock.com/docs/v3/Plugins/ScrollTrigger 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