akapowl

😅 Yeah, I already realized that myself (see Edit in post above). Thanks a bunch for the quick reply and the demo - much appreciated! It's been some time since I last touched on React, and it appears I tend to forget about its patterns; so this will definitely come in handy as a reminder.

Excuse me for hijacking. I was giving it a go myself earlier - but since I'm far from being an expert with regard to React, I wasn't sure whether to post or not. Here's what I came up with: https://codesandbox.io/p/devbox/usegsap-fork-9vd2cg?file=%2Fapp%2Fpage.tsx So just a quick question @Rodrigo. If you wanted the timeline to play/reverse specifically dependent on a state in React (because you might want to use that exact state to update something else on the page) would the approach I used be eligible, or do you see any problems using it like that off the top off your head? From what I understand, logic wise it should be pretty much like what you have suggested above - just taking a small detour via the state in React instead of triggering depending on the timeline's .reversed() 'state' directly, right? Edit: I just realized; Instead of the toggleTimeline function I could also just use a useEffect hook with the state as its dependency to toggle the timeline depending on the state - and in the onClick handler just set the state instead. That's probably more React-y; but I guess the question of the eligibility does still stand. https://codesandbox.io/p/devbox/usegsap-fork-forked-98wjvx?file=%2Fapp%2Fpage.tsx

Welcome to the GSAP forum. Here's what I found on a super quick google search: https://developers.squarespace.com/custom-javascript https://support.squarespace.com/hc/en-us/articles/205815928-Adding-custom-code-to-your-site Your question is very likely more related to how Squarespace handles things, than it is about GSAP. If you have any questions regarding GSAP directtly, we'll be happy to help on those. The ressources provided above should help get you started, though. Good luck with the project!

Besides from what I already mentioned, nothing in particular for the basics, no. Just about anything you can find on a search-engine of your choice should help get a better understanding of the basics. If you want to delve deeper, like when grappling more specific problems, you can search sites like e.g. CSS-Tricks for '3D' for more specific articles like these: https://css-tricks.com/state-responsive-3d-shapes/ https://css-tricks.com/things-watch-working-css-3d/ https://css-tricks.com/css-in-3d-learning-to-think-in-cubes-instead-of-boxes/

Hello there. This forum is actually meant for GSAP specific questions - like e.g. about the API etc. - Everything you mention really just are CSS styling issues though. If you want to know what's causing that huge vertical overflow, uncomment the 'backface-visibility: hidden' on your boxes and you will see that the perspective is sort of odd (I scaled your .stage down in this example so it becomes more apparent on first look), so you might want to change your perspective value. https://codepen.io/akapowl/pen/mdowBrG To change that, you will need to position your boxes properly within that perpective - that is within the container that holds the perspective. So to make it look 'symmetrically tilted' for bottom and top, logically they will need to be in the vertical center of the element that has the perspective. Here is your example with all that (and some more CSS styling on nav and body) changed. https://codepen.io/akapowl/pen/WNmOZRe If you are having problems understanding how to work with 3D transforms to set things up as you wish in the first place, I would suggest having a look at this guide for example. https://3dtransforms.desandro.com/ And since I mentioned it earlier, here's one thing about the GSAP API; You don't need to wrap everything in a css object inside the vars object; you can just target the properties directly in the vars object like so. // no need to do this gsap.set(stage, { css: { perspective: 1800, transformStyle: "preserve-3d" } }); // you can just do this instead gsap.set(stage, { perspective: 1800, transformStyle: "preserve-3d" }); But I'll leave it up to you to change that in your codebase. Cheers.

Hello there @codechirag Since it looks to me like what you wanted was to implement snapping for every section in that example - vertically native-scrolled and horizontally fake-scrolled - I really don't think you'll have to go the way of 'animate everything' as suggested earlier here. Snapping logic can become quite tricky, especially if you want to implement it across the board for different ScrollTriggers, but in your case I would suggest having a look at this older thread. It contains an example built by @GreenSock that shows how you can achieve what I understand it is you're after. I hope this will help you out. Cheers.

Welcome to the forum! In that video you attached, it very much looks like you have CSS transitions applied on elements that are affected by ScrollTrigger. Themes like Elementor often apply something like transition: all .3s to lots of elements - those will interfere with GSAP, so you'll have to make sure to overwrite them in your custom CSS. On top of that I would also make sure to overwrite the scroll-behaviour to auto because if I recall correctly, Elementor will by default set it to smooth, which can also interfere with your scroll related JS at some point. I hope this will help already. If it doesn't, unfortunatelly we won't be able to help without a minimal demo clearly demonstrating your issue. Good luck.

Welcome to the forum, Simon. You can disable automatic rounding via autoRound - that should help. https://gsap.com/docs/v3/GSAP/CorePlugins/CSS#autoround https://codepen.io/akapowl/pen/ZEPGRNa

Hello there. Since the reloads also happen on resize, I think this boils down more to the browser forcing iFrames to reload when they are moved around in the DOM - which they will be, when being pinned with ScrollTrigger, since ScrollTrigger adds a wrapping pin-spacer element and moves the contents to be pinned into that element. Have a look at this older thread for a more thorough explanation and suggestions to work around that - your best bet will probably be not to use pinning with ScrollTrigger but CSS with position: sticky instead if possible.

Welcome to the forum. These threads should help with that.

Hello there, Tulip. The best pointer IMO is what the documentation says about that: So you could e.g. try styling your list so it matches the height of its content in the first place, e.g. and then setting your list as the endTrigger element and the end to something like 'bottom center'; which would translate to something like 'end the pin when the bottom of the list hits the center of the viewport'. Or use a specific class on your last item as the endTrigger with an end as described as above; or use a CSS-selector like '.list p:last-of-type' maybe for the endTrigger with an end as described as above ... you have a quite a few options there. You might need to add some extra offset along the way to your end to entirely get to the result you need or want (like if you maybe want the end-point to exactly align with the bottom edge of that image for example); which you could e.g. do like so: end: 'bottom center+=100px' // or whatever value might represent half of the height of that image e.g. If you don't know the value of something beforehand, you can always get it via JS end: () => 'bottom center+=' + (document.querySelector('.smiley').offsetHeight / 2) https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/offsetHeight Make sure to use the value as a function-based value then (alongside invalidateOnRefresh: true) to make it properly re-calculate with changes on resize. I would suggest tinkering around with all the options you have there - and best set markers: true for that so you can see what exactly is doing what. The reason it only works when scrolling down is that you only implemented logic for it in an onEnter callback - so if you want to have it also work in the other direction, you'll want to have a look at the other callbacks too (besides onEnter there are onLeave, onEnterBack and onLeaveBack - all explained in more detail in the documentation) and add accompanying logic to those too. Getting that right can become a bit tricky though, expecially if you're not too familiar with things yet, and depending on how exactly you want things to behave. If you're looking for a clean approach to change the background-color e.g. you could have a look at this nice example posted by @Rodrigo in a different thread recently.

Hello @m4g1c14n I've tinkered a bit with your demo, and it might be more of a general issue with numeric scrub values in combination with snapping - not just limited to clipPaths. Here is a demo minimized down even further. The 'odd' behaviour seems to have been introduced with version 3.12.3. https://codepen.io/akapowl/pen/yLwBKJr Before (version 3.12.2 here) there was no flickering. https://codepen.io/akapowl/pen/eYXOMGY I'm sure @GreenSock will have a look into this as soon as he finds the time. In the meantime you could either try moving down to version 3.12.2 for now, or alternatively set things up with a scrub of true instead of your numeric scrub; since the scroll on your example is being smoothed already anyway. Steps to reproduce: Scroll down past or into the gray section - scroll back up and stop scrolling to let it snap. snap_scrub.mp4

It totally does start at the right time; exactly as you set it up to. https://codepen.io/akapowl/pen/GRzVRPe The 75% you mention probably relate to the scaleY of your #id at the time the second tween starts, right? That's because there is a default ease of 'power1.out' on every gsap tween. Since the scaleY increase won't be linear over the 2 seconds, you couldn't expect it to be 0.5 (or 50%) when the second tween starts (at one second into the first tween). This is that same demo with an ease of 'none' applied - and now with a linear ease of 'none' you'll see the value be around 0.5 (or 50%). https://codepen.io/akapowl/pen/YzBmzgJ Here for example is one place where it is mentioned in the docs: https://gsap.com/docs/v3/GSAP/Tween/#notes--tips If you want to keep any type of ease but a linear 'none' and still know when a tween will hit a certain value (like you wanting those 50% or 0.5) so you can set up something to start at that point then, you'll want to have a look at this helperFunction in the docs - it should totally help with that. https://gsap.com/docs/v3/HelperFunctions/helpers/easeToLinear/ [Edit] Oh, and I forgot to mention earlier: If you're going to change the dimensions of an element, best don't use it as the trigger element for a ScrollTrigger; that will just throw things off for you in the long run - better wrap it in a div and use that wrapper as the trigger then.

The reason for that might be that you are using a hard-coded relative value for your end. Speed is equal to distance of movement of something over time - which in scrubbed ScrollTriggers translates to distance of movement of your animated elements over the scroll-distance you define via start and end of your ScrollTrigger. Thus a change of speed is to be expected when using hard-coded values like you do, because the ratio of movement of your animation to distance of scroll (which as explained results in the speed) will likely change at some point when the width of the window changes. Have a look at this pen; resize it and watch the value in the upper left corner change with your hard-coded value as its basis. https://codepen.io/akapowl/pen/GRzbGKN If you want to make the speed equal across all browser-widths, use a value for your end, that will change in the same way, as the value for your animation will - e.g. that exact value itself (will feel most natural) - and make sure to also use it as a function-based value if you want it to react to resizing. Does that work better for you? https://codepen.io/akapowl/pen/vYbqrEK

Since ScrollTrigger doesn't change the scroll behaviour of your browser in any way; scrolling up should result in the exact same speed as scrolling down. If you mean that your scrubbed tween feels slower towards the end, than it feels at the start - which would be more noticeable when scrolling back up because depending on how fast you scroll down you might not even see the full tween until your ST unpins, because you are using a scrub with a value of 1 - using a linear ease might not actually be the way to go, but instead you might want to have a look at the ExpoScaleEase. While a linear ease would lead to the values of the scale get interpolated linearly over time; for tweening on the scale of something that does not mean that it will visually appear linear in 'speed' to you - although the math is absolutely correct. That is just a 'phenomenon' related to the nature of how scaling works. Make sure to watch the video on the linked page for a more thorough explanation. https://gsap.com/docs/v3/Eases/ExpoScaleEase/

Should you add it to the setup configuration for Lenis to work with ScrollTrigger in the first place? ...again; I'm not too familiar with Lenis, but I'd say that if it doesn't tell you to do so in the Lenis documentation (which apparently it does not), then I don't think you'd have to - adding it certainly won't hurt, though (unless you were to add it to the ticker - that would be a horrible idea). To me it looks like it also works just fine without it. If you want to know what it does and better understand whether you'd need to use it at some point, the best would be to have a look at the documentation, and see what it tells you. To keep it short; ScrollTrigger.refresh() is a method you can call in certain cases neccessary, that... When might that be neccessary? Whenever you change anything on your page in a way that will affect the ScrollPositions of elements you set up ScrollTriggers for. E.g. when you change the dimensions of your page or elements in a way that will cause layout shifts; or e.g. add content dynamically so the scroll positions need to be (re-)calculated, or something else along those lines. https://gsap.com/docs/v3/Plugins/ScrollTrigger/refresh()/ So unless Lenis does change something on the page, that would affect the ScrollPositions of the ScrollTriggers you set up, in hindsight, i don't think that would actually be neccessary - but as I already mentioned, I'm not familiar enough with Lenis to give you a recommendation about that. Maybe somebody else can give you a more thorough recommendation on that.

I don't think you are supposed to add it to the usual Lenis setup, but use it instead of the usual Lenis setup. When you add a simple console.log() of the direction in the onUpdate callback, you'll notice that the direction will flip from -1 to 1 to -1 to 1 [ and so forth] constantly. https://codepen.io/akapowl/pen/jOdRRzK That likely is the case because you call lenis.raf() in two ways over and over 'at the same time' - don't do that, you are creating conflicting behaviour. If you just remove the usual call of the lenis.raf(), you'll see it work as it should, right? I'm not too familiar with Lenis, but I think that should help; I hope it does. // Don't use this portion anymore when you add the lenis.raf() to the gsap.ticker function raf(time) { lenis.raf(time) requestAnimationFrame(raf) } requestAnimationFrame(raf) https://codepen.io/akapowl/pen/JjxVVMP

Welcome to the GSAP Forum, @TezzyBear One very simple way to achieve that the end position gets updated is to use vw/vh values for the x/y properties of your tween . https://codepen.io/akapowl/pen/OJdaewQ If you'd want to line up the center of your element to the center of the window, you could additionally also use xPercent/yPercent values on top of that. https://codepen.io/akapowl/pen/abXQgRv As Toso already implied, it always helps to add a minimal demo to your question, so a) it becomes clearer what you actually intend to do and b) people willing to help don't have to go through the extra-steps of creating some themselves to show you what you could possibly do. I hope that will help. Edit: If (for whatever reason) you can not use vw/vh values, another way to go about that would be to use function based values for your x/y properties, and in a resize eventListener function handle the progress of your tween and invalidate it, as suggested by OSUBlake in that older thread linked below, e.g. https://codepen.io/akapowl/pen/wvNQVaQ

Hello @Gnekr That SVG looks very much like the SVGs in these other threads a couple of weeks ago. As was already mentioned in those threads, what you're trying to achieve is entirely possible, but will not be simple at all, which is why that is quite a bit out of scope of what to expect as support from these free support forums; especially if you do not provide anything you have tried yourself that we could offer hints or advice on - please read the forum guidelines. Key to getting something like you intend done, is understanding how SVG works in the first place, so you can then go on and tinker with values that might be relevant for your expected animation goal. https://developer.mozilla.org/en-US/docs/Web/SVG There will be many, many things you will have to keep an eye on, so if I were you, I would start simple and work my way up the complexity from there. With regard to how exactly you want things to behave it might be better to re-work your SVG so it's easier to manipulate to get the exact effect going, that you aim for (as also mentioned in the linked threads). Below is a rather basic example just to help get you started with something - not intended to serve as a working solution for you. Note: I used the .getBoundingClientRect method to get the dimensions I need to map to the SVGs dimensions, just because it works for me. This likely might not work for your setup, and you may have to use some other way to determine the dimensions you need to work with. https://developer.mozilla.org/en-US/docs/Web/API/Element/getBoundingClientRect https://codepen.io/akapowl/pen/eYxRovy What will probably come in handy, is having a look at GSAP's utility functions, especially mapRange. https://gsap.com/docs/v3/GSAP/gsap.utils/ https://gsap.com/docs/v3/GSAP/UtilityMethods/mapRange() I didn't use it in my example, but you could also have a look at GSAP's Observer, as an alternative to the plain eventListeners I used... https://gsap.com/docs/v3/Plugins/Observer/ ...and GSAP's .quickSetter() or .quickTo() for setting / tweening the values on mousemove. https://gsap.com/docs/v3/GSAP/gsap.quickSetter()/ https://gsap.com/docs/v3/GSAP/gsap.quickTo()/ Also it might help in the long run for getting a better understanding of how to animate SVG to have a look at https://www.motiontricks.com/ I doubt you will find an exact example of what you're aiming for there, but it offers some neat tutorials and great general advice on how to best work with SVG when animating. Beyond that, if you have any questions directly related to GSAP, also please keep it simple instead of listing a bunch of requirements that you expect others to provide a full-fledged solution for. This forum is not intended to give out custom crafted code examples to anyone asking for it, but to help with problems encountered when using the tools provided. Stitching the little pieces together and developing the logic behind that to achieve your goal, will be yours to do. And as also mentioned in the other threads already; If you see no way to achieve something like that yourself, you might want to explore paid consulting options with GreenSock by reaching out to them directly, or as an alternative you always have the option to post in the "Jobs & Freelance" forum to try and hire someone else that can help you with your tasks. Good luck with the project! Edit: Here's that same example using multiple paths, just to give you a better idea for your more complex scenario. https://codepen.io/akapowl/pen/QWYgeXO

Hello there @torry - welcome to the GSAP forum. That is nothing really GSAP related - more like a styling issue you're encountering. Your problem is, that the picture sits on top of the nav and thus blocks pointer events to go through to elements below it (on the z-axis). [ Edit: to be precise, it's not the img itself, but the wrapping div.pic1 ] You can visualize that easily by right clicking where that link is that supposedly doesn't work, and then in the context menu click 'inspect element' (or something along those lines) to inspect the page in your browser's dev-tools. A way to solve it would be to boost the z-index of your nav via CSS. Don't forget to also set a position for the nav to make it work in the first place. https://developer.mozilla.org/en-US/docs/Web/CSS/z-index Something like this. I hope that'll be helpful. https://codepen.io/akapowl/pen/QWYvdJG

@Cassie I didn't. It was in @goooon's example already when I forked it. So if you're interested in why they did that, It would probably be best to ask them. Maybe it was just for the sake of testing the animation without ScrollTrigger hooked up to it. Because, yes, since the animation is being scrubbed by ScrollTrigger, the addPause() doesn't actually do much 🫠

Hello there Robert. I know that I have definitely done that before without having to import anything. This older pen is at revision 128 of three.js https://codepen.io/akapowl/pen/VwWqVVY/0e4f333fc375210ed9236642d3cef8c9 At some point after r128 I think, three.js changed their architecture to use a more modular approach, probably to adjust to more modern coding environments. Nonetheless it should still be possible to add three.js, import models and add OrbitControls, e.g. in Codepen. I found this pen, that is showing how to import OrbitControls and an object via GLTFLoader - it's on r140 of three.js ... https://codepen.io/sowhaty/pen/VwQveqV ... and seems to also work fine when updating to the latest revision (which is 157 currently if I'm not mistaken). Integrating GSAP works just fine, too. https://codepen.io/akapowl/pen/QWzVwjo That example is using an importmap (see HTML section) to help import things via JS ... https://developer.mozilla.org/en-US/docs/Web/HTML/Element/script/type/importmap ... and has es-module-shims integrated as a sort of polyfill for cases where importsmaps might not be supported yet. In general, I think the problems you're experiencing are more about getting used to the new ways, the tools you want to use are built in. Maybe that'll be useful in some way for the future. Happy tweening!

Hello @fewture I can even replicate it on a Desktop device. But without any access to your code to tinker with in an easy way, it is close to impossible to tell what is causing that. As a starting point for debugging it yourself, here's what I think might be connected to your problem. When the section is not pinned everything is fine... ...as soon as it gets pinned though, there is a transform on the Y-axis applied to that section, which will cause it to 'dis-appear' - that changed back to 0px in dev-tools would make it 're-appear'. So it looks to me like there might just be something wrong with your setup somewhere in your code, or you have something interfering at some point. But again; without having access to your code in an un-minified format and ideally cut down to the bare minimum, so we can tinker with it, it is close to impossible to tell what that might be - the possibilities are endless. Debugging live-websites also is a bit out of scope for what is expectable from this free support forum, as there is just too much involved outside of GSAP. From having a look at the imprint of your website, it looks like you are located not too far to where I'm from myself - so in case you need some deeper custom consultation on this, I'd like to offer my services. Feel free to DM me about that, if you're interested, and we'll see how we can work something out.

Hello @Valuecom - welcome to the GSAP forum. We actually like to keep the forum focussed on GSAP specific questions. I personally am not aware of any helping library for handling iFrame loading states. Since this isn't GSAP related, I just asked Google about this and here are some answers I got. https://stackoverflow.com/questions/29233928/iframe-onload-javascript-event https://stackoverflow.com/questions/3142837/capture-iframe-load-complete-event https://stackoverflow.com/questions/60461930/checking-if-iframe-contents-are-loaded

Hello @Solbeg What Mitchel said actually isn't 100% true - ScrollTrigger does have a built in porperty to match cases like yours, where you are pinning the parent element of your trigger element multiple times - it's the pinnedContainer property. This is from the ScrollTrigger docs: pinnedContainer Element | String - If your ScrollTrigger's trigger/endTrigger element is INSIDE an element that gets pinned by another ScrollTrigger (pretty uncommon), that would cause the start/end positions to be thrown off by however long that pin lasts, so you can set the pinnedContainer to that parent/container element to have ScrollTrigger calculate those offsets accordingly. Again, this is very rarely needed. Important: nested pinning is not supported, so this feature is only for non-pinning ScrollTriggers (added in 3.7.0) That should fix your issue without a lot of custom code, but instead handled by ScrollTrigger internally (gotta thank GreenSock for that). Does this work better for you? https://codepen.io/akapowl/pen/ExGEBpm