akapowl

Heyo! If I am not absolutely wrong, using a timeline vs using a single tween really shouldn't make a difference in this case. Here is your codepen (with GSAP and ScrollTrigger loaded now) working and not automatically tweening - even with the start set to '+=1' as you have on your website @sbme123, which btw is an invalid value for the start because starts of ScrollTriggers can not be relative values (what should they be relative to ?). Edit: I had another look at your website and it looks like now you are not loading ScrollTrigger there, which would be an explanation for the auto-tweening when getting to that page you mentioned. Everything I mentioned below doesn't become less important to know when working with barba, though. https://codepen.io/akapowl/pen/GRGEMeW One very important piece of the puzzle you forgot to mention is, that you are using barba.js - which I bet is the cause of your issues. There are a lot of things to consider when using JS with a framework that makes your website behave like a Single-Page-Application. The most important with barba being a) kill old ScrollTriggers when leaving a 'page' and (re-) initialize ScrollTriggers when entering a new 'page' b) be aware of barba's life-cycle, because at some point (if not explicitly changed by yourself) the old and new page-containers will be in the DOM at the same time stacked on top of each other, which is bound to throw off the calculations for initiated ScrollTriggers I linked a couple of threads below, which have some critical information for the use of barba with ScrollTrigger. Also, I tweaked an example I made on stackblitz earlier to show a way to properly integrate that fake-horizontal scenario. Although it is kind of convoluted by now (which to a certain extent is neccessary due to the way barba works), I hope it will still help. https://stackblitz.com/edit/web-platform-tffdg2

Hey there. The reason for that is that ScrollTrigger takes the transforms you initially set into account - and that's why you should never tween on your trigger element in a way that it changes their scroll-relevant positioning (like here on the y-axis), because it will likely make ScollTrigger not 'behave' like you actually intended. The solution is to wrap whatever element you want to tween on in such a manner in another element and use that element as the trigger instead. Does this work more like you had in mind? https://codepen.io/akapowl/pen/poKebqN

Hello @Rehman132 Here is a working fork of that demo with ScrollSmoother included. The only change I needed to make was to set the .panel's height to 100vh instead of 100% for it them display correctly because of the wrapping divs, which do not have a specific height defined. You were not loading the ScrollSmoother plugin in your pen to begin with - it is throwing an error in the dev-tools console, saying 'ScrollSmoother is not defined'. Be aware, that ScrollSmoother is a Club GrenSock plugin for members of the ShockinglyGreen tier and above - you can test it for free (e.g. on codepen), but - at the latest - when moving a project live, you'll need the proper license. I hope this will help; Happy tweening! https://codepen.io/akapowl/pen/xxzENBp

So it doesn't remain being orange when scrolling further? Sure. If you don't mind the content on the left jumping back to the initial view too, the easiest way would be to just remove the "remaining" class on that content-div. What you could also do in that case is change the toggleActions to just "play reverse play reverse". If you want to keep the content on the left at the last state when scrolling any further, with this setup you would probably have to split that first timeline/ScrollTrigger setup into two individual scroll-triggered timelines/tweens with the one for the content on the left having the exact same setup as the smallTimeline has now but an empty tween in place of the tween that changes the color now... contentTimeline .to({},{ duration: 0.25 }, 0) .set(relevantContent,{ autoAlpha: 1 }, 0.125) ; ...and the other one that is then only responsible for changing the headings having its toggleActions set to "play reverse play reverse". https://codepen.io/akapowl/pen/XWYXxOx Or alternatively just set up one ScrollTrigger for the headings with the toggleActions as mentioned above, and handle the logic for the visibility-change of the content on the left 'manually' in ScrollTrigger's callbacks, like so: https://codepen.io/akapowl/pen/rNKMgxO If you are fairly new to ScrollTrigger, this example in general might not be the best to get started with though, and I would strongly recommend reading up on how toggleActions and the callback-system work in the ScrollTrigger docs. Nonetheless, I hope this will help a bit. Good luck woth the project!

Looks like you are now also tweening on the autoAlpha on that other timeline's tween in the forEach loop that is targetting the texts - and I think that is the cause for the jump back. Also in the second timeline's tween you created, you are tweening on opacity AND autoAlpha, which really isn't neccessary. autoAlpha is a handy shorthand combination of opacity with visibility being toggled, so better choose one of those - either opacity or autoAlpha. I removed the autoAlpha from both timeline's tweens and got this (also got rid of the blue color). Is that what you were going for? https://codepen.io/akapowl/pen/BaVLPYz

Welcome to the forum @Hitendra There are examples above, which are not using React. So all you'd need to do is apply the changes mentioned further down the line to those examples. Also, there really is no need for jQuery as in those demos it isn't even any helpful. Here you go. https://codepen.io/akapowl/pen/MWXeEEJ

Welcome to the forum, @ashishhh To me that looks like the 'typical' layout shift on mobile related to overflowing content. Make sure to set overflow-x: hidden on any element that might create horizontal overflow, like your fake-horizontal section e.g. If that doesn't help or work for you, please include a demo showing your issue in a minimal context. Here are some related older posts:

For the use of ScrollTrigger alongside a third party smooth-scrolling library, have a look at .scrollerProxy() That linked docs page also contains an examplar setup with locomotive-scroll. But as Mitchel already mentioned; Since locomotive-scroll is not a GreenSock product, you shouldn't expect too much support for it in these forums. https://codepen.io/GreenSock/pen/zYrELYe

Yup, pinning isn't possible in a scenario as such, because you are not actually scrolling horizontally, but merely animating the content to the left. Thus you'd have to adjust things animation-wise to achieve a similar effect to pinning. This recent thread shows one way for that and also contains links to other approaches in other threads.

Happy to help! I'm relatively new to all that myself - and although React often requires you to think a bit different than usual - and thus undoubtedly, gsap.context() is a brilliant tool, especially for animating in the realm of React - I think it helps keeping in mind, that in the end, all of it is 'just' JavaScript logic. Boiling it down to the minimum, I think, your approach would have been somewhat equivalent to try and target the element that is being looped over in a forEach loop like this - which wouldn't work the way you expected either. https://codepen.io/akapowl/pen/YzvqXrb

Hello @Giannetta - welcome to the forum. That is the case because your trigger elements in vertical scroll already are at 'center center', which is your start. If you want to trigger tweens in a fake horizontal scrolling scenario as such, best have a look at containerAnimation. This is from the docs: containerAnimation Tween | Timeline - A popular effect is to create horizontally-moving sections that are tied to vertical scrolling but since that horizontal movement isn't a native scroll, a regular ScrollTrigger can't know when, for example, an element comes into view horizontally, so you must tell ScrollTrigger to monitor the container's [horizontal] animation to know when to trigger, like containerAnimation: yourTween. See a demo here and more information here. Caveats: the container's animation must use a linear ease ( ease: "none"). Also, pinning and snapping aren't available on containerAnimation-based ScrollTriggers. You should avoid animating the trigger element horizontally or if you do, just offset the start/end values according to how far you're animating the trigger. Also when working in React, you really might want to have a look at gsap.context(). https://greensock.com/docs/v3/GSAP/gsap.context() In this pen I only included the containerAnimation part mentioned, not the .context() part. That I'll leave up to you. Hope this helps! https://codepen.io/akapowl/pen/GRGZjKy

Hello there, @Fritze - and welcome to the forum! .rep IS your component-ref in this case and not an ancestor of/within your component-ref, so I suppose you would need to set the trigger to component.current instead. https://codepen.io/akapowl/pen/xxzVGOj

Welcome to the forum @akudlac Following the logic of that pen, in the forEach loop over the headlines, create a second ScrollTrigger and tl/tween setup, that is only tweening on the opacity of the element. That ScrollTrigger should have the same vars (start, end, etc.) as the first ScrollTrigger - but instead of the toggleActions, just set once: truethere. Then in your CSS set the opacity of .text to 0.5 and you should be good to go. Give it a shot yourself and if you get stuck I'll be happy to help you figure out what went wrong with your approach.

Welcome to the forum! gsap.context() was added in version 3.11.0 https://greensock.com/docs/v3/GSAP/gsap.context()

If you want it to happen for each of your images, then set the ScrollTrigger up in the forEach loop over the images. Adjust its start so it is the same as the start for the ScrollTrigger that is scrubbing the image-height plus half a window's height. Set your colors-array up, so that it also contains the initial color as the first value and then target the colors like this in your callbacks. // pseudo-code... const colors = [firstPanelColor, secondPanelColor, thirdPanelColor, fourthPanelColor ] onEnter: () => { gsap.to("body", { duration: 0.5, backgroundColor: colors[i+1], overwrite: 'auto' }); } onLeaveBack: () => { gsap.to("body", { duration: 0.5, backgroundColor: colors[i], overwrite: 'auto' }); } https://codepen.io/akapowl/pen/rNKORBb

Hello @Naymur - welcome to the forum! I'm not sure I 100% understand what exactly it is you want to do - but the ScrollTrigger does in fact 'scrub' the timeline - it's just that the distance between your start and end is actually not existant because when you pass the start-point, your end-trigger will also have been passed already. Set your end according to the distance you want to scrub the timeline over. https://codepen.io/akapowl/pen/gOKaQKz

If you want it to trigger dependent on the progress of the scrubbed timeline for the images, you'll need to set the start according to start and end of that ScrollTrigger. See how they are being calculated for the ScrollTrigger in the forEach loop? start: () => "top -" + (window.innerHeight * (i)), end: () => "+=" + window.innerHeight, The first panel has the index 0, so its start effectively is 'top -0', and its end is one window's height after that. So if you want to trigger something when this scrubbed ScrollTrigger's progress is 0.5 that would translate to half a window's height in with that same trigger element, so... start: () => "top -" + (window.innerHeight * 0.5) https://codepen.io/akapowl/pen/gOKaQve

Your problems are related to React. When I remove StrictMode it works as it does in the codepen demo. See this thread for why StrictMode / React 18 can create problems with regard to GSAP And see these Articles for how to use GSAP with React; Especially the parts about gsap.context() and Cleaning Up. You will also likely have to implement some sort of Clean-Up with regard to smooth-scrollbar, but since that is not a GreenSock product, it is not within what these free support forums can offer. You can check their docs for information about their API. https://idiotwu.github.io/smooth-scrollbar/ https://github.com/idiotWu/smooth-scrollbar https://github.com/idiotWu/smooth-scrollbar/tree/develop/docs https://github.com/idiotWu/smooth-scrollbar/blob/develop/docs/api.md I know that there is a react verison/wrapper for smooth-scrollbar, too - maybe that can help somehow. https://github.com/idiotWu/react-smooth-scrollbar Welcome to the forum - and scroll responsibly!

Here you go: You can throw the url of any codepen into the search (top right) and it will show you all the posts that codepen was used in.

Here is how you can set up a ScrollTrigger on a native horizontal-scrolling section, scrubbing the value of your progress element from 0 to 100, depending on scroll-progress of that horizontal-scrolling section - if that is what you were asking. Most important besides a working setup and setting the ScrollTrigger to horizontal: true; Don't forget to set the proper scroller and trigger elements. https://codepen.io/akapowl/pen/VwdLoMq

Hello there! The very last section of that pen (and also the docs ) list/s some caveats of fake-horizontal scrolling, which this is, because you are not actually scrolling, but merely faking a horizontal scroll by animating the content to the left. One approach of what you could do instead is to fake the pinning behaviour by counter-animating the content of whichever section you'd want to 'pin' into the other direction, so to the right. Then you'll need to make sure, that that section is wide enough to begin with. I'm 'fake-pinning' the content of the second slide in the fake-horizontal section here for 2 times the window's width, which is why I set it up to not only be the 100vw wide that it should be visibly, but added the extra-width it needs to for the pinning to its width. .horizontal-inner .slide.two { flex: 0 0 calc(100vw + 200vw); width: calc(100vw + 200vw); } https://codepen.io/akapowl/pen/zYaGVVZ Other approaches can be found in these following threads. Depending on how exactly your setup looks, one might be more helpful and/or easy to implement than the other.

Your div doesn't have a button class but the id is button. You are targetting a class in CSS. That changed, everything appears to look fine for me. Is that better for you, too? https://codepen.io/akapowl/pen/poKJgxW

Or you could use actual SVG Text instead - that way the text would remain highlight-able for users and I think it also is being crawled by search-engines. It allows you to set a comma delimited list of values as the y-attribute - so if you set as many values as you have characters, each of the values will correspond with a character of the element. (If you only set two values in this case e.g. '110, 110' the first value will be assigned to the first character and the second value to all the other characters) <text id="text" x="65" class="Rrrrr" y="110,110,110,110,110,110,110,110,110,110">Grumpy!</text> Then you could e.g. do something like in the pen below to animate the individual values and set them to the text while they are being animated. But this seems a bit wasteful to me. There might be some better way to handle the SVG attribute's data that I'm not aware of / didn't come to my mind, and thus this might very well be over-engineered. Given the simplicity of a regular Split-Tex workflow it sure feels like it. Maybe this can serve as inspiration at the very least though. https://codepen.io/akapowl/pen/JjZdGrm

No, that is related to the purple section not being part of the array that is being looped over where the eventListener is added, because that is just how that example works. Edit: There is a missing space for var images in the code snippet below - I can not seem to edit it anymore. Everytime I change it, it will jump back to the typo it was before - just be aware of that. // see varimages = gsap.utils.toArray('.panel:not(.purple)'); If you still want to stick to that concept with regard to the eventListeners, you can target the purple section's scroll-position in there like so i === 2 && document.querySelector('button.fourth').addEventListener('click', autoScrollHere4) function autoScrollHere4() { gsap.to(window, {scrollTo: getScrollPosition(tl, 0.999)}); } As you can see from how the helper function is set up... function getScrollPosition(animation, progress) { // <--- second parameter accepts the progress of a tween/tl ... } ...and also from the explanation in the docs I linked earlier, the second parameter of the function accepts the progress of a tween/tl. Since the purple section is visible at the end of the last array-item's tl, just get the scroll-position of that instead - I made it 0.999 because at progress 1 it already went 1 or 2 pixels too far. Although, that was before I got rid of the space below, so now you should be technically be able to set it to 1 again, as there is no more space below. [You could also just pass the scrollTo tween directly to the eventListener instead of wrapping it in a function and adding that function, but let's just keep it as is for now] That is because of how the ScrollTriggers are set up in my example - as I wanted that at first only the blue text comes animating in and then at a later point the image starts animating. What mostly matters here is the start of the ScrollTrigger. If you want everything to start right away, you need to adjust that. In the pen below, I set it to start: () => "top -" + (window.innerHeight * i), on all ScrollTriggers, so they all start right away and all at the same time. Now with that setup, I also adjusted the end of the pinning ScrollTrigger (the very first one) // to this... end: () => "+=" + ((images.length) * window.innerHeight), // ...instead of this end: () => "+=" + ((images.length + 1) * window.innerHeight), to get rid of any excessive scroll at the end - and got rid of the excessive .fromTo() tween you've got in that last tl for the texts, which essentially does nothing as it tweens the text from 0% to 0%. // this one .fromTo(text, { y: () => { return "0%" } }, { duration: 2, y: () => { return "0%" } }) Alongside excluding the purple-text from the text-array, that also answers your last question, btw. Edit: Same typos for the vars ahead as mentioned earlier - be aware! I can't change this snippet anymore, either. // this.. vartexts = gsap.utils.toArray('.panel-text:not(.purple-text)'); // ..instead of this vartexts = gsap.utils.toArray('.panel-text'); There probably is - you could e.g. in an onUpdate callback of a respective scrubbing ScrollTrigger set the text (meaning the paragraph of every respective text-container alone) to a very high z-index, and with a delayedCall after that, set it back, so it jumps back behind the images when you have stopped scrolling. Yet, that would probably require some re-work of the layout in the first place (because this demo didn't have something like that in mind at all in the first place) and then on top of that some deeper thought with regard to the logic for that. I'm happy to help so far, but that is nothing I can do for you, as this free support forum is not a place for requests like 'I want x to do y when z happens'. Same goes for that - It surely is possible, but you will likely have to adjust the setup a bit to get that done. Now, here is that example with the changes I mentioned before in place. Additionaly I elevated the z-indexes of the panels by one because the images being revealed did not show up 'correctly' in the setup of your pen. gsap.set(".panel", { zIndex: (i, target, targets) => 1 + targets.length -i }); gsap.set(".panel2", { zIndex: (i, target, targets) => 1 + targets.length -i }); https://codepen.io/akapowl/pen/GRGgrbb In general I would suggest maybe starting from a different point than this example, if you don't have much experience with ScrollTrigger so far. And since I mentioned that thread once before already - there also are easier and probably more concise ways to get something like that done mentioned over there - especially now that you have all the scrubbed tweens start at the same time. I made use of the mapRange() utility method in the pen below, to map the progress of the timeline to the number of panels animated, in order to get the correct value for the respective index of each button here. Be aware, that this exact way things are set up will only work, when the number of buttons you have corresponds with the number of panels you have in total. https://codepen.io/akapowl/pen/VwdYbjj If you have any more GSAP specific questions (like with regard to the API or understanding GSAP core concepts), please create a new thread for those - best, a new thread for each of any more questions you might have, and keep them as short and concise as possible. That way a) not all the users in this thread get notified every time there is an update, b) it gets a whole lot easier to help you - as a long list of questions can become quite overwhelming, and c) it will be way easier for you to understand certain principles if they are condensed in small chunks of information rather than everything spread out over a huge wall of text. Anyway, I hope all this will help a bit. Good luck!

Since you are using a smooth-scrolling library that makes use of transforms for smoothening the scroll and is not based on native browser scrolling, GSAP's ScrollTo plugin (which you appear to have forgotten to load in your demo anyway) will not work in that scenario. smooth-scrollbar does have a scrollTo() method of its own that you should use. https://github.com/idiotWu/smooth-scrollbar/blob/develop/docs/api.md#scrollbarscrollto Also, I would suggest not adding the eventListener for the click on the same element in multiple places like you are doing, as this is bound to create conflicts. If you want to stick to that concept, just put it in the one forEach loop that is relevant for you. One more thing I noticed is that you have excessive characters in the values of your tweens in multiple places, you might want to fix that. // e.g. tl .fromTo(image, { height: () => { return "2safa00%" } }, // <<------- 200% { height: () => { return "0%" }, ease: "none" }) ; Lastly, you might want to further check on the smooth-scrollbar documentation, because for me when viewed on full-screen, there is an extra scrollbar showing with your example. https://github.com/idiotWu/smooth-scrollbar https://github.com/idiotWu/smooth-scrollbar/tree/develop/docs https://codepen.io/akapowl/pen/XWYJJvG https://codepen.io/akapowl/pen/bGKNNOr