renny Posted November 6, 2021 Share Posted November 6, 2021 i need to pin false whenever last section are show See the Pen GRvqawW by gohilinfotech (@gohilinfotech) on CodePen Link to comment Share on other sites More sharing options...
Cassie Posted November 6, 2021 Share Posted November 6, 2021 Hey @renny, Sure thing, You'll just have to write some conditional logic to check if it's the last panel. Hope this helps ✨https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Conditional_Operator let panels = gsap.utils.toArray(".panel") panels.forEach((panel, i) => { ScrollTrigger.create({ trigger: panel, start: "top top", pin: i === panels.length -1 ? false : true, end:"bottom 100", pinSpacing: false }); }); 1 Link to comment Share on other sites More sharing options...
renny Posted November 6, 2021 Author Share Posted November 6, 2021 can you implement on my demo ? i try that but not working Link to comment Share on other sites More sharing options...
Cassie Posted November 6, 2021 Share Posted November 6, 2021 Ah sorry - typo! panel(s) - Here you go. See the Pen 143a7b54f938be3b1bae27700a6dcb1d by cassie-codes (@cassie-codes) on CodePen 5 Link to comment Share on other sites More sharing options...
renny Posted November 6, 2021 Author Share Posted November 6, 2021 thanks it's working 1 Link to comment Share on other sites More sharing options...
renny Posted November 8, 2021 Author Share Posted November 8, 2021 also some code are conflict on another page into mobile view https://dev.icustomweb.com/unibynew/about-us.html below are script https://dev.icustomweb.com/unibynew/js/script.js Link to comment Share on other sites More sharing options...
renny Posted November 8, 2021 Author Share Posted November 8, 2021 this script work well into home page, but not working into another page mobile view let scrollAnim1 = gsap.timeline({ scrollTrigger: { trigger: ".image_expand", start: "top", end: "bottom", scrub: 1, pin: true } }); scrollAnim1 .fromTo( ".kitty", { clipPath: "inset(0% 22%)" }, { clipPath: "inset(0% 0%)", duration: 1.5 } ) Link to comment Share on other sites More sharing options...
GreenSock Posted November 8, 2021 Share Posted November 8, 2021 @renny I don't really understand your question - we can't troubleshoot live web pages, so if you need some help please provide a minimal demo with only the essential code to reproduce the issue (please don't include your whole web page - just isolate the issue in a minimal representation with basic <div> elements for example). A simple CodePen would be perfect. 👍 Link to comment Share on other sites More sharing options...
renny Posted November 9, 2021 Author Share Posted November 9, 2021 there are multi pages that's why i don't add into codepen Link to comment Share on other sites More sharing options...
Cassie Posted November 9, 2021 Share Posted November 9, 2021 could you try codeSandbox instead @renny? I can't load the link you added here and that snippet you've added doesn't look to be doing anything too complex. I don't see any reason why a little clip path tween would be causing 'code conflicts'. I'm afraid we can't help without seeing a demo. Link to comment Share on other sites More sharing options...
Cassie Posted November 9, 2021 Share Posted November 9, 2021 Here's a link - https://codesandbox.io/s/gsap-trial-bonus-plugins-m26x0 Link to comment Share on other sites More sharing options...
renny Posted November 9, 2021 Author Share Posted November 9, 2021 https://codesandbox.io/s/6pbhs please check about-us - mobile view does not work some animation Link to comment Share on other sites More sharing options...
Cassie Posted November 9, 2021 Share Posted November 9, 2021 Sorry Renny - I really don't know what to look for. I'm not even sure where the about us page is - there's no about us link anywhere. Could you please explain exactly how to replicate the issue? Step by steps lists or screengrabs are useful. Talk us through the problem. Link to comment Share on other sites More sharing options...
renny Posted November 9, 2021 Author Share Posted November 9, 2021 https://6pbhs.csb.app/about-us.html all animation are workign perfectly into desktop view, but when i check into mobile view then some animation are not working Link to comment Share on other sites More sharing options...
Cassie Posted November 9, 2021 Share Posted November 9, 2021 Ok, I see! So firstly this isn't a page transition issue - this is purely about the animations happening on the about page on mobile view. So there's no need for a codesandbox of this size to debug it. Some steps.1) Take everything out of this codesandbox apart from the code needed for the about page. 2) You have a lot of errors in the console currently. Focus on sorting those out first because you're likely tweening something that doesn't exist. Once you've narrowed the code down it'll be much much more clear where the issue is. As a general rule if you're only using certain animations on certain pages it's good practice to check to see what page you're on and then run that code, rather than run loads of JS that is looking for elements that don't exist, as that will error and potentially cause issues. Something like this should work... if ( document.URL.includes("about") ) { //about us code here } 1 Link to comment Share on other sites More sharing options...
renny Posted November 10, 2021 Author Share Posted November 10, 2021 this condition is not a right solution, because that animation will use into many pages Link to comment Share on other sites More sharing options...
renny Posted November 10, 2021 Author Share Posted November 10, 2021 "(max-width: 767px)": function() { let sections = document.querySelectorAll(".activities_sec .image"); let scrollContainer = document.querySelector(".activities_sec"); let scrollTween = gsap.to(sections, { xPercent: -110 * (sections.length - 1), ease: "none" }); let horizontalScroll = ScrollTrigger.create({ animation: scrollTween, trigger: scrollContainer, pin: true, scrub: 1, end: "+=1000" }); // total scroll amount divided by the total distance that the sections move gives us the ratio we can apply to the pointer movement so that it fits. var dragRatio = scrollContainer.offsetWidth / (window.innerWidth * (sections.length - 1)); var drag = Draggable.create(".proxy", { trigger: scrollContainer, type: "x", onPress() { this.startScroll = horizontalScroll.scroll(); }, onDrag() { horizontalScroll.scroll(this.startScroll - (this.x - this.startX) * 1); // if you don't want it to lag at all while dragging (due to the 1-second scrub), uncomment the next line: //horizontalScroll.getTween().progress(1); } })[0]; }, if i remove this script then all animation working perfectly Link to comment Share on other sites More sharing options...
Cassie Posted November 10, 2021 Share Posted November 10, 2021 Hello again! 51 minutes ago, renny said: this condition is not a right solution, because that animation will use into many pages I wasn't suggesting that snippet was the answer - more that the approach itself would help you. The code you've removed shouldn't be running on the about page, the elements that it's targeting don't exist, that's where your errors are coming from. You don't need to remove it though, just work out which pages it needs to run on and then make sure it only runs on those pages. Link to comment Share on other sites More sharing options...
renny Posted November 10, 2021 Author Share Posted November 10, 2021 basically that code running more then 3 pages, but about-us page there are no that animation. So how to bypass that code if that class and id not available Link to comment Share on other sites More sharing options...
Cassie Posted November 10, 2021 Share Posted November 10, 2021 Nice and easy - check if it exists and if so - run the code! let scrollContainer = document.querySelector(".activities_sec"); if(scrollContainer) { // code here } 3 Link to comment Share on other sites More sharing options...
renny Posted November 11, 2021 Author Share Posted November 11, 2021 thank you very much finally i sorted 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