andystent

Do you have an example link and can you tell me what browser you're seeing the scrollbar in. I'm interested to see what's getting you so excited

No problem I haven't looked at the scrollbar itself to be honest. One thing to remember though is that ScrollTrigger is not hijacking the browser scrolling so the scrolling and scrollbar as far as the browser are concerned are moving at the regular pace. I hope that makes sense.

Hey @GeS I have been using Locomotive on a few projects and recently switched them all over to the GSAP Scroll Trigger plugin. Once I understood how it all worked the change over was fairly easy. I can achieve the same effect, and more, with so much more control. And it's all in the same comfy GSAP ecosystem This is a very basic (and ugly) test I put together to create the Locomotive smooth scrolling effect for an entire web page using the new Scroll Trigger plugin. https://codepen.io/andystent/pen/XWXbMLo You can then combine this with something like Jack shared above to get the horizontal scrolling panel. I'm going to be doing this on a new project starting next week. Can't wait! https://codepen.io/GreenSock/pen/1e42c7a73bfa409d2cf1e184e7a4248d Good luck!

Thanks Blake, I'm looking into that at the moment.

Thanks for the quick response Zach. You could actually ignore all the JS (it's just copied from the min.js file) with the exception of the basic TimelineMax animation at the top. I've updated the Pen to make that clearer. I guess all I really need help with is playing an animation when a class is added to an element. Do you know how to achieve this? Thanks, Andy

Hey guys, I wonder if you could give me some advice again I am using the Locomotive smooth scroll script (https://locomotivemtl.github.io/locomotive-scroll/), which gives my projects a beautiful buttery scroll effect but I need some help with playing GSAP animations along with this when the target element comes into view. You'll see in the Pen that when each block comes into view it has a class added "is-inview". It would be great if I could just have an animation play as soon as that class is added, and then reverse when that class is removed. Maybe something to keep looking for changes on the elements? Any ideas? Huge thanks as always! Andy

Thanks for the reply Zach. I'll definitely be looking at options outside of SM for my next project. Your advice help me get what I needed, which was to disable the controller > follow the # anchor link > then re enable the controller again after 1500ms. // Click the button var navFadeClick = document.querySelector("#nav-wrap") var navLinks2 = document.querySelectorAll("#nav-wrap nav li a") navLinks2.forEach(function (navLink2) { navLink2.addEventListener('click', function (e) { // Remember the link href var href = this.href; // Don't follow the link e.preventDefault(); if (controller.enabled()) { controller.enabled(false); } // follow the link setTimeout(function(){ window.location = href, console.log("follow the link"); }, 1000); // re enable the controller - enableController setTimeout(enableController,1500); }); }); //Enable the controller function function enableController(){ if (!controller.enabled()) { controller.enabled(true); } controller.update(true); console.log("enable controller") } Hopefully this will help someone in a similar situation

var ctrl = new ScrollMagic.Controller(); var navFadeClick = document.querySelector("#nav-wrap") ////////// PART A ////////// // This each sets the animation $('.anchor').each(function(index,element) { ////////// scroll up ////////// new ScrollMagic.Scene({ triggerHook: 0, triggerElement: this, offset:-300 // Offset added to prevent overscrolling accidentally triggering - "Scroll Up" is more offset because of Windows browsers and iPad progressively shifting anchor landing point slightly back with each slide. This causes the scroll up and down triggers to move further down the screen and eventually trigger automatically. }) .on('leave', function (testUp) { TweenLite.to(window, 3, { scrollTo: { y: $(window).height() * (index - 1), autoKill: false }, ease: Linear.easeNone, onComplete: function onComplete() { return elementIsClicked = false; } }); }) .addIndicators({name: "scroll Up", colorStart: "yellow"}) .addTo(ctrl); // scene end //////////scroll down ////////// new ScrollMagic.Scene({ triggerElement: this, triggerHook: 0, offset:140 // small offset added to prevent overscrolling accidentally triggering }) .on('enter', function (testDown) { TweenLite.to(window, 3, { scrollTo: { y: $(window).height() * (index + 1), autoKill: false }, ease: Linear.easeNone, onComplete: function onComplete() { return elementIsClicked = false; } }); }) .addIndicators({name: "scroll Down", colorStart: "yellow"}) .addTo(ctrl); // scene end }); //slide each } //end if active ///////// PART B ////////// //When clicking Nav link temporarily ignore the script from PART A var navLinks2 = document.querySelectorAll("#nav-wrap nav a") navLinks2.forEach(function (navLink2) { navLink2.addEventListener('click', function (e) { e.preventDefault(); var url = $(this).find("a[href]").attr('href'); const urlOut = new TimelineMax({onComplete: function(){window.location.href = url;}}); urlOut .to(navFadeClick, 1, {autoAlpha: 0}) }); }); I wonder if you guys could help? Sorry for not supplying a Pen but I'm not sure of the best way to set up a simple example of what I'm trying to achieve outside of my project. PART A: controls a smooth scrolling effect when the user scrolls past various triggers. It all works great. PART B: is a nav using # anchor points. The issue is that sometimes the smooth scroll script from PART A causes the anchor link to get stuck. When I comment out that script for PART A, the anchor links in PART B work perfectly all the time. I thought that maybe a solution is to have the script from PART A be ignored when a user clicks the links in PART B. It would then need to be un-ignored again once the PART B tween has run. Anyone have any ideas on how to achieve this? THANK YOU!

Thank you Mikel! I think I can work with this to get the effect I'm needing. Appreciate the help!

I appreciate all the help so far! Thank you!

Sorry that duplicate function was an oversight I essentially want the click functionality to happen when the link is clicked (which is fine and works), but other stuff to be active the whole time the button is not being clicked (in this case the scrollmagic stuff). Does that make sense?

I've tried this and the "if" works to show the "clicked" in the console. But I can't figure out how to get the not-clicked state (or false) to display "Not" in the console the whole time that the button is not in a clicked state. I realise this is not strictly GSAP related but any guidance here would be greatly appreciated! /// If clicked var elementIsClicked = false; function clickHandler(){ elementIsClicked = true; } var element = document.getElementById('#slide2nav'); element.addEventListener('click', clickHandler); function clickHandler(){ if(element){ console.log('Clicked'); ///works } else { console.log('Not'); ///Not working - this is where I'd want to put my scrollmagic stuff. } }

I've tried this and the "if" works to show the "clicked" in the console. But I can't figure out how to get the not-clicked state (or false) to display "Not" in the console. /// If clicked var elementIsClicked = false; function clickHandler(){ elementIsClicked = true; } var element = document.getElementById('#slide2nav'); element.addEventListener('click', clickHandler); function clickHandler(){ if(element){ console.log('Clicked'); ///works } else { console.log('Not'); ///Not working - this is where I'd want to put my scrollmagic stuff. } }

Thank you Zach! I've actually change the site to use scrollToPlugin instead of that scrollIntoView. It's working perfectly on the site (strangely not on the Pen, but I'll look at that another time). I've been doing some research on using a variable to track the nav click but I'm struggling a bit. Would you be able to give me a rough idea of what this would look like so I can make sure I'm even on the right track. Thank you again! UPDATE: I got the scrollToPlugin nav links working - I'm sure there is a better way to implement this without repeating the code... but that could be a lesson for another day... https://codepen.io/andystent/pen/GRgjBdJ

Holy s#!+ How did I not think of that?! That works perfectly! Thank you! The scrolling works perfectly now but it's causing my Nav # anchors to pause at each slide. I'm looking at potentially disabling the scrolling function when the nav links are clicked. And then re enabling it. You wouldn't happen to know a simple way of disabling a function and then re enabling it, would you? UPDATE: Here is an updated Pen with the nav # anchor links included: https://codepen.io/andystent/pen/GRgjBdJ If you click the # links in sequential order it's fine. But if you try to skip sections it gets stuck. The smooth scrolling applied to the anchors (see bottom of js) is what's causing the issue because as you reach the trigger on the next/prev slide it stops.