akapowl

Hello @Duo You will need to adjust the calculations for where to tween to. As of now the calculation still relies on the width of the first card, which worked in that other demo because the cards all had the same width. In your case, making it dependent on the last one would e.g. work. https://codepen.io/akapowl/pen/KKRPRVV If you have a different width on the last card, you might still need to have to change it, depending on where you want it to end. I already broke down my thinking process of how to possibly approach the calculations in that other thread you posted in. So e.g. following through that whole thinking process (and adjusting things so it is not dependent on the first card but the last instead, as mentioned before), this would have the last panel end up in center, no matter how wide it is. https://codepen.io/akapowl/pen/LYmPmRm If you want it to end flush against the right side, just follow that thinking process up until there and spare the part of centering things up. As a little sidenote; Since these pens now are dependent on the window's innerWidth, I changed the width of the .section to 100vw instead of 100% to make things more accurate. I hope this will help. https://codepen.io/akapowl/pen/rNvBvmz

Honestly (and I don't mean this condescending in any way) the best piece of advice I can give you is to not just copy and paste code you think might work for you - that will only get you so far, especially with scroll-driven and/or layout changing animation. The post I linked to before actually points out the major thing that was needed to be changed in order for it to work properly. It doesn't look like you implemented that or the overall changes in the JS. Now depending on how exactly you want things to behave, I'm not even sure this is the best approach to go for, but here is a working version of it. One thing I changed here is instead of toggling the playstate of the videos with the ScrollTriggers for the panels, to toggle it with the ScrollTriggers for the texts, so it is easier to have them synced (meaning playing the first video when the first text is visible and so on). Another is with regard to the 'timing' of the fade - I tweaked start and end of the relevantPanels STs a bit, so now the video will fade out only while the text moves from the center to the top. Getting the timing exactly like you want it, will likely require a bit of fiddeling with the values though - and for that you will need to understand what part of the code does what logic-wise. Maybe this comes close to what you imagined already though. https://codepen.io/akapowl/pen/eYMoVYm

Hello Isa, it looks like in your codepen example you are using an older demo of mine as a basis for the scroll-triggerring, which as it is will not work with ScrollSmoother because it is technically not set up 100% correct. I posted another updated version of that demo (with ScrollSmoother integrated) in the thread linked below. Maybe that will help. I would definitely recommend also having a look at the other suggestion for how to handle things, following what Blake suggested in that same thread... ... and/or Jack's suggestion for how to handle it in this other recent thread.

One pitfall with Bootstrap is that it will likely be adding scroll-behavior: smooth to your page ( from what I can tell to the :root ), which is bound to interfere with all sorts of scroll-related plugins, so best make sure to override that - it might spare you some headaches.

Hello Jean. If all you want to behave different is that the images change their width on scroll instead of their height, then all you'd need to change is that exact property in the tween responsible for that. // this... .fromTo(image, { width: () => { return "100%" } }, { width: () => { return "0%" } }) //...instead of this .fromTo(image, { height: () => { return "100%" } }, { height: () => { return "0%" } }) https://codepen.io/akapowl/pen/vYRMJZy But I also wouldn't recommend using the approach from the codepen you probably 'forked' your demo from as it is technically flawed and not 100% correct. The other thread you already posted in does for one contain a corrected version (although using GreenSock's ScrollSmoother instead of smooth-scrollbar.js for the smooth-scrolling)... ...and another approach, likely more comprehensive, following the suggestion by Blake in that same thread. I hope this will help.

This thread contains a helper function that should help getting what you are looking for to work @mikelpom

Then you'll need to adjust the logic of your code to work with that. One way you could do it is to pause the waste tween on click (and maybe just in case also reset the eventCallback to null again), tween the progress of the waste tween to 0 and in an onComplete callback of that tween, restart the waste tween again and re-add that eventCallback to the waste tween. Just an idea, maybe give it a shot yourself.

Hello @fd_alistair You could add an onUpdate eventCallback and check on the progress() of the tween. And then, whenever you gave the warning, make sure to remove the callback. Something like this maybe: https://codepen.io/akapowl/pen/GRxXGVy Or as an alternative, use a timeline and add a .call() at whatever point in time you'd like, making use of the position parameter https://codepen.io/akapowl/pen/wvmExKY

I think it's an issue with styling related to you trying to pin inside of a flex container. With display: flex, padding (which is neccessary for the pin-spacing) works very different from other contexts, so you'll have to work around that. But you also might want to re-think your start and end of the ST there. A start of "top bottom" with pinning on that element wouldn't make much sense, because then you would pin it when it is not even in view (when its top hits the bottom of the viewport). Also be careful about using absolute values like "600px" because those will refer to the actuall scroll-position on the page and if not used carefully might cause you to e.g. set an end that might get triggered before the actual start - it doesn't appear to be problematic in this case for now, just wanted to give you a heads up though. Here are some options you have with regard to the pinning. You could e.g. just pin the whole section / flex container... https://codepen.io/akapowl/pen/ExEERyW ...or instead set the section itself to display: block, create a flexing container inside of that section and pin that container instead. But you will also have to properly adjust the settings for the height of the panel and inner to make it work as you want. Hope this will help. Happy tweening and scroll responsibly! https://codepen.io/akapowl/pen/mdxxKZZ

Same for me - Punze is one of the few I can seem to remember, but still had to look up the English version. That looks like a neat cheat-sheet - thanks for sharing!

Hey there @BebDev - welcome to the GSAP forum! To work around the problem with regard to the path that @iDad5 pointed out above, you could just split up that one path you have there into multiple individual paths and tween on those instead - you appear to have tried to use some stagger before, which you could then also apply. You don't neccessarily have to go back into your SVG editor and re-create the SVG (although of course it is helpful to properly prepare your assets in there for animating to begin with), you could also split it up 'manually' - basically everywhere there is an M in your path, that's where one part of it starts, and a Z marks the end point (going back to the start) of each part. Maybe this link can help a bit with the syntax... https://css-tricks.com/svg-path-syntax-illustrated-guide/ ... also, fellow @PointC has some great articles on SVG asset preparation that might be helpful, too. That is not entirely true btw - I think it only doesn't work in this example because the fill is set to 'none' and you can not animate between no fill and a colored fill. If you don't want any fill to be visible initially, set it to transparent instead, then you should be able to tween it to the color of choice. Here is a pen using GSAP3 as suggested by @iDad5, with all of the above applied as a suggestion for how to make it work. I also set the opacity of the paths to 0 initially via CSS and added an initial set to the timeline that sets them to opacity 1 again at the beginning, to avoid a FOUC. Hope it will help - happy tweening! https://codepen.io/akapowl/pen/rNdprvg Edit: It might be better to not seperate the path for the outline of the letter R from the path for the punchhole (I think it's called counter in typography) but instead keep them in the same path element - then you wouldn't have to tween to different colors like I did above. https://codepen.io/akapowl/pen/yLKpxEY

Well, you can check their js bundle yourself any time. They are using GSAP 3.6.1 to be exact - and there is a looooooot of this.gl stuff in there. Here is just a very little excerpt that should make it clearer: (this.gl=t.getContext("webgl2",d)),this.isWebgl2=!!this.gl,this.gl||(this.gl=t.getContext("webgl",d) Of course, maybe they aren't even using it for this specific effect - but I'm pretty sure they are. I don't think you can even get that curvy bending on images with 3D-transforms alone - I mean, sure, you can overall get a reletively similar 3D effect like that, but I don't think you can get the edges of the images to bend like that without some sort of WebGL - but of course you can prove me wrong, too, if you want

Hello @Quang Anh - welcome to the GSAP forum. Yup - the effect on that website likely makes use of WebGL - and that is not going to be trivial at all. There is an article over on codrops explaining how to do such a wavy scroll effect - although it is not 100% exactly the same and contains some logic beyond that - but maybe it can serve as a starting point. Good luck with the project and happy tweening! https://tympanus.net/codrops/2021/01/05/creating-an-infinite-auto-scrolling-gallery-using-webgl-with-ogl-and-glsl-shaders/

Hello @dogzzz Good - then you need to think about what the codepen demo does and what you need to change for it to work like you want. The codepen demo pins every section without pin-spacing, so the subsequent section will overlay it when scrolling. So if you only want the first section to be overlayed on scroll, only pin the first section. https://codepen.io/akapowl/pen/ZExabRE Also, I'm not sure if you knew, but that codepen demo does load an external CSS file - as pointed to by Carl in this post recently, too. Maybe that will help with replicating the demo for your project.

Or hook into the transitionend event https://developer.mozilla.org/en-US/docs/Web/API/Element/transitionend_event

Hello @pavh2020 The threads linked in this post should help with that.

Oh, it does work - only it gets triggered when it isn't in view anymore, at the same time the animation on the third section gets triggered. The logic of that example was built to work like that - just in that very scenario - because it was only suggested in the first place when I thought that all the OP from that other thread wanted, was to 'pin' the very last section - once I understood that he actually wanted to be able to 'pin' every section, I suggested the other example. So once more; I do not suggest using this example. Note that these examples in general are not intended for copy/pasting in a way that you can just add some things of your own and expect them to work like you want - most of them are just showing concepts for how to approach certain things in certain scenarios with ScrollTrigger, like this one. That too is not a ready-to-go all-in-one copy-and-paste custom-code solution - if you put in the time and effort you can change it to whatever you like as long as you understand the logic that lies underneath it all. As mentioned in that other thread too... ...and the position parameter in addition to that. It can not hurt to also have a deeper look at flexbox if you want to have segments with specific widths in this scenario https://css-tricks.com/snippets/css/a-guide-to-flexbox/ Besides some general changes with regard to naming (to make it a bit more evident what is what) of the elements and to the layout in CSS, I changed the position parameter of the tweens responsible for the fake horizontal-scrolling here, so it won't have a delay between when the bars are done tweening and the movement to the next slide and with that regard also got rid of the empty tween for the last segment. Also the amount which slide needs to move here isn't dependent on the increment variable anymore but instead on each section's individual offsetWidth. Maybe this will help, but nonetheless, this isn't the most trivial thing you want to do, so I suggest diving into how all those things mentioned work. One problem now, is that when you do have sections with different widths in there, they will not move to the left at the same speed - wider sections will move much faster than narrower sections because of how the durations of the tweens are set up. If you needed, you could change that by doing some calculations for the durations of the individual tweens of the timelines, but that is getting quite out of scope for what this forum can offer and thus is nothing I can do for you. https://codepen.io/akapowl/pen/QWmObNv

Not sure what you mean - but I was also talking about the other examples in that thread where you got that demo from. Like this one... https://codepen.io/akapowl/pen/LYeYVRM ...which is based on Cassie's example from this thread.

Hello @ricksanchez You can not pin in a fake-horizontal scenario as such because you are not actually scrolling horizontally but only just tweening the content to the left on vertical scroll. One way to achieve an effect similar to pinning in a fake-horizontal scenario as such would be to just change the way that the horizontal tweening of the sections behaves altogether - something like was shown in this thread ...and also suggested in this thread. Another way would be to tween whatever you want to 'pin' to the right for the same amount over time that your content gets tweened to the left but that will also require a bit of a different setup where it is not the actual sections being tweened to the left a surrounding container, so you can tween on the sections themselves to create that nullifying 'fake-pin' tween on the sections themselves - but this approach will probably become quite tedious as you will have to consider all following sections and re-adjust the values for the fake-horizontal scroll back and forth - so I would definitely suggest going with what was suggested above instead. Nonetheless here is an example of what I mean with this second approach. https://codepen.io/akapowl/pen/zYWEpBd Edit: If you want to go with that second approach (which again, I wouldn't really recommend as it can become quite cumbersome at some point) you might want to have a look at the containerAnimation property that was used in my demo. 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.

Hello @etheric I suggest having a look at containerAnimation, which will make it much easier to trigger things within a fake-horizontal scenario as such 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. On a different note: While you have invalidateOnRefresh in there, your setup will not react to resizing because you never re-populate/update the variables that you use in your ScrollTriggers, so they will always contain the values that you fed them with initially. You might want to consider changing that. Either update your variables on resize or just get the values neccessary directly in ScrollTrigger. I'll leave that up to you though. Here's a pen showing what I understood you want to achieve with regard to the fake-pinning. I hope it will help. https://codepen.io/akapowl/pen/xxWXPmd

No, there are actually a couple of things you'll have to consider now. I didn't even notice before, because it wasn't apparently neccessary before for things to work, but you are actually making one of the most common ScrollTrigger mistakes when it comes to timelines. Don't put ScrollTriggers on individual tweens of a timeline, they only belong on the timeline itself! It's best to never animate the element you use as a trigger - if you change positioning like on the y axis here, it is bound to throw off what ScrollTrigger calculates as start and end because you change where they actually are in the native flow. Not only that, but in your case you also change the actual height of the page because of that. What you should do instead is wrap the element you are going to tween on in a div and use that wrapping element as the trigger then. Now even if you do that in your scenario, you will create white space at the bottom, so consider setting the background on the wrapping element instead. You will need to incorporate that offset you created (which you had mentioned before) into the start and end of your ScrollTriggers. Since you are applying transforms to the parent of the element you want to pin later on, you will have to use pinType: 'transform' or pinReparent because those transforms on the parent create a new context for the position fixed that is used by default for pinning in this case, and it won't work like you'd imagine This is how I would approach it: Create one timeline with a scrollTrigger attached, use #div1 as the trigger, starting when its bottom hits the bottom of the window (so right away) and ending when its bottom hits the top+=150px (the 150px making up for the amount you tween #div2 upwards). Add your two tweens to that timeline and position them via the position parameter to both start right at 0. For the pinning of #div3 create another ST also using #div1 as the trigger but pinning #div3 - of course also make sure to properly set the start accordingly. Hope it will help. https://codepen.io/akapowl/pen/poLPyBj

This looks oddly familiar, so I'm just gonna echo what @GreenSock said in this other thread

I don't see anything you tried in the codepen you posted - it only has the JS I provided you with before - so I can not tell you anything about that. I'm also not sure I understand what it is you actually want to achieve - at least in the context of you adding an 'offset to do this animation'. From what I understand, you basically want to pin another element in a different place, so what I mentioned in my first post would also apply here. You will have to create another ScrollTrigger that will handle that for you - and also make sure to properly position things via CSS to begin with. This is what I understand you wanted to achieve. Does that help? https://codepen.io/akapowl/pen/MWVmYgV You're good, no need for a tip. Just keep in mind that this forum isn't intended for custom code requests á la 'I want X to happen after Y and then do Z' .

Hello @s-jay As I already mentioned in that older thread of yours. Using browser native navigating via hrefs to IDs on the elements you click will not work because this basic example I created for you does not work with native browser scrolling. The part for how to tween things is already in that example, though. So you could use that as a basis for what needs to happen when you click on one of your bullet-links there. Here's how you could approach it forEach of your links add an eventListener prevent the default behavior on click of that link instead, on click create a timeline for the tweening similar to how it is in the change() function of that example - but instead of things being based on the direction as it is in that function, maybe base the logic for where to tween to on the current slide you are on and the index of the link you clicked. So now you'll need to think about how to get the correct amount to tween things where you need them to be. Let's say you are currently on the slide with the index 0 and click on the third bullet that has the index 2. This could be one way: (index - current) * 100 = amount of yPercent to tween things ( 0 - 2 ) * 100 = -200 I say this is how you could approach it, because the example I provided you with the last time was just with the very basic tweening from one slide to another in mind - every time you want to implement other behaviour, chances are good that the basic logic provided could be improved to better implement that behaviour. And with this new behavior you want to implement in mind, the general underlying logic could probably be improved already. This has nothing much to do with GSAP though and thus is out of scope for what this free support forum can offer. As I mentioned, you've already got a suggestion for how to approach things from the GSAP side in that example, so maybe give it a shot with what I suggested beyond that now.

Ha, yeah I noticed that you were creating your ScrollTriggers out of order in your example - but since I figured that in this specific scenario it wasn't neccessary to mention because of that .wrapper element being pinned, I decided not to include a sidenote about that. Even better you found the solution yourself Happy tweening!