All Activity

Hello, I would like some help solving an issue: I've attached a CodePen with details of the implementation: I have a menu that opens and closes, and the status of this menu is stored in the browser session (open/closed). When the initial status is "open", the animation plays normally ("start" -> "end"). The problem occurs when the initial status of the animation is "closed"; it should play ("end" -> "start"). I'm setting the position as follows: if (!toggle) { // define if the menu should inicialized closed and set seek to ("end") tl.seek("end").pause(); } But when I click play, the animation doesn't occur (nothing happens). if (this.reverseTimeline) { tl.play() } else { tl.reverse() }

Thanks! Oh brilliant! thanks for the help, yeah that's what I was looking for. Its really interesting I think understand the drawSVG values a bit better now after also reading the docs page for it, I also tried to implement the appear/disappear as you mentioned, but it's not quite as clean as I would like. I added a tween at the beginning to make it appear and then I added another on update just before it ends to try and make it disappear, but it really looks rough especially if I scroll back up 😂. Is there a cleaner way I could be doing it, maybe when you enter the start and exit the end of the scroll trigger? This is where I am at so far. https://codepen.io/Jaudy/pen/vYMQxoj

Hi @Fullerfort, Right now you have a logic issue since you're running your code only for the first page: PAGES.forEach((page, index) => { set(page, { z: index === 0 ? 13 : -index * 1 }); if (index === 0){ to(page, { rotateY: `-=${180 - index / 2}`, scrollTrigger: { scrub: 1, start: () => (index + 1) * (window.innerHeight * 0.25), end: () => (index + 2) * (window.innerHeight * 0.25), markers:true, }, }); to(page, { z: index === 0 ? -13 : index, scrollTrigger: { scrub: 1, start: () => (index + 1) * (window.innerHeight * 0.25), end: () => (index + 1.5) * (window.innerHeight * 0.25), }, }); } else return false; }); That code block is running only when the index is 0, so the first page. May I ask why you changed the JS logic jh3y created? If is not broken don't fix it. Just changing the content of the pages should be enough IMHO. If you want to study and learn what is being done and why, then that is mostly related with JS logic and not really a GSAP issue. I'd recommend you to have a peak at MDN: https://developer.mozilla.org/en-US/docs/Web Happy Tweening!

Hey there, Thank you for you answers! I wasn't expecting the magic solution for sure. I just wanted to throw this out here see if there were some ideas. Thanks for your tips @mvaneijgen I'll experiment later when I'll have time for that. Thanks again!

Also, if you think there is a better way, your suggestions are welcome!

Hi @Rodrigo thanks again for your help. I've updated the CodePen (https://codepen.io/richardcool/pen/yLrqdQm), stopped the sticky header and removed the errors but I'm still getting the issue where it'll scroll to the position of the section without taking into consideration the pinning. Does scrollTo simply scroll to a Y position without taking the pinning into consideration?

After having trouble integrating gsap with astro and view transitions (see thread https://discord.com/channels/830184174198718474/1230877829386735616) I think we found a possible way to do it (thanks @Fryuni for the feedback), just wondering if you can confirm I m not missing some holes. So essentially I made a proxy function where all the timelines are stored in a variable and before starting any timeline the method clear is called (https://gsap.com/docs/v3/GSAP/Timeline/clear()/). https://github.com/zanhk/astro-gsap-leak-test/blob/tl-pool/src/scripts/global.ts#L17 import gsap from "gsap"; export const gsapTimelines: { [key: string]: gsap.core.Timeline; } = {}; export function createTimeline( key: string, timelineOptions?: gsap.TimelineVars, ) { const newTimeline = gsap.timeline(timelineOptions); newTimeline.paused(true); gsapTimelines[key] = newTimeline; return newTimeline; } export function loadTimeline( key: string, timelineOptions?: gsap.TimelineVars, ): gsap.core.Timeline { // Here take the timeline from the cache if it exists, otherwise create a new one const timeline: gsap.core.Timeline = gsapTimelines[key] ?? createTimeline(key, timelineOptions); let clearAdded = false; const handler: ProxyHandler<gsap.core.Timeline> = { get(target: gsap.core.Timeline, prop: PropertyKey, receiver: any): any { const origMethod = target[prop as keyof gsap.core.Timeline]; if (typeof origMethod === "function") { return (...args: any[]) => { if (!clearAdded) { target.clear(); clearAdded = true; } const result = origMethod.apply(target, args); if (prop === "play") { clearAdded = false; } // Ensure the proxy maintains the correct this context return result === target ? receiver : result; }; } return origMethod; }, }; return new Proxy(timeline, handler); } Usage https://github.com/zanhk/astro-gsap-leak-test/blob/tl-pool/src/pages/to.astro#L53 loadTimeline("test") .to(".line span", { ease: "power4.out", y: 0, stagger: { amount: 0.3, }, duration: 0.5, }) .play(); That way the heap should be cleared before executing the timeline again. Did I miss something? Thanks

Thanks a lot, i’ll try and let you know. Well with other tests, seems that the tardy pin affect mostly the iPhone, i’ll test on Android phone, Samsung, and works well too, i don’t know, but surely i’ll try your tips and let you know, Thanks a lot again ♥️

Yeah I don't know what I'll do. Ill maybe have to try JS as this is what i see on my ipad (excuse the state of it, I have a 3 year old!)

This appears to be funky behavior caused by Vue forcing refs to be Proxy objects. So when you access ref.value, it isn't the real object at all! It's a Proxy which alters what "this" refers to inside method calls. I think it's terrible that Vue does this actually, but maybe they have good reason for it. 🤷‍♂️ From what I can tell, the solution would be to use a shallowRef() instead of ref(): https://stackblitz.com/edit/github-vfgcdf-g52l6b?file=app.vue Does that clear things up?

This is the debug link on devtools: https://i.imgur.com/CvJDG6V.mp4 I'm seeing exactly the same on an android (chrome-firefox) phone and iPad (chrome-safari) 🤷‍♂️ Sorry but I can't seem to replicate the problem you mention. Happy Tweening!

This is on my actual phone after going back to portrait with your codepen. Sometimes it doesn't, sometimes it takes a few tries, but sometimes it's on first orientation. It's killing me! I'm considering trying to switch to just JS

Hey there - if you open your codepen in dev tools and change the orientation, you'll see it breaks, same as my codepen which I stripped back (I also took a backup then stripped my website right back to practically nothing) the way it looks in dev tools is the same as it looks on my phone for both mine and your codepen and my stripped back site (though I have since restored the backup) The screenshot below is your codepen. I have just rebuilt the entire thing without pinning and it still does the same, it's a bit better, but the start and end pins are still way off on orientation change.

Hi, I still think that this is related to something you're adding on the HTML/CSS of your project (or maybe wordpress is). I forked your demo and stripped all the CSS that wasn't need, the bare minimum, and is working as expected on my android phone on orientation change: https://codepen.io/GreenSock/pen/MWRzJJV Here is the debug view (no iframes, just like a regular website) https://cdpn.io/pen/debug/MWRzJJV If you check that link on a small screen and flip the orientation you'll see that the pinning works as expected. That gives me more ground to state that this is not a GSAP related issue, but something else in your setup that is causing this. Hopefully this helps. Happy Tweening!

Function based values mean that when the ScrollTrigger instance is refreshed that end value will be whatever number/string that function returns. If oyu're doing some sort of calculation whose result might change that calculation will be run again. In the particular snippet you added the end point is based on the height of an element, if a screen resize changes the height of that element then the end point will be recalculated as well. Hopefully this clear things up. Finally it seems that you have created two different threads for the same issue, please let's keep the discussion in just one thread. That will make easier to follow and focus our efforts, thanks! Happy Tweening!

Without a minimal demo, it's super difficult to offer a suggestion here or understand what you're asking for - are you saying you want to apply ScrollSmoother...but not have it actually work at all? You just want to have it pretend to work, feeding you the value that it would apply to the container's transform, without applying it? Maybe you could add a ticker listener with a high priority to grab the original transform, and then use an onUpdate on the ScrollSmoother where you grab the new value but immediately apply the old one to revert it(?) I'm totally guessing here in the absence of a minimal demo, but hopefully that gives you a little to go on at least. I wonder why you wouldn't adjust whatever you're doing with the <body> transform to more cleanly apply that in a way that integrates with ScrollSmoother(?)

I'm building a site that has a page color changing function that is triggered by ScrollTrigger. It all works great until I throw a pinned section before it and all the subsequent sections only account for the actual DOM heights. Can someone point me in the right direction on the best approach to handle this type of thing? Here is a minimum viable demo of the two ScrollTriggers in action. https://codepen.io/tylorreimer/pen/OJGaRVz

Does it work well for you without Lenis? That's not a GreenSock product, so we can't really support it here. If you're talking about the pin seeming to be a little bit tardy, that's likely because mobile browsers are particularly bad with using a separate, non-synchronized thread for scrolling which is why ScrollTrigger offers a anticipatePin option. You might want to try adding anticipatePin: 1 or some other value just to see if it helps. You could also see if it's any better with ScrollTrigger.normalizeScroll(true);

Hi, You where using different versions of the ScrollTo plugin and the GSAP core. On top of that the versions of the core and ScrollTrigger were really old 3.3.4. On top of that there seems to be something else that is causing this. This demo uses a similar setup and is working as expected: https://codepen.io/GreenSock/pen/RwOqojv Most likely is the position sticky you're giving to the nav bar, better use ScrollTrigger to pin that. Hopefully this helps. Happy Tweening!

That's because your path data isn't valid. You specified type: "cubic" but your path data only has 3 points instead of 4.

I've actually just rebuilt the whole thing Without pinning but the markers still off on orientation change! To apply the above to the new animations, is this correct because it does not work, i think maybe I have modified it incorrectly let tween1, tween2, tween3 ; function invalidateAndRemakeAnimations() { // Kill existing animations tween1 && tween1.revert(); tween2 && tween2.revert(); tween3 && tween3.revert(); // Remake the first animation tween1 = gsap.to(".fixed-wrap", { scrollTrigger: { trigger: ".initial-row", start: "top top", scrub: true, invalidateOnRefresh: true, markers: true }, position:'fixed' }); // Remake the second animation tween2 = gsap.to(".last-text .text-holder .text", { scrollTrigger: { trigger: ".last-text", start: "top top", scrub: true, invalidateOnRefresh: true, markers: true }, position:'relative' }); tween3 = gsap.to(".fixed-wrap", { scrollTrigger: { trigger: ".last-text", start: "top top", scrub: true, invalidateOnRefresh: true, markers: true }, position:'relative' }); } Alternatively, do you know how to use function based start/end values? The docs just say this as an example , but I don't really know what this means end: () => `+=${elem.offsetHeight}` // will be updated Thank you!

I assume maybe you mean something like this?: let tween1, tween2; function invalidateAndRemakeAnimations() { // Kill existing animations tween1 && tween1.revert(); tween2 && tween2.revert(); // Remake the first animation tween1 = gsap.to(".row._1", { scrollTrigger: { trigger: ".row._1", start: "top top", scrub: true, pin: true, pinSpacing: false, invalidateOnRefresh: true, markers: true } }); // Remake the second animation tween2 = gsap.to("h2.text", { scrollTrigger: { trigger: ".row._3", start: "top top", scrub: true, invalidateOnRefresh: true }, position: "relative" }); }

Hi all! I wanted to make a book flip animation that flips like a book and zooms towards the book content. I used a template based off Jhey's flipbook animation https://codepen.io/jh3y/pen/VweZryJ where it use scrollTrigger to control the flipping and zoom animation. I managed to do some tweaking but im stuck where one the first page i want to make it that it will zoom further towards page content due to not able to pause the flip animation and do the zoom in and out animation (of the page content) without make it buggy. I'm guessing the page is declared dynamically and has conflicts with other animation. I'm fairly new to the GSAP works and was wondering how to pause the flip animation and do another animation. Thank you and have a great day!

Welcome to the forum. If I understand you correctly, I think you'd want to tween the drawSVG path from 0% 10% → 90% 100%. That way you're always showing 10%. You could also add a tween at the beginning or end to make it appear/disappear too. Happy tweening and welcome aboard. https://codepen.io/PointC/pen/vYMQXWe

Thank you for the quick reply @Rodrigo, dragResistance is already tested but it doesn't prevent that weird behavior where the carousel will randomly on drag loop through all the items like 10 times in a sec... That's why I asked if I should search for an option where the carousel would rotate only a couple of items at each drag. I would try inertia resistance since I haven't tested it yet and come back with my results.