smallio

Hello old friend @PointC, How would you achieve this when the href is on another page? EG navigate from Blog page to href on Home page and have it scroll to the href like in your example. Stumped on this one for some reason. Cheers, Smallio

Hey @Sukru, I've just worked on a few projects with extensive side-scroll stuff, happy to send you some examples if you want.

All good solved with this + normal overflow/fixed stuff Sorry to bother. gsap.set(".body", {className:"-=block-scroll"}); gsap.set(".body", {className:"+=allow-scroll"});

Seems normal overflow + fixed trick does not work on the body, scroll container or content? Could someone kindly point me to the right way to go about this?

Ahh never-mind i was overcomplicating it, I guess it's easier to just to make a new foreach and just do Y or X, all solved sorry to ping.

Hey Jack! @GreenSock Been playing around with this tons, so many cool results. Is there a way to use the data attr method you used to choose between doing parallax X or Y? I get how you'd normally do it, but with data attributes it makes it so much easier to add to elements. Is there a way to go like X1.5 or Y1.5 to control both axis and speed? If so please could you show me a really simple example on the old cat demo we were looking at? https://codepen.io/GreenSock/pen/MWVVvWz

No worries, I'll just separate out into 5 separate triggers! I was wondering why it was so hard... lol. Thank you for letting me know.

I've been stumped for a while here trying to pin each of these 5 grey sections when they reach the left hand side of the page (inside a bigger pin), then operate a separate timeline to effect each green box differently while each section is pinned. Does that make sense? Hopefully so I've isolated the demo down as much as possible. This is actually a spin off that parallax thing you did the other day Jack @GreenSock, so perhaps you'd be able to see what I'm doing wrong quicker than someone else? Currently "sec" is pinned which holds the whole segment in place on the bigger page I've isolated this from. I've tried referring to "this" section in view but then it ignores the sidescroll and does some weird diagonal stuff. Thank's in advance if anyone can help!

Great stuff Jack. Thanks.

In fact, while I'm here I may as well pick your brain! - Some other libraries when you invert values it changes direction. Is there anyway to do direction with this? So say two lines go up and one goes down? Would be super useful to have a "direction" attr or something similar for when you want to quickly achieve this along with the parallax effect. smoother.effects(".hc1", {speed: 0.5, lag: 0.5, direction: -1}); smoother.effects(".hc2", {speed: 0.5, lag: 0.5, direction: 1}); smoother.effects(".hc3", {speed: 0.5, lag: 0.5, direction: -1});

Very much so, thank you so much. I love the data attr approach - do you plan to add more in SS? That's one of the main features I loved about locomotive, having the ability to be able to quickly add side-scrolling / diagonal elements at different speeds via like 2-3 attrs. Would love to see it and use the crap out of it if you do end up adding it haha. Regardless great demo. Cheers! @GreenSock

great list dude

Just looking to add delay / speed to this to make the images parallax while horizontally scrolling. It works fine vertically but I assume I need to pass in window width or something to get it working horizontally? Can't figure it out for some reason. I'm currently working in a much larger project which I can't isolate easily so hopefully this example demonstrates the idea. Thank you in advance for any replies! EDIT - Would be an awesome feature to just pass in direction: X or something to do this quickly.

Thanks guys! @PointC I thought @OSUblake would have something, I just couldn't find it.

Hi all, I'm wondering if someone can point me to an example of gsap draggable to connect boxes from points (basically a flow chart). I'm referencing these examples but trying to do it in GSAP. Are there any basic examples on the forum people know of to learn from? The examples below are a bit over my head and I'm looking for something super basic as I'm just starting to learn canvas. Cheers! https://codepen.io/Ni55aN/pen/xzgQYq https://codepen.io/huytd/pen/aREgLG