akapowl

Hello @fdev - welcome to the forum. There is a helper function in the Helper Functions section of the docs that should help you get the scrollposition you want to scroll to. Here is an example with it in place. The critical part for the ScrollTo here is in the forEach loop over the images. Depeneding on what exactly you want to do and how you want to do it, you might have to adjust the logic. That's why it's always best to add a minimal demo of what you have tried yourself - different scenarios require different logic. This might help you get started though. https://codepen.io/akapowl/pen/zYaYNZd BTW, that example was taken from this following thread and modified a bit (e.g. I removed ScrollSmoother) as some of my examples in this thread here are not 100% correct. Hope it will help.

Hello there! That's just related to how browsers work. ScrollTrigger's pin-spacer, which is wrapping every element you are pinning, gets a z-index: auto applied inline there. Since your last section doesn't have any z-index specified, the browser will automatically put it 'behind' any element that has any z-index applied, even if it is just auto, thus it is 'behind' all the pinned sections. So to make your last section visible (as in appear above the other sections), just put a z-index on it, even if it is just auto (of course do that alongside a position property, or else the z-index won't have an effect). Edit: I've got to row back a bit - what I wrote above was how I had it in mind, but it actually isn't 100% correct. z-index: auto is default for every element, so it will also be there for your last section - what actually makes the difference is that you don't have a position set on your last section and the z-index will only have an effect on elements that have a position specified (or flex items; elements that are direct children of display: flex elements). So to correct myself again; simply set a position for your last section. https://codepen.io/akapowl/pen/abGgzjB Here it is simplified down; toggle the position: absolute of the circle on/off to see the difference it makes. https://codepen.io/akapowl/pen/zYjVxPr

Hey there, Flip appears to be working fine - you are just making some general JS mistakes; e.g. you're creating multiple arrays, and in your forEach loop you are then trying to toggle the class on an array (of arrays), which doesn't work like that. That's what the error that you're encountering is about. Also, on line 11, you've got a comma that will still be causing an unexpected toke error in your console if you had resolved that first problem. Here are some helpful ressources and your example working. Hope it will help. https://developer.mozilla.org/en-US/docs/Web/API/Element/classList https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/forEach https://codepen.io/akapowl/pen/qBYwbZX

No, it's not. Margins are outside of the elements in the box model, thus they do not count as something that adds to their height - here their offsetHeight in specific. So you'll need to add in the margin into your calculations for the end of the ScrollTriggers. Here are some useful ressources on that topic. https://medium.com/siliconwat/chapter-8-css-box-model-bae771db4da3 https://medium.com/siliconwat/chapter-9-box-model-dimensions-f9fa90defa https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/offsetHeight https://codepen.io/akapowl/pen/bGMZGKz

If you need some more help on this, please icnlude a demo of your scenario showing the issue you are having. It is very hard to give you any solid advice beyond guessing, from just looking at a couple of screenshots. Edit: Sound like you might be dealing with collapsing margins, though, so maybe this can help. https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Box_Model/Mastering_margin_collapsing

You're very welcome! If you run into problems implementing this in React and need help on that, best make sure to open a new thread for it then, so you catch the attention of the more React savvy people on this forum. Good luck with the project!

Not for some reason. As I said, every element with the panel class gets pinned in that example. So the last panel (the green one) gets pinned and thus the section below it will over-scroll it. If you don't want that to happen, you could either make sure that this last, green element does s not have the same class as those that get pinned, or you could change the logic of your code to adjust to that case, like so: pin: i === panels.length - 1 ? false : true By a comparison of the element's index to the length of the panels array it will check wether to pin or not to pin the panel. If it is the last of all the panels, it won't pin, else it will pin the panel. https://codepen.io/akapowl/pen/XWqOvRa

Hey there @dzestis94 Your element has position: absolute so if you tween it down 100vh like you did, it will tween into your second section. It would need to be position: fixed for it to behave like what you probably expected as the outcome with the values you set for the path. Also, since you have set the end of all your ScrollTriggers to an absolute value of 100 via defaults, it would only scrub over the distance of 100px (from scroll-position 0 to 100) and that's probably not what you want either. I'm not sure if this is what you had in mind, but here's an example for how you could go about it. I kept the position of the element absolute, but changed the values of the path and the end of the ScrollTrigger instead, to match that absolute position of the element. https://codepen.io/akapowl/pen/qBYgzwP

I was just about to add something about that to my previous post. If you want the panels to have a different height and pin them somewhere amidst the window (like it looks you were attempting there), you will probably have to recalculate the end property to something like this, if you dont want any panel to unpin, before all panels have shown up. Keep in mind, that this implementation will only work, if you have one 'block' of overlaying panels. If you want to have multiple 'blocks' of overlaying panels in different places amidst the scroll, you will have to further deduce the logic to achieve that. Is that more like what you had in mind? https://codepen.io/akapowl/pen/gOzqNBd

Hello Poylar Every element that has the class panel in that example will get pinned (when the top of the element hits the top of the window in the original). When you set the start to "top center" that means it will pin that element when the top of the element hits the center of the window. Now since the first section will have already passed that point it will appear exactly where it appears in your example, because that is what you tell it to. I'm not sure I really understand what exactly it is you are asking, but if you mean to just incorporate the pinning panels somewhere down page after some native scrolling, here's an example for that. https://codepen.io/akapowl/pen/vYjbqme

Hello Sergej, welcome to the forum. Looks like you forgot the leading dot on your endTrigger selector class // bad endTrigger: "timeline" // better endTrigger: ".timeline" If you want to properly calculate where the end should be then for it to be center aligned with the end-dot (btw you've got the end porperty in there twice), you could e.g. do it something like this end: "bottom-=24px 35%" ...where the 24px is the difference between the height of the .ball and the height of the dot you've got at the end of your line there (I believe it's a pseudo-element). Also; it's 24px here, because I set the height of the .ball to 32px instead of 31px just to have some value that is divisible by 2, so it actually looks centered in the end, too. Hope that will help. Happy scrolling! https://codepen.io/akapowl/pen/ZEowexa

Yup, @mvaneijgen is right, bootstrap is interfering with ScrollTrigger here. You've got the class position-relative on the element that you are going to pin. What bootstrap's CSS does with that class is this: .position-relative{position:relative!important} The !important in there will interfere with ScrollTrigger, as ST by default will set the element you're pinning to position: fixed inline, but since there is an !important in that CSS rule, this rule will make sure, that the position: relative will never get actually/properly changed - see the problem? Since you set that element to position: relative in your custom CSS anyway, there is no actual need for you to put that bootstrap-class on there, just remove it and you should be better off. Also as a sidenote: You are setting... html { scroll-bahavior: smooth } ... which is bound to also interfere with ScrollTrigger ( or other scroll-related plug-ins ), so you might not want to use that. Also, bootstrap will by default set the :root element to that scroll-behavior, so you might want to override that, too. Something like this, maybe: :root { scroll-behavior: auto !important; } Hope that will help. Scroll (and strap your boots) carefully! https://codepen.io/akapowl/pen/YzLBNoO

Great suggestion @alig01 👍- and welcome to the forum! In case you don't want to use clip-paths, here is another way you could achieve something like that without the use of clip-paths, @Olav. This is scaling the container of the image down in size, while at the same time counter-scaling the image up in size via a scrubbing ScrollTrigger, making use of the ExpoScaleEase from the EasePack. https://codepen.io/akapowl/pen/jOxXzYE

Try setting will-change: transform on your scroller element - that resolves it for me. ☝️ Because that is the case, you might be better off asking over at locomotive-scroll's github issue's, If it doesn't help in your case, https://github.com/locomotivemtl/locomotive-scroll/issues https://codepen.io/akapowl/pen/ZEoVoea

scrub is what you are looking for (instead of toggleActions) @dogzzz. scrub Boolean | Number - Links the progress of the animation directly to the scrollbar so it acts like a scrubber. You can apply smoothing so that it takes a little time for the playhead to catch up with the scrollbar's position! It can be any of the following Boolean - scrub: true links the animation's progress directly to the ScrollTrigger's progress. Number - The amount of time (in seconds) that the playhead should take to "catch up", so scrub: 0.5 would cause the animation's playhead to take 0.5 seconds to catch up with the scrollbar's position. It's great for smoothing things out. ...and if you also want to keep it in center as on the apple website, you'll also want to take a look at pin pin Boolean | String | Element - An element (or selector text for the element) that should be pinned during the time that the ScrollTrigger is active, meaning it will appear to "stick" in its starting position while the rest of the content continues scrolling underneath it. Only one pinned element is allowed, but it can contain as many elements as you want. Setting pin: true will cause it to pin the trigger element. Warning don't animate the pinned element itself because that will throw off the measurements (ScrollTrigger is highly optimized for performance and pre-calculates as much as possible). Instead, you could nest things such that you're animating only elements INSIDE the pinned element. Note: if you are pinning something that is nested inside another element that also gets pinned, make sure you define a pinnedContainer so that ScrollTrigger knows to offset the start/end positions accordingly. https://greensock.com/docs/v3/Plugins/ScrollTrigger https://codepen.io/akapowl/pen/mdLQKem

Hey there Samalander, this in your globals.scss is the root of your problems * { transition: 0.25s ease-in-out; } you are applying a transition of 0.25s for every property of every element on your page. When pinning, GSAP / ScrollTrigger has to apply a whole lot of inline-styles, so every time those change, there will be a 0.25s CSS transition for those properties of those elements. You've got to be very careful with CSS transitions on elements that are going to be changed by GSAP, so I'd recommend specifying transitions only when needed on elements and specific for properties that are needed - and most important: best don't set CSS transitions on properties of elements that are going to be changed by GSAP because they will interfere with what GSAP is doing.

Hello @Mobius - welcome to the forum. That example tweens on the values of a custom made object const airpods = { frame: 0 }; so you wouldn't really find anything on frame in the docs. Basically it does what you can find in the Getting Started Article at 'What else can I animate?' >>> 'Any numeric value, color, or complex string containing numbers' I also stepped through what is going on in that example in the post linked below. Maybe that will help. For more info on snap https://greensock.com/docs/v3/GSAP/CorePlugins/SnapPlugin For more info on ease https://greensock.com/docs/v3/Eases For more info on scrollTrigger https://greensock.com/docs/v3/Plugins/ScrollTrigger

Hello @Nemanja Pavlovic With GSAP's Draggbale it's as simple as creating a Draggable for each of your cards and using the header of each card as the trigger for the Draggable. https://codepen.io/akapowl/pen/PoexGLj From the docs: trigger [Element | String | Object] - If you want only a certain area to trigger the dragging (like the top bar of a window) instead of the entire element, you can define a child element as the trigger, like trigger: yourElement, trigger: "#topBar", or trigger: $("#yourID"). You may define the trigger as an element or a selector string, or a jQuery object. https://greensock.com/docs/v3/Plugins/Draggable If you want your Draggables to also be throwable (like it looks to be the case on that website you linked) you will need to include the InertiaPlugin, which is a Bonus Plugin for Club-Greensock members of the ShockinglyGreen tier and above. https://greensock.com/docs/v3/Plugins/InertiaPlugin

Hello there @Eyepatch Have you seen the ScrollTrigger demos page already? ...it has some nice effects that you can use for inspiration. There is a demo for an effect in there, that does essentially what you referenced on that website https://codepen.io/GreenSock/pen/KKpLdWW This pretty much behaves like the work-section on that website. https://codepen.io/akapowl/pen/wvjYyMx

Hello @chinnmay That appears to be a problem with React's StrictMode and how it handles things from React 18.0 on. You should definitely check out gsap.context(), which was added in GSAP 3.11 There is a demo for use with React on the very bottom of that docs page https://greensock.com/docs/v3/GSAP/gsap.context()#react This is your example working with that. https://codesandbox.io/s/nice-darwin-bp35ve And if you want to read more about how and why the StrictMode in React 18 makes things problematic, check out this thread.

I also addressed this question in that other post of yours @terroarr. Please don't post duplicates because people helping here will lose overview over what has already been answered. Thanks!

Hello @terroarr When you remove the overflow: hidden on the container you can see the full setup and compare what is going on 'behind the scenes' to the code you see. In Zach's latest codepen the elements are naturally stacked on top of each other, so you will first want to somehow invert the order. You could do that by adding an initial gsap.set in the forEach function that loops over the elements, something like this: vsOpts.slides.forEach(function(slide, i) { gsap.set(slide, { y: i * -2 * vsOpts.lineHeight }) ... }) Now you will have them stacked the other way towards the top, and since you want to tween the other way around (from top to bottom instead of from bottom to top) now all you'd need to do would be to invert the values for the y properties in the tweens from negative to positive and vice versa. So... // ...this... y: i * -1 * vsOpts.lineHeight // ...would have to be this... y: i * 1 * vsOpts.lineHeight // ...this... y: 50 // ...would have to be this... y: -50 // ...and this... y: -50 // ...would have to be this... y: 50 Give it a shot yourself and if you get stuck, post back with a minimal demo of what doesn't work for you, and we'll be happy to help some more.

And if you search for WebGL on codrops you can find articles (some shorter, some longer) on effects that come pretty close to your reference. https://tympanus.net/codrops/2019/11/05/creative-webgl-image-transitions/ https://tympanus.net/codrops/2020/10/07/webgl-video-transitions-with-curtains-js/

Yes, a minimal demo of what you have tried so far would really help, as we currently don't even know how/when you want to change the path definitions. I cooked up a demo of my own in between, although it is not really minimal, as most of what's going on in the code there is the logic behing it all. The logic for this pen is based on @mikel's example in that thread I linked to earlier. You're probably right about re-initializing the entire timeline when the path definitions change; That is what is happening here in the sync() function - it gets the current progress of the current tween, kills that tween then, and in the end creates a new tween (this happens here for each of my circles), which onUpdate of the path-changing tween will basically get overwritten for the entire duration of that path-changing tween (which is being triggered on click), so the circle visually moves along with the changing path in the end. https://codepen.io/akapowl/pen/eYrKXOr

Hello iongion, maybe this thread can help with that.