Jump to content
GreenSock

Search In
  • More options...
Find results that contain...
Find results in...

andystent

Members
  • Content Count

    34
  • Joined

  • Last visited

Community Reputation

7 Newbie

About andystent

  • Rank
    Advanced Member

Recent Profile Visitors

The recent visitors block is disabled and is not being shown to other users.

  1. 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
  2. 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.
  3. 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
  4. Thanks Blake, I'm looking into that at the moment.
  5. 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
  6. 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.
  7. 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;
  8. 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 land
  9. Thank you Mikel! I think I can work with this to get the effect I'm needing. Appreciate the help!
  10. I appreciate all the help so far! Thank you!
  11. 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?
  12. 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.l
  13. 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. } }
  14. 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..
  15. 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. Bu
×