aok

I ended up having to do this a bit more 'static' as it's such a small project. https://codepen.io/richardcool/pen/VwNgJZx But it would've been great for scrollTo to accommodate the scrollTriggers...

Hi @Rodrigo and @GreenSock thanks again for the help and comments. I have updated my code but I think the issue is perhaps this comment from Jack: The page is made up of different timelines and scrollTriggers, not just one for all, so defining a `containerAnimation` that contains all the elements is a bit tricky, right? However, this is just a landing page of two anchored sections (About and Information) so I thought getting the scroll position to scroll to for two sections would be fairly straightforward. I understand what you're saying @Rodrigo about your initial example working without the `getScrollLookup` function, which would obviously be ideal, but even stripping it back I couldn't get the correct scroll position. In my example the pinned container is the parent container of all sections whereas in other examples the pinned container is the same as the trigger. In order to make mine work I had to make the parent the pin... I wonder if this is causing issues. I'll keep trying and update if I have any success but any help understanding if it's possible to use getScrollLookup for individual parts rather than as a layout that is completely animated would be great.

Hi @GreenSock thanks so much for the help and reply! I *think* I understand... trying to wrap my head around it. When I click the 'About' and 'Information' nav buttons in the CodePen it only takes the user to the top of the project slides... not the sections with the 'About' and 'Information' text. Are you getting this too?

Thanks for the help @GSAP Helper and I think I've implemented this correctly (see updated CodePen) but on click on 'About' or 'Information' it always goes to the top of the projects section. https://codepen.io/richardcool/pen/yLrqdQm Any thoughts?

Hi @Rodrigo thanks again for your help. I've updated the CodePen (https://codepen.io/richardcool/pen/yLrqdQm), stopped the sticky header and removed the errors but I'm still getting the issue where it'll scroll to the position of the section without taking into consideration the pinning. Does scrollTo simply scroll to a Y position without taking the pinning into consideration?

Hi folks I'm experiencing two issues when using ScrollTrigger, with pinning, and the ScrollToPlugin. 1. Clicking on the nav items is returning a console error with gsap rather than scrolling to the relevant section 2. The pinning involved will affect the scroll position of the section so when the nav items are clicked it'll scroll to the position of the section without taking into consideration the pinning. I've seen a few posts on the forum about this but none of the solutions seem to work for me. Any pointers? Thanks so much.

Changed it up, slightly, based on one of the demos (https://codepen.io/GreenSock/pen/PoyJpMY) and seems to work now. Changed the distance to scroll calculator into a function and then made the pin almost most of the scrolling content and not just the carousel container. https://codepen.io/richardcool/pen/yLrqdQm

Thank you SO much @Rodrigo – so I don't need to use refreshInit at all as we're using `invalidateOnRefresh`? As this is essentially doing exactly that?

I didn't! In the pen you can see the massive gap after the images and before 'About'. There shouldn't be any gap. I can't work it out! The height of the pin, and therefore the scroll length, should be the total time it takes to scroll horizontally through the images but it's not.

Hi folks I'm trying to use ScrollTrigger to pin and X transform through some images. I was using this thread as a base: https://gsap.com/community/forums/topic/37086-scrolltrigger-with-images-as-slider/ which seems to make sense but I'm having a problem in that I am scrolling through 3 images that are set to 100vh and 100vw so I thought if I set the trigger to 300vw height (3 images width) then made the pin the trigger... it would all sync up correctly however I'm getting mixed results (the pin either obscures the content below, or it's too short and the transform through all 3 images doesn't complete) so I'm unsure if I am understanding this correctly. When it pins it needs to scroll through X (currently 3) number of images then unpin and continue with the rest of the site. Any thoughts where I am going wrong?

That's fair. Apologies. On load when the user scrolls it zooms into the SVG based on a scale set `logoToScale = (window.innerWidth / logo.getBBox().width) * 5` as suggested by @ryan_labar as this makes sense. This is so on scroll zoom on the animation zooms in far enough to go completely white. However as soon as I resize the browser, which might happen, on scrolling the scaling is off as either scaling too much or too little depending on resizing up or down. I understand why but from my code I believe I'm updating the scaling correctly.

Thanks again, @Rodrigo – with what @ryan_labar kindly shared I've updated the CodePen (https://codepen.io/richardcool/pen/yLrqdQm) and on load it's working perfectly but when I resize it gets out of sync. Am I using the correct methods? I've used `refreshInit` to update the scale but wasn't sure if I needed anything else?

Thanks @Rodrigo – I can update my original post/CodePen with the scale calculation but what is the best method for wanting to update a value in ScrollTrigger so it changes on resize based on my rough example above…

The following seems to work well but on resize it does throw things off. I've implemented some resize checks but maybe that's not enough and needs to update the trigger start/end? const landing = ref(null) const logo = ref(null) onMounted(() => { let logoToScale = (window.innerWidth / logo.value.$el.getBBox().width) * 5 const landingResize = () => { logoToScale = (window.innerWidth / logo.value.$el.getBBox().width) * 5 } ScrollTrigger.addEventListener('refreshInit', landingResize) const timelineHeader = gsap.timeline({ scrollTrigger: { id: "ZOOM", trigger: landing.value, scrub: true, start: "top top", end: "+=100% 0", pin: true, markers: true, invalidateOnRefresh: true, } }) timelineHeader .to(logo.value.$el, { scale: logoToScale }) })

Thanks for this, @ryan_labar – I've never used FLIP before so would need to do some reading but the idea of the other approach, for example, `(window.innerWidth / svgElement.offsetWidth) * 5` makes sense.