spearquit

Hi all, I wondered if anyone has any thoughts, approaches or help on an issue I’m facing. I’m nearly at completion on a site that has a fixed scrolling / slide based effect. Here’s a stripped back pen of the global set up, based on a previous post: https://codepen.io/spearquit/pen/xxabmvz It works how it should. But we’re approaching the end of the build… and have received some feedback. You can imagine that on the full site, particularly when the scrollbars are hidden, that it feels like you have to scroll quite a distance to trigger the next slide. Clearly it’s because of set up, having to scroll the height of each slide to trigger the next, but I’m too far into build to completely change the approach. I could do with at least decreasing the perception of how far you need to scroll to trigger the next slide, or giving it an absolute pixel distance somehow. I have taken a look and had a play at integrating Observer, but I'm left scratching my head. If anyone has any thoughts or how to approach, it would be hugely appreciated. Many thanks, Rick

That's fantastic, thankyou for the info. I was certainly overcomplicating it, doh! Thanks again

Oh wow, yeah, that’s exactly what I was looking to do. Thankyou @Jack & @Rodrigo, really appreciated. I had planned on turning the nav into a timeline that indicates what section you’re on as you scroll through them. I had thought onToggle / adding classes, similar to this ScrollTrigger demo: https://codepen.io/GreenSock/pen/bGVjLwG would be the approach. But I guess being fixed means it’s not going to know where to add it anyway? Unsure what could work within GSAP here. I’m wondering how this could be achieved here? Slightly updated pen: https://codepen.io/spearquit/pen/GRBNZwo

Hi all, I’ve slightly modified a Codepen demo that runs as fixed full page sections: https://codepen.io/spearquit/pen/VwBKMLN The sections work how I’d like – but I’m a bit stumped on getting anchor links with ScrollToPlugin to scroll to sections (preferably dynamically). I may just be entirely the wrong setup approach using fixed sections as there's nothing to anchor to, but it’d be great to find out if I could get ScrollTo to work with it. I’ve scratched around looking at ST demos that feature anchors / menus, ie https://codepen.io/PointC/pen/MzWzyv, https://codepen.io/bassta/pen/qBbmLr, https://codepen.io/GreenSock/pen/bGVjLwG, but I can’t see how these solutions could apply to fixed sections. Any thoughts, approaches or help would be hugely appreciated. Thanks again,

Hey @GreenSock - i'm hitting this issue too. I'm a club greensock member - could you fire the file over to me when you can? edit: nvm, my membership was out of date. Have updated and it worked. Sorry to bother you! Cheers

Hi @ZachSaucier, Thanks so much for that article, it really helped. I've looped it and it's much cleaner. How should I go about adjusting individual animations? eg let's say I wanted to change the duration of the second brush. I'll add an additional class to that element and then overwrite it? What's the cleanest way to do that? https://codepen.io/spearquit/pen/NWbVGJM

Ah so I did @PointC! I keep stumbling across your work on here, it's really useful. I've created a simple codepen where each brushstroke reveals itself on scroll. I can play with these basics until I'm happy: https://codepen.io/spearquit/pen/NWbVGJM But as there's gonna be quite a lot of them across, I'm not sure what the most elegant way is to loop them?

Hi all, First off - i'm so sorry. I've got the Business Green membership because the dev that I partner with loves GSAP. However, he's been taken sick suddenly and i need to pick up some front end requirements. I'm just a graphic designer with a little front end awareness so if i'm asking real noob stuff, feel free to tell me to go away. We're trying to reveal a number of images on scroll, using drawSVG as a mask. An example of what i'm trying to achieve is here: https://groupeafn.com/en/, where the path reveals the image. I've kinda guessed that we'll need a mix of drawSVG, scrolltrigger and interaction observers. I can see how we can use DrawSVG to to reveal an image here: https://codepen.io/PointC/pen/PdOeaN And I can see that interaction observer w/ scrolltrigger has been used here to trigger on drawSVG scroll: https://codepen.io/PointC/pen/aLxJbZ Am I barking up the wrong tree trying to combine the two? What's the best approach to achieve this? Many thanks, Rich