Jameshofton

Thanks so much for your reply, i will go through it on Monday wen back at work. I really appreciate you taking the time to reply to me.

Hi, I am have gone through lots of other peoples posts to see if i can find a solution and some of them have helped me get closer to what i need. I was hoping for some help if possible. I have 4 sections, each with a lottie file in. They reach a section, it pins until the end of the lottie animation and then moved onto the next one. I did have it all 100% View port height, but the client did not like that. I have created a version in Codepen, so you can see the code. I would really appreciate any help, tips to solve this.

Thanks for the fast reply. Currently using height: 100%. But i will check this out now and report back

HI, thanks for any help in advance. On mobile I am having trouble the pin-spacer wrapper not recalculating the height when the address bar comes on on when scroll. I have a wrapper which has full height, then within that one div is 55% height and then other 45% high to make up 100% height. Here is the site in question https://staging.oribiotech.com/data/ and here is a video of what is happening. https://staging.oribiotech.com/scrolling-problem.mp4 Should i set the scroll trigger to refresh the height when the address bar comes in. Any recommendations welcome.

Thanks for doing this, it still jumps at the start. I ended up using akapowl version, which works for me. https://ap-live.co.uk/what-we-do Thanks so much for all your help and your time in looking into this for me.

Thanks so much for your help, i really appreciate it. I used akapowl solution and its working on all devices, i had to change the JS a bit to make it work on IE 11. but brilliant, thanks so much. Looking forward to exploring the other paid for plugins.

Thanks so much for coming back to me, i will watch those videos, i appreciate you taking the time to send me the links to those. I have create a pen and added the new code, but it's still jumping, any ideas? <p class="codepen" data-height="265" data-theme-id="light" data-default-tab="html,result" data-user="jameshofton" data-slug-hash="zYNPoLP" style="height: 265px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;" data-pen-title="Anchor navigation to ScrollTriggered section"> <span>See the Pen <a href="https://codepen.io/jameshofton/pen/zYNPoLP"> Anchor navigation to ScrollTriggered section</a> by James Hofton (<a href="https://codepen.io/jameshofton">@jameshofton</a>) on <a href="https://codepen.io">CodePen</a>.</span> </p> <script async src="https://cpwebassets.codepen.io/assets/embed/ei.js"></script> I'll also signup to get a membership. Thanks James

Hi There, I tried replacing const panels = gsap.utils.toArray("#panels-container .panel"); gsap.to(panels, { xPercent: -100 * ( panels.length - 1 ), ease: "none", scrollTrigger: { trigger: "#panels-container", pin: true, start: "top top", scrub: 1, snap: { snapTo: 1 / ( panels.length - 1 ), duration: {min: 0.1, max: 0.1} }, end: () => "+=" + (panelsContainer.offsetWidth - innerWidth) } }); with onst tl = gsap.timeline({ paused: true, scrollTrigger: { trigger: "#panels-container", pin: true, start: "top top", scrub: 0.5, snap: { snapTo: (1/1.1) / ( panels.length - 1 ), duration: {min: 0.1, max: 0.1} }, end: () => "+=" + (panelsContainer.offsetWidth - innerWidth) } }) .to(panels, { xPercent: -100 * ( panels.length - 1 ), ease: "none", duration: 1 }) .to({}, {duration: 0.1}, 1); but the whole things breaks, sorry i am not that great at Javascript. Is there a way to update this codepen https://codepen.io/GreenSock/pen/bGexQpq Thanks Jim

Great thanks so much, ill give it a go now.

Hi There, I have been looking at the codepen Scroll Trigger examples and also been using a similar example on a clients site https://dev.union10.co.uk/ap-live/what-we-do When i scroll down and click the first next screen button, the slide jumps up. Do you know what would be causing this, i cannot seem to figure it out. Any help would be appreciated, Thanks Jim