lvekua

Hi Guys, I was finally able to convince my company to purchase ScrollSmoother. However I'm facing an issue with the layout, especially for the footer section, details are submitted in the demo. Basically the way our framework is setup is that I can only access header, main, footer content and unable to modify anything outside of it, meaning that I cannot wrap the entire site content into divs, what I tried to do is to use main id as scrollsmoother wrapper and add another div inside for the scrollsmoother content then place all the site content inside. footer becomes a problem, since scrollsmoother add fixed css rules to the wrapper which make footer go all the way to the top, I can keep it on the bottom by adding fixed position and z-index so its on top of everything else but then the content doesnt scroll up past the footer, in which case I need to create a spacer div at the end of every page that has scrollsmoother content and give the same height as the footer so that the content scrolls past the footer. Hope I'm making sense. and thanks in advance!

@Cassie Much appreciated! this makes lot of sense.

Sorry if I didn't make my point clear. Yes, that is exactly what I meant feels like there is a cleaner way to write the same code.

Hey Guys, I just added fade in effect to the text and it works, but doesn't feel right. I used the same trigger in two different instances, feels like they way I did it is not the right way and there is a better way. Looked through the docs and couldn't find anything relative. Could you please take a look at this pen? I'd really appreciate it! https://codepen.io/lvekua/pen/RwqZQbV?editors=1010

@Rodrigo Thank you so much! This is much cleaner and I feel like its performing much better. Thanks again!

@Rodrigo Again, thank you very much for examples. I was able to scramble something together https://codepen.io/lvekua/pen/RwqZQbV If someone could take a look and let me know if its set up correctly I'd really appreciate it!

Wow guys! @SteveS @Rodrigo @akapowl thank you so much for the effort to help. Yes I just want to remove the third party scrollbar plugin without breaking the current scrolling functionality and I haven't been successful yet. Most examples I looked at are either using ScrollSmoother (which I cannot afford, yet) and/or scrolling both sides. I just need to pin the left side text (as in my codepen) until all images are scrolled vertically on the right.

Hi Guys, is it possible to create similar scroll without scrollbar.js plugin?

You are a genius! Thank you so much! this is exactly what I was aiming for. ❤

Thank you so much for your reply @Cassie This really helped a lot and took it very close to what I would like to achieve. I have added the scrollTrigger to the code you provided and pretty much works as expected, however I was unable to pass the toggleClass "active", neither to timeline or scrolltrigger. For example instead of changing the background color on each step backgroundColor: "#fa8072", how could I set the class on each item as active? Here is an updated demo with scrollTrigger: https://codepen.io/lvekua/pen/QWrGBWZ Thanks again!

Hi Guys, I'm new to Gsap and this is my first post. I Was basically trying to figure out how to setup an animation similar to step progress. I've been looking through the docs and couldn't find the answer that could solve my problem. Basically what I'm trying to achieve is to make each path step become active as the truck intersects it and then be able to recycle the whole animation every time the section is in viewport view. I could only get this far where path steps turn active but all at the same time I'd really appreciate if you could help out with this issue. Thanks in advance.