Scriviante

Thomas, That's a great solution! Thanks so much mate, I have got it woking fine now :). Andrew

Hey guys, I've looked around to see if this is possible but I can't find any discussion of it. I have a client site at https://www.duqe.ae/pricing-packages. In the horizontal cards section, is it possible that the ScrollTrigger could be operated by both vertical mouse motion AND horizontal? Some people who use the site can't seem to figure out that you should keep scrolling down ??‍♂️. Thanks for your help, Andrew

Hey @OSUblake, thanks for the reply :). Did you check it out at https://duqemain.gatsbyjs.io/? The main issue is that the scroll position resets every time you click an input (like the newsletter opt-in at the bottom) and then click out again. I have absolutely no idea why this might happen so I hoped you might have any clues. I will endeavour to recreate it in codesandbox once I get some time but I have never used it before. Cheers, Andrew

Hey @Cassie, Rather than start a new topic, I think it makes more sense to continue this here. So I am building a new Gatsby site and trying to implement ScrollSmoother again. I'm running into a new bug and I'm not sure how to fix it. When a new page loads, ScrollSmoother seems to be integrated well and the ScrollTriggers are refreshed, however if you scroll down the page a bit, the first time you click on anything will cause a scroll back to top. See more at https://duqemain.gatsbyjs.io/ I have attached a screenshot of my ScrollSmoother implementation. This file is imported into a Layout.js file which wraps the content of each page. Not sure if this helps but it also happens every time when you are on the homepage and scroll down to the footer where there is a newsletter signup form. If you click into the input and then out of it again, it scrolls back to top... Cheers! Andrew

Ahh fabulous, thanks Cassie. That's perfect. The speed I like ended up being container.offsetWidth * 4 haha. Nice and slow...

Hey guys, I am building a site that contains a horizontal scrolling section that displays a scene with interactive elements (scroll down the page). It is looking cool and does what I want, however the effect would be more elegant if it moved more slowly through the scene. Currently, it flashes through quite abruptly. It is in Gatsby (React). I have attached the JS file for you to see my implementation of the code. https://tacticspaces.gatsbyjs.io/ Any ideas how I can slow it down? Cheers! Andrew Demo.js

Ah fabulous, that did the trick! Thanks a lot for that. Yep, the page is a dummy page to test out @Cassie's design and how it would work with video because the original looked so cool ??.

Hey guys, Loving the ScrollSmoother plugin. I'm implementing it on a client's Gatsby website and it works fine on the page it's being used on. When i change routes, it affects other implementations of ScrollTrigger and gsap on other pages. Here's an example. Click on this page first, let it load and scroll around etc, then click over to the About Us link in the top menu. The first page has ScrollSmoother, the second doesn't. Instead the second has a horizontal scroll section built with ScrollTrigger. See how it doesn't pin properly? Now reload the About Us page. It should work fine. Any ideas if this is something I am doing or is it a bug? Thanks!

Hey guys, Sorry if the title is misleading - not sure what to call this effect. I have a client who would like to create horizontal scrolling sections with text that appears to be attached to points along an image by an SVG line. You can see the effect here. In particular, look at the labels that are connected to items in the image. Basically, there is a line connecting 2 points - one attached to the text in the foreground and one attached to the item in the image in the background. The points move at different speeds across the screen to simulate camera perspective. The cool part is that the SVG line always stretches and changes to connect the two dots. I'm contemplating writing a function to create this effect myself, but I was wondering if you know of a solution that already exists that uses GSAP? Look forward to your replies, Thanks, Andy