fakesamgregory

While it doesn’t directly solve your issue, consider using CSS in this instance. I can’t see the result in your Codepen to know if this entirely relevant.

@Rodrigo thank you. I’ll take a look and see if this is indeed my issue. as an aside, would it be possible to encourage the moderators to encourage users to consider sharing their solution or links in cases like this? I feel this would benefit the community massively so instead of just congratulating them, something like “please consider sharing your solution with the community”. You obviously can’t force it but you can at least teach good etiquette. After all, these forums aren’t just for those trying to get their specific issue sorted.

What's the other thread? Can someone link to it?

Thank you @Rodrigo. Yes I looked at these solutions and while they get close, they don't quite work in combination. Similarly to the first example, I want a section at the top that scrolls "normally" and as the user scrolls down to a certain section, instead of the horizontal scroll scrubbing with the scroll, the page gets 'caught' like in the second example. The issue with Observer is that the user cannot be scrolling/the window needs to be still for the Observer to take hold. As can be seen from my example, if I 'flick' the page, I'm able to scroll past the Observe section. It's only if I allow the scrolling to come to a standstill in the Observe region that it can take over. I think this is more a Mac/Trackpad thing. I've thought about using pinning to create the illusion that the Observer section is stuck but then I'm not sure what to do with the extra space that the pin creates after the user finishes the Observer section and returns to normal scroll. and there will always be a possibility that the user can freescroll so hard that they even move passed the pin 'illusion'. I've played around with onEnter on my ScrollTrigger (can also be seen from my example) but even though I enable Observer at this point, it doesn't actually take effect until the inertia scroll has come to a standstill.

Are there any examples of something like fullpage.js that appears midway through a 'normal' scrolling website. I've been playing around with many different solutions from pinning, to horizontal scroll all using ScrollTrigger/Observe but I just can't quite get a slider that is 'locked' in 'fullpage mode' unless the user scrolls past the last slide or backwards past the first slide that has an level of resistance between each slide.. Here is the progress I've made. An attempt to show what I'm trying to achieve but it's not working for me. Maybe my CSS is wrong, maybe my approach is wrong. Any thoughts/guidance/examples would be great!

All resolved!

I don't think I can explain any better than the docs already do. What's not clear there?

Not sure if I fully understand. A more complete code sample would be awesome but can't you use... const myValue = '120' THREE.Math.degToRad(Number(myValue))

Thank you @Carl I thought about something like this. Didn't know the syntax but this absolutely works. I'd be interested to hear if this is an endorsed method or if indeed tweens/timelines have a property built in for this type of thing.

I have a ScrollTrigger that pins the animation. The issue is that as soon as the animation completes, scrolling continues. I would like to add an extra bit of space to the animation where nothing really happens, the user is just delayed slightly before scrolling continues after the end of the animation.

After some digging, I found `containerAnimation` property with a lovely example. https://codepen.io/FakeSamGregory/pen/abjNdQP

I have a pinned ScrollTrigger timeline animation happening with `scrub` set on it. I would love to be able to 'inject' an animation into that timeline at a given point that does not respond to the scrub. I'd imagine code something like this (see comment).

@OSUblake I managed to create a sandbox environment and it worked just fine. My specific use case was the loading of images to which I solved by looping through the images and calling ScrollTrigger.refresh(). Maybe this'll help others. useEffect(() => { if (!smoother) { setSmoother(ScrollSmoother.create({ effects: true, smoothTouch: 0.1, })) } // refresh once all images load Array.from(document.querySelectorAll('img')).forEach(img => { img.addEventListener('load', function() { ScrollTrigger.refresh(); }) }) return () => { smoother?.kill(); }; }, [location]);

@OSUblake Thanks for responding! I can't right now but I can tomorrow. Just wondering if this was an issue that's been encountered before I create a project.

I have a React project where I'm using ScrollSmoother and where the route changes in height, the ScrollSmoother does not recalculate. I can force it by resizing the window. I have tried smoother.scrollTrigger.refresh(), ScrollTrigger.update() to no avail... I'm happy to share my project but there's a few moving parts but wanted to first know if I'm misunderstanding something simple or somebody knows how I might go about this. I guess where the magic happens might be a simple way to start. I'm doing it in the useEffect hook and am able to trigger on route change useEffect(() => { smoother = ScrollSmoother.create({ effects: true, smoothTouch: 0.1, }); ScrollTrigger.refresh() }, [location])