akapowl

I googled for this "selectwoo m.css is not a function" and got this as the first result: https://github.com/select2/select2/issues/4289 First suggestion in there says: That does resolve the error with selectWoo for me. Hope that will help - other than that, I'm afraid this really sounds more like a problem with the 3rd party script you are using and there very likely isn't much GreenSock can do about it. So if you still get any errors with that, maybe try contacting the creators of SelectWoo. https://codepen.io/akapowl/pen/dyjPLwv

Unfortunatelly it is impossible to help without seeing any of your code or knowing how you have set things up. Since the codepen demo above appears to be working just fine (at least for me it does - or are you saying that not even the example above is working for you?) I'd say this isn't a ScrollSmoother problem then, but it must be something about how things are set up in your environment. I myself am not familiar with Wordpress at all, so I won't be able to help. The only thing I can do is point you to this recent help article, although I'm not sure if this will help you any further.

I am not familiar with Select2 whatsoever, but I just had a quick look at their documentation (which by the way I would always suggest to do first, when something doesn't work for you.) They do have an option for dropdownParent, which you will likely have to use and set the proper element where their container is being set up, because otherwise the Select2 relevant container will be set up on the body and thus not work properly with ScrollSmoother, as all the smooth-scrolling relevant content needs to be inside the smooth-scrolling element. BTW this is not a Scroll-Smoother specific thing at all IMHO and will very likely be the same / similar across any smooth-scrolling library you are going to use. Not only does a minimal demo make it easier for those that you are asking for help to help you, but almost always it will be neccessary to help understand the issue you are having in the first place. Here is a demo showing that Select2 and ScrollSmoother work together just fine, if set up properly - if this doesn't resolve things for you, make sure to include a minimal demo of your own - for your convenience you could just fork this example of mine and tweak it to showcase your issue. https://codepen.io/akapowl/pen/YzjPgOz

Hello there. One problem is that you are not sticking to the order of progression as it is shown in the locomotive-scroll example on the .scrollerProxy() documentation page; which is this one here. https://codepen.io/GreenSock/pen/zYrELYe This following example on the other hand sort of emulates your order of progression, and as you can see, it won't work this way. [Open in wider window to see it not working, because due to the way locomtoive reverts back to native scrolling on narrower viewports the preview here works just fine] https://codepen.io/akapowl/pen/vYaErqP You should be adding the refresh-eventListener and setting the default scroller to ScrollTrigger before you create your ScrollTriggers. The latter one of those two probably is the one breaking things for you, so that is one thing that you will likely want to change. If that doesn't resolve things for you, make sure to include a minimal demo that demonstrates your issue.

Welcome to the forum, @guiguiland. Have a look at the threads linked in this post - the first suggestion linked there (the one by OSUBlake) will probably be the best one to have a look at. Those should help with what you are trying to achieve and also offer some more explanation about the process involved.

xPercent is based on the width of an element, so the logic of your fake-horizontal-scrolling tween will only ever work for cases where ALL sections have a width of 100% of the window's width (and no space between them). If you want to create a fake-horizontal-tween for sections with different widths like you have, you will most likely need to tween on the x of the sections instead, and manually calculate where you need to tween them to, like this older example from the demos-page does... https://codepen.io/GreenSock/pen/ZEpNLZa ...or make your calculations based on a wrapping container's scrollWidth minus a window's width. Something like this. https://codepen.io/akapowl/pen/bGKXrGZ BTW; @GreenSock @Cassie @Rodrigo That demo from the demos-page I mentioned above does not do what it was supposed to showcase anymore - looks like it was changed a bit, and in the process the active class that is supposed to be toggled went missing from the CSS. That demo actually showcased how to trigger things in a fake-horizontal-scenario before the containerAnimation feature was introduced, and I think the last part in the JS, which is resonsible for that, might be confusing to users nowadays. Maybe it could/should be updated to use containerAnimation instead?

Hello @scavaliere. Try thinking about what is currently happening and what needs to happen from a logical point of view for it to work like you intend (I simplified the duration of your tween a bit for my explanation to last 100% of the window's height to make it a bit easier to grasp). What IS happening now: you start pinning the blue section when its bottom hits the bottom of the viewport since you don't define a specific end it will default to 'bottom top', which makes the duration of your pinning equal to 100% of the window's height since for this overlaying effect pinSpacing is needed to be false, the red panel comes scrolling in immediately What NEEDS to happen: you will need to double up the duration, the blue panel gets pinned, so instead of 100% you will need it to last 200% of the window's height; i.e. 100% for your animation to happen where the blue panel shouldn't get overlapped and 100% for the overlapping part. For this to work only for the blue panel you can set the end via a ternary operator similar to like what is being done for the pin property in your example. since you don't want the red panel to come in scrolling immediately, you need to offset it with regard to its (y-axis) positioning on the page; e.g. via putting a margin-top on it equal to the distance your initial tweens is being scrubbed over; which in my example is 100% of the window's height, so 100vh Also, on a different note: start: "-=300" as you have it on your tween's tl is not valid - ScrollTrigger starts can not be relative values like that. you don't need to specifically set pin to false - that is the default for SrollTriggers anyway I think the way you have set up the tweens of that timeline does not work as you might expect. You have two tweens on there, which both will take half of the duration of the ScrollTriggers's distance, and that first tween (the .from() one) actually does nothing - you are essentially tweening from x: 0 to x: 0 there. Maybe you wanted to actually use a .fromTo() tween instead of those two seperate tweens? I'd suggest looking that up in the docs again. All that considered, things should already work a lot more like you had in mind - at least that's what I understood you wanted to go for. Hope it helps - happy tweening! https://codepen.io/akapowl/pen/MWXdOVa

Awesome Here is a bonus tip: in the latter of my codepens, the gap between the first and second text-elements ( between the first 'F' of one and the last 'Suite' of the other) is a bit smaller compared to the white-space between the individual 'F's and 'Suite's, but I think that's mostly related to how things are set up - to make it appear more even across the board you could just tune down the letter-spacing a bit, e.g. - I set it to 2.8px instead of 2.9px here: [I only changed the fill-color to make clearer what I'm referring to.] https://codepen.io/akapowl/pen/MWXzmrm

Hey there! If your elements change height in a way that it affects the page's layout and thus positioning of other elements on the page, there probably is no way around ScrollTrigger.refresh() - that's one of the reasons it is there for. Mostly for performance reasons (and probably also because of file-size) ScrollTrigger can/does not watch all your elements all the time and thus will not adapt to layout changes automatically - all the hard work is done when the page is loaded / on refresh. If you don't want to rely on on the timing of a setTimeout, you could also trigger the .refresh() within a transitionend eventListener (I suppose the height changes you mentioned happen via a CSS-transition) or even hook things up to MutationObserver (although this can definitely lead to performance issues depending on how many elements you watch, as mentioned in this thread). Both of those should be more reliable than a setTimeout function. And of course if the height changes were animated via GSAP instead, you could alternatively use GSAP's integrated callback system.

Great Suggestion by @mvaneijgen to duplicate the text - when I read it I was just thrown off a bit by the 'magical number' you would have to find. Looks to me like tweening one of the texts from 0% to 100% while tweening the other one of the texts from -100% to 0% would do just what I understood you had in mind @Paper Tiger https://codepen.io/akapowl/pen/eYKQvem Here's another fork where I just added another 'F SUITE' to both text elements to close the visible gap there. https://codepen.io/akapowl/pen/dyKQvjV

You didn't add any code to move the images, so of course they won't move. Or are you saying that you don't want to animate them to the sides anymore, but only have them move away with scrolling? I'm not sure I understand - could you try and re-phrase please? One thing I would suggest now that you have wrapped the .outer div in another div, to pin that other div instead of the .outer div in the example of mine, to make sure that the pin-spacing gets applied properly and the section below doesn't get overlapped. https://codepen.io/akapowl/pen/MWXzJxZ If you want the images around to keep scrolling though while you pin the center piece, you could probably keep the setup as you had it and just add a margin-top (equal to the distance of the ScrollTrigger's pin) to the section below via CSS to have the layout respect the pinning of the center-piece. https://codepen.io/akapowl/pen/xxzQqqO Since you say that you are a newbie and this is too much for you, I would suggest not diving in on the deep end. While it may seem intriguing to try and replicate a neat animation you saw on a website, you will not get very far if you don't understand the basics, I've been there myself not too long ago. With regard to ScrollTrigger it might be best to first leave it out completely - just concentrate on the animation you want to achieve. Start with a simple tween (like in my example) - if you want to add some more tweens to be sequenced or synced, move over to a timeline and try and understand how those work. Then when you have the animation itself working as you imagined, move over to adding it to a scrubbing ScrollTrigger. And while in that process you come along any directly GSAP related questions, or problems understanding something, like... I tried to do abc, and thought that xyz would happen, but as you can see in my minimal demo, actually something else is happening - could somebody explain why? ..we will be happy to help.

Those inline transform values you see, are probably also being applied by GSAP (well at least the site is using GSAP 3.5.1, so I suppose they are also using ScrollTrigger for the scroll driven animations), that's how it works as part of the CSSPlugin that is integrated in GSAP's core. E.g. tweening on the x value of an element (as probably neccessary for the images around the center) will apply a transform on the x-axis to that element inline. So you are going to want to animate ALL of them (the part in the center AND the images around) via GSAP/ScrollTrigger. I added some more information above about the use of a timeline and how to sync individual tweens up on scroll, just before you replied - so I'm not sure you've seen it yet. Maybe refresh this thread and have another look. Good luck with the project!

A good way to identify how an effect is done, is to open your dev-tools and inspect the page, @uavide. When inspected in dev-tools, you can see that what they are doing is tweening on a clip-path of the parent element of the video. Sort of like this - a tween on the clip-path being scrubbed through over a certain distance via ScrollTrigger: https://codepen.io/akapowl/pen/JjZmwRb At the same time they are tweening the images around that video from their initial position towards the edges of the screen. But this mostly will come down to proper layout and CSS-styling to begin with. To get it exactly right you will have to put in some work of your own. Maybe this can serve as a starting point though. For syncing those different individual tweens up on scroll then, you'll probably want to use a timeline instead of the single tween it is in the example above, and match the 'timing' of the individual tweens up on that timeline via the position parameter. Here are some other useful links for understanding how timing works with scrubbed ScrollTriggers and working with clip-paths. https://greensock.com/docs/v3/Plugins/ScrollTrigger#scrub https://developer.mozilla.org/en-US/docs/Web/CSS/clip-path https://bennettfeely.com/clippy/ Happy tweening!

Hello @lucasdesign Although it is great that you included a demo, unfortunately it is not exactly minimal, which makes it very hard to help. Also you are not including your CSS directly in the codepen, which again makes it a lot harder to help. There is a demo for the usage of locomotive-scroll alongside ScrollTrigger on the docs-page for .scrollerProxy(), which you will need to hook up ScrollTrigger to locomotive-scroll in the first place - you will need to stick to the order of succession in your JS as it is shown in that demo for hooking them up. For it to work with a horizontal-scrolling locomotive-scroll driven page you will also need to adjust the values the scrollerProxy gets and sets to the horizontal equivalents of those you can see in the demo on that page, AND you will need to set horizontal to true on your ScrollTriggers. Some other sidenotes to things I noticed within your demo: you shouldn't be trying to use both ScrollSmoother and locomotive-scroll together - that will produce huge conflicts, as they both will try to smoothen the scroll in a similar way (although they might be working a bit different) locomotive-scroll's data-scroll-section attribute will in the vast majority of cases not work alongside ScrollTrigger, due to how it makes the smooth-scroll work, so I'd advise against using it on your page if you want to use ScrollTrigger since you appear to want to use different setups for different screen-widths, you should have a look at gsap.matchMedia() which should help a lot with that. Here is an older example of mine for a scenario as such to possibly help you get started. Although it works, I can and will not guarantee that it is 100% correct with regard to how to set up locomotive-scroll. Also, especially the horizontal version of locomtive-scroll comes with quite some bugs and quirks that you can not really expect support for here, since locomotive-scroll is not a GreenSock product as Rodrigo already mentioned above. Maybe this will help though. https://codepen.io/akapowl/pen/Vwppzqb/87ad10833ca73c5a1ea59190fae48e32

Yeah, looks like it's working fine - What I noticed though is that the example does contain the content twice in HTML (meaning the panels from blue to gray) So while scrolling through the first set of those works as intended, when you arrive at the second set nothing will happen, because everything already was animated/pinned with the first set. Maybe someone could remove the bonus set of sections in there? @GreenSock @Rodrigo @Cassie https://codepen.io/GreenSock/pen/zYrELYe

Those are questions probably a lot more related to three.js than they are related to GSAP. I'm not the most versed with three.js, but I could imagine tweening on anything that is related to controls (like you are on the controls.target) not to be the best idea - because as the name already indicates, that is likely something that is controlled from inside of three.js, and if you are going to manipulate it in any way from outside, you are likely creating conflicts of some sort. If you take those tweens out of the equation, you'll see, that things are a whole lot smoother already. This fork here tweens on your hexagon's position and rotation instead, which probably is the better route to create something close to / similar to your example. three.js also has a rather active forum, if you've got some more questions with regard to three.js https://discourse.threejs.org/ https://codepen.io/akapowl/pen/gOKKKML

Hello there! This is one of the most common ScrollTrigger mistakes, as outlined in this article - you are creating .to()-logic issues since you have multiple ScrollTriggers controlling the same properties of the same object. One way to work around that is to set immediateRender: false on latter ScrollTrigger of yours, as can be seen in the fork of your pen below. Hope this will help - happy tweening! https://codepen.io/akapowl/pen/WNyyJYp

What's best to do really depends on what the purpose is and in what exact scenario it takes place in - unfortunately you have given very little information about that. ScrollTrigger.isScrolling() is not an eventListener per se, the way I see it - I would understand it more as a check wether ScrollTrigger is scrolling on a given event that you implemented yourself in some way. If all you want to do is to add a class to an element whenever a user starts scrolling (and maybe remove it when the scrolling stops), I would suggest making use of ScrollTrigger's eventListeners for 'scrollStart' and 'scrollEnd'. Have a look at the docs for more information. https://codepen.io/akapowl/pen/VwddLJW

Hello there! With just about ANY smooth-scrolling library, elements with position: fixed do not behave as you might expect inside the container that gets the transforms for the smooth-scrolling applied, as the context for the fixed positioning changes. This is nothing GSAP related, it's just how browsers work. You will either need to take the elements you want to appear fixed out of that container, or you could leverage ScrollTriggre's pinning to emulate a fixed appearance. Here is a fork of your codepen demo, where the header appears fixed, because I took it out of the data-scroll-container. I also added a high z-index for the scrollbar element via CSS, as it appeared below the header when I changed what I mentioned above - but that again is nothing GSAP related. https://codepen.io/akapowl/pen/vYrjXGo

Hello there, that's how it is with just about ANY smooth-scrolling library, since that's just how browser's work. The fixed positioning will change its context in parent elements that have transforms applied - and since (probably) all of them need to use transforms to smoothen the scroll, that is the recommended way to handle it. This is also the case for other popular libraries like locomotive-scroll and smooth-scrollbar. But since you are using ScrollSmoother (and thus need to be loading ScrollTrigger anyway) you could probably also leverage ScrollTrigger's pinning, to emulate position fixed on elements, as an alternative. Edit: Apparently lenis works a bit different, and it seems that position fixed / sticky work with it as it does with native scrolling - but I have no experience with that library at all - I only just stumbled upon it in this forum recently. Since ScrollSmoother is a GreenSock product though, I definitely still recommend going with it instead, because you can not expect much, if any, support for lenis on here if something doesn't work the way you'd expect e.g. in combination with ScrollTrigger. Nonetheless, here is a quick fork (with position fixed included) of an example I found on codepen by somebody else. https://codepen.io/akapowl/pen/zYajKdJ

Sure, you can also try and calculate an offset for the start instead if you'd like - but be aware that this still might cause problems later on in one way or another if you decide to trigger anything else on that element at a later point or in another way. What you could try is get the y-value of the element via gsap.getProperty() and base your calulations on that. https://codepen.io/akapowl/pen/JjZrvay Obviously any of the approaches will not work for the nested sections you have, because for those, ScrollTrigger also would need to have an eye on any ancestors of any trigger element - and since ScrollTrigger is built in a way that at minimum cost it gives maximum value, I don't think that is anything you can expect to be integrated into ST, but you would have to handle the logic for something like that yourself. Hope this will help. Happy tweening!

I added a comment above, which I'm not sure you saw; First things first, make sure to load ScrollTrigger, because at the moment you are not even loading it on your website! No apoligies neccessary. As of now, that auto-tweening might not even be related to using barba, but just to fact that you are currently not loading ScrollTrigger. Nonetheless all that information should be helpful going forward. As you can see from the posts linked, there are quite a lot of those around here. Working with barba can become tricky because it changes the way things are getting processed. My suggestion would be to really take it slow; first undersstand the core concepts of how barba works and then include everything else with that knowledge in mind, piece by piece - otherwise it can become quite the uphill battle.

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