[Increasing perceived scroll distance / sensitivity on fixed based slide sections]

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: 

 

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

 

See the Pen xxabmvz by spearquit (@spearquit) on CodePen

[Using fixed sections with ScrollTrigger in combination with anchor links]

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

 

Thanks again

[Using fixed sections with ScrollTrigger in combination with anchor links]

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:

See the Pen bGVjLwG by GreenSock (@GreenSock) on CodePen

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:

See the Pen GRBNZwo by spearquit (@spearquit) on CodePen

[Using fixed sections with ScrollTrigger in combination with anchor links]

Hi all,

 

I’ve slightly modified a Codepen demo that runs as fixed full page sections:

 

 

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

See the Pen MzWzyv, by PointC (@PointC) on CodePen

See the Pen qBbmLr, by bassta (@bassta) on CodePen

See the Pen bGVjLwG, by GreenSock (@GreenSock) on CodePen

but I can’t see how these solutions could apply to fixed sections. 

 

Any thoughts, approaches or help would be hugely appreciated.

 

Thanks again,

 

 

See the Pen VwBKMLN by spearquit (@spearquit) on CodePen

[DrawSVG console error with non scaling strokes]

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

[DrawSVG Reveal Image On Scroll]

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?

 

See the Pen NWbVGJM by spearquit (@spearquit) on CodePen

[DrawSVG Reveal Image On Scroll]

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: 

See the Pen NWbVGJM by spearquit (@spearquit) on CodePen

 

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? 

[DrawSVG Reveal Image On Scroll]

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: 

 

And I can see that interaction observer w/ scrolltrigger has been used here to trigger on drawSVG scroll: 

See the Pen aLxJbZ by PointC (@PointC) on CodePen

 

Am I barking up the wrong tree trying to combine the two? What's the best approach to achieve this?

 

Many thanks,

 

Rich

 

 

 

 

 

 

See the Pen PdOeaN by PointC (@PointC) on CodePen