JoeH

Ahhh! That was it, just started using Bootstrap 5 which has this applied to :root by default. Thanks

I searched for this issue but could not find any mention of it, I've checked the Docs and I seem to be doing this correctly, however the window will not scroll with an easing, it just seems to use a default one which starts very slow then suddenly accelerates and stops suddenly. Here is my code: var thumbs = document.getElementsByClassName('col'); Array.prototype.forEach.call(thumbs, function(t) { t.addEventListener('click', function() { gsap.to(window, 0.6, {scrollTo: '#info-section', ease:"power2.inOut"}); }) }); I was thinking that maybe I hadn't included the EasePack or something so I tried to just animate a random element on the page to a Y value, and this worked with the easing I had declared it to use. Which makes me wonder if it is a problem with scrollTo?

You've been more than a great help, I am now using a better smooth scrolling method and it is playing nicely with all my other animations, just not this one (soon to be working). Thanks for updating the demo.

The codepen I have shared is the "Locomotive Scroll with ScrollTrigger scrubbing and pinning" demo from the ScrollTrigger.scrollerProxy() page, but it is the same as my setup essentially. My question is how can I achieve something like this - https://codepen.io/akapowl/pen/7c9f1aaa4340ace9c4a05102ba89a962 Notice how when the item pins it moves through each of the titles one by one. I have tried this with the Locomotive Scroll setup but it doesn't work, it waits until the pin is ended before triggering. For example: gsap.timeline({ scrollTrigger: { trigger: ".pinned", start: "top -=10%", end: "+=100%", scrub: true, scroller: '.smooth-scroll' } }) .to('.sectors-desktop_text_1', {opacity: 1}) This is my attempt to get this to trigger when the pin has been scrolled through by 10%. The pin looks like this: gsap.timeline({ scrollTrigger: { trigger: ".pinned", start: "top top", end: "bottom top", pin: true, scroller: '.smooth-scroll' } }) As I said, this doesn't trigger until the pin is broken. I've tried to remove the scroller value but this doesn't work, nothing is triggered at all. Do I need to set the scroller as something else in order to get it to trigger 10% (or any %) through the pin?

Again, thanks. That smooth scroll effect actually seems smoother, awesome!

So I got this working, works great. However it doesn't seem to be compatible with this smoothscrolling -> So we have removed this for now. If anyone knows a fix for this please let me know.

Hey @akapowl You are a life saver, thank you so much!

Hi all, Just trying to figure out how to best achieve something. In my screenshot you can see a section on the page I am animating. As you can see there is an image on the left and a list of titles on the right. Once the user gets to this section I want the mouse scrolling to basically starting from the first element in the list highlight each word one by one and also the image on the left needs to change when each word becomes highlighted. But I feel like this whole section needs to be pinned for this, and I am wondering if this is possible, because I don't think I can pin this section because everything below it will still be scrolling upwards, so do I need to pin the entire body? Thanks for any suggestions and help.

Perfect! Thanks so much

Hi all, I'm trying to figure out how an the effect from this site is being done: https://dreamstormstudios.com/projects/ar-hunters/ This might be beyond the scope of this plugin so excuse me if this is the case. I'm pretty confident I can change the fill colour of an SVG using ScrollTrigger, however if you scroll to the bottom of the page which I have linked and pay attention to the social icons on the bottom left, you will notice that they seem to change colour exactly inline with the boundary of the background, which makes me think this isn't the fill colour but something else which is being manipulated?

I'm trying to figure out how the relativity works when using the following for example. .to(stageRef.current, {x: '+=' + itemWidthRef.current, duration: 1, ease: "expo.inOut"}) As you can see I am animating x relative to the current position using '+='. My problem is that after a window resize along the x axis it causes this animation to jump before it starts moving, could it be the case that when I resize the window that GSAP still thinks my element is in the same position? This may sound unusual but the reason why I think this is happening is that I have a window resize function which recenters and resizes things, this is a carousel basically and I want it to not be out of proportion on window resize so I am recalculating all the slide dimensions and the full width of the carousel. I'm working in React so was hoping I could try this initial question first in the hope it may be something obvious, and then if more info is needed I will try recreate in codesandbox or something. Thanks Joe

I have a list item which looks like this <li className="menu-list-item" onMouseEnter={menuItemHomeMouseEnter} onMouseLeave={menuItemHomeMouseLeave}> <div className="line" ref={menuItemHomeLineRef}/> <NavLink to="/" exact> Home <span className="mask" ref={menuItemHomeMask1Ref}><span>Home</span></span> <span className="mask" ref={menuItemHomeMask2Ref}><span>Home</span></span> </NavLink> </li> And then I have created my TimelineMax as follows let menuItemHomeAnim = new TimelineMax({paused:true}); menuItemHomeAnim.to(menuItemHomeMask1Ref.current, .6, {skewX: '12deg', translateX: '3px'}); menuItemHomeAnim.to(menuItemHomeMask2Ref.current, .6, {skewX: '12deg', translateX: '-3px'}, '-=0.6'); menuItemHomeAnim.to(menuItemHomeLineRef.current, .6, {scale:1, ease:"elastic.out(0.5, 0.3)"},'-=0.4'); And then my mouseEnter and mouseLeave functions function menuItemHomeMouseEnter() { menuItemHomeAnim.play(); } function menuItemHomeMouseLeave() { menuItemHomeAnim.reverse(); } As far as I can tell from documentation and looking at other examples this should work. However what happens is that the animation plays and then doesn't reverse when the mouse is moved away from the list item. I have checked to see is the menuItemHomeMouseLeave function is triggering and it is.

Sorry yes, it was a flipant remark in my frustration. I managed to figure it out, I didn't need to put it inside the useEffect function because I was already using a Hook to detect mouse movement.

I'm trying to replicate this in React but the cursor goes mental and flies all over the place, the loop then causes my computer to start overheating

Thanks a lot, I've been getting stressed out with work today and you just saved my day!