All Activity

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.

Hi Nick, The snap function only decides the final value the inertia plugin will land, nothing more. If you want to slow down the draggable side of this, you could customize the helper function's Draggable instance by playing with the dragResistance value. From the Draggable docs: dragResistance Number - A number between 0 and 1 that controls the degree to which resistance is constantly applied to the element as it is dragged, where 1 won’t allow it to be dragged at all, 0.75 applies a lot of resistance (making the object travel at quarter-speed), and 0.5 would be half-speed, etc. This can even apply to rotation. Another option could be to use the resistance config option in the Inertia Plugin: https://gsap.com/docs/v3/Plugins/InertiaPlugin/#config-object resistance Number - The amount of resistance per second (think of it like how much friction is applied). Hopefully this helps. Happy Tweening!

Hi all, I've got a Nuxt 3 project with a fromTo tween. I need to be able to control its progress using gsap.to. Easy peasy, right? Well, not quite. While this is a simple operation in vanilla JS (see codepen), in Nuxt 3 it appears to only work in one direction – it tweens the progress to 1, but not back to 0. Here's a url for the minimal Nuxt 3 stackblitz reproduction: https://stackblitz.com/edit/github-vfgcdf?file=app.vue Oddly enough I can't get this tween to run in it at all. Using gsap.set() works both ways, but that's obviously not going to work since I want to be control the ease and duration. I have also tried skipping the existing tween entirely and controlling the opacity "from scratch" using gsap.to(${target}, {opacity: 1, duration: whatever}) but that doesn't work either. Again, gsap.set() works to set both the tween's progress and the opacity itself. For context: I'm using fromTo because as well as tweening opacity over a certain duration, I want to be able to tween it on scroll so it fades as you scroll out, and fades as you scroll back in at the same speed as you scroll. I did consider ScrollTrigger, however ScrollTrigger seems like overkill for this AND I want to be able to tween opacity on more than just scroll. I have a header that fades in and out on scroll but only on certain pages, and I want to fade it back to full opacity on route change. EDIT: I have played around some more and assigned the timeline to a non-reactive variable (instead of using Vue's refs) and... it works! (See reproduction here: https://stackblitz.com/edit/github-vfgcdf-kx2x5z?file=app.vue) But why?

Hi What countdown? Where exactly on the page? This is not a short site. I just checked this on an iPad running iOS 17 on both chrome and safari and it works basically in the same way it does on my desktop (Ubuntu 22) on chrome and firefox 🤷‍♂️ More details would help, but again without a demo there is not a lot we can do TBH, we can't see the JS that leads to this, we can't see if the CSS is doing something or not, we can't see if the HTML structure is the cause or not, etc. That's why we ask for a minimal demo (emphasis on minimal) that allows us to tinker with all those elements. Normally that helps us find the problems faster and easiser. Happy Tweening!

Thank you so much both, I didn't realise that registering a plugin required a valid window instance. Moving this logic to the onMounted hook worked perfectly.

Thank you for your answers. Thanks for the idea, that's a good solution. Possibility I will try that.

Hi everyone! @GreenSock Coming back with an update on the horizontal loop helper. It looks like that the carousel gets to scrolled way to fast in some situations whilst dragging, especially in touch devices. Is there a way to minimize or declare the items that it should scroll into view? I've tried to change the snap function but doesn't seem to work... snap: value => { let time = -(value * ratio) * tl.duration(), wrappedTime = timeWrap(time), currentIndex = tl.closestIndex(), targetIndex = getClosest(times, wrappedTime, tl.duration()), maxMove = 2, newIndex = Math.max(currentIndex - maxMove, Math.min(currentIndex + maxMove, targetIndex)), newTime = times[newIndex], dif = newTime - wrappedTime; // Adjust the difference to wrap around the timeline if needed if (Math.abs(dif) > tl.duration() / 2) { dif += dif < 0 ? tl.duration() : -tl.duration(); } return (time + dif) / tl.duration() / -ratio; },

Hi folks I'm experiencing two issues when using ScrollTrigger, with pinning, and the ScrollToPlugin. 1. Clicking on the nav items is returning a console error with gsap rather than scrolling to the relevant section 2. The pinning involved will affect the scroll position of the section so when the nav items are clicked it'll scroll to the position of the section without taking into consideration the pinning. I've seen a few posts on the forum about this but none of the solutions seem to work for me. Any pointers? Thanks so much.

Hi, I'm trying to add smooth scroll to a site that already has a CSS translate on the body content. It needs this to be able to create the illusion of pausing the scroll at certain points to trigger an animation on the logo, which is also based on scroll position (so I don't think the .paused() method will work). Unfortunately, I can't share a public link of the project. Is there a way to just get the calculated scrollY (or scrollTop) value with easing, but not have ScrollSmoother apply any transformations to the content? Thanks!

Right, so I have gone as far now as to remove ALL my styles, including media queries, stripped out any extra content, including headers and footers, removed any JS and any other GSAP code. Right now I have a Wordpress page with nothing on it but a very basic pinned section. BUT you an still see that when orientating from landscape to portrait, that it breaks. The Pin Spacer does not adjust it's width and height, it still has the dimensions of the landscape version and the pin start and end does not update. I even removed all the parent styles but no dice. At this point I am wondering if this is a bug? When you look at the codepen on fullscreen in dev tools, it breaks too, so I do have a broken demo of sorts. Now I know that dev tools behaviour is not always accurate (at least in my experience) BUT it does behave the same on an actual mobile device. Sometimes it takes a few orientations, sometimes it does it straight away and looks an absolute mess. Here is a screenshot from both the staging site and the codpen

Hello, wondering if anyone could help me or point me in the right direction as I am trying to create a animated svg path, I found a similar demo and started to edit it. I have so far got the base white path to draw on load, I also have the red path draw on scroll via scrolltrigger. However I am not sure where to go from here, what I want to achieve is that the red path kind of maintains a length of 10%, so it visually has a segment of the svg that moves along the path to the end as i scroll. Is there a way to get the start to maintain a distance of 10% from the part that's currently drawing? Sort of like the image. I hope I managed to get the idea across. Here is the codepen for what I have so far. https://codepen.io/Justin-Audain/pen/zYXMvRb

Hello, I'm new to GSAP and I'm trying some handy animation. Here is what I'm trying to achieve https://genevoism.com/. I know they have used different approach but I belief such animation are possible in GSAP too. I using combination of ScrollTrigger, ScrollTo, Observer and using timeline pause and play method to achieve one scroll animation effect. By one scroll I mean that each of animation would be trigger per scroll. Approach I took : > Firstly I have made different timeline for different animation per section. > Than I tried to get user scroll using observer's onUp and onDown methods. > Than after per scroll I play my desired timeline and as one of the tween of that timeline gets completed I pause my timeline, further when user will scroll again timeline play's and pause's again. > When all tweens in one timeline gets completed, I switch to other timeline by pausing the first one. > I have also used a forEach loop on scroollTrigger.create so that I can pin the particular section as animation are being performed. What I want: I want set of animation such that when my section comes in viewport or is already present in viewport( like hero or banner ) the animation should get started as the user scroll. Each and every animation or tween should start and end between two scroll of user. And as all the animation in a section get's completed it should slide up or down as per user's scroll 100% or 100vh. Please have a look into the below pen and guide me where I'm going wrong. Thank you... <script async src="https://cpwebassets.codepen.io/assets/embed/ei.js"></script>

Hey guys, I have a little problem with this Animation, with desktop seems works smoothly, when it comes to mobile, the animation makes a little jump before it starts, both ways, on enter and on enter back, which it would be the problem??, thanks for the answer. In this project I have scroll trigger library, gsap core(obviously) and lenis smoothscroll.

I am doing exact same thing with this post but updating position along the path with motionPath is just making position (0,0) for each frame. What is causing this? Codepen: https://codepen.io/alparslanahmed/pen/dyLQorr?editors=0011 const path2 = [{x:ball.x, y:ball.y}, {x: cp2x, y: 40}, {x: target.x-ball.x,y:target.y-ball.y}] console.log(ball.x, ball.y) gsap.to(ball, { duration: 1, motionPath:{ path: path2, type: 'cubic' }, onUpdate: () => { console.log(ball.x, ball.y) }, onComplete: () => { console.log("complete") if (ballInfo.target < this.pins.children.length) { ballInfo.target++; this.moveBall(ball, index); } else { // End of animation logic } } });

Thank you very much, @Rodrigo, for diving into my issue and helping with the solution. I really appreciate it! I've tested it on my local project and everything works. I'll try to learn more how scrolltrigger and scrub works..

I need help! it looks like there's an extra panel before it reach to scroll end

const tl = gsap.timeline({ scrollTrigger: { trigger: ".theApp", pin: true, pinSpacer: false, markers: true, start: "top top", // end: "bottom top", scrub: true, }, }); const app = gsap.utils.toArray(".app"); tl.to(app, { y: "0%", opacity: 1, scale: 1, ease: "back.inOut(4)", stagger: 1, duration: 0.5 }) .to({}, {}, "+=1") .to(".app1", { delay: 1, duration: 2, ease: "back.in(4)", yPercent: 0, xPercent: 155, scale: 0.5, opacity: 1 }) .to( ".app2", { duration: 2, ease: "back.in(4)", yPercent: 0, xPercent: 50, scale: 0.5, // opacity: 0 }, "<" ) .to( ".app3", { duration: 2, ease: "back.in(4)", yPercent: 0, xPercent: -50, scale: 0.5, // opacity: 0 }, "<" ) .to( ".app4", { duration: 2, ease: "back.in(4)", yPercent: 0, xPercent: -150, scale: 0.5, // opacity: 0 }, "<" ).to('.app img + div', {opacity: 0},"<") Hello wonderful community, Thanks for always being helpful. I have made one animation using scrollTrigger while pinning the section it is not working properly. If I enable markers and then check it works very smoothly but without markers the pin is not working properly the section gets pinned before the start point. Here I am sending the video link , I will be very much thankful for your help. Here I am also attaching GSAP code.

thank you for this

Well, I thought to setup a codepen, but in my opinion it shouldn't give the idea: I mean, it could be not useful to understand the problem, because on PC and on mobile it works great (the difference has evidence on the supports only). I haven't actually checked how it works and/or what happens on an Iphone, but for sure on Ipad the problem is present. Also it seems to be OK on a normal Mac, but I just made a fast check and I'd have to go deeper in this. Anyway, in this case a demo doesn't give any support to understand the problem. In theory I should have to try the debugging on a Mac, but I don't have it available. I was just hoping someone could help me. Regarding the code, I don't think it can depend on anything other than compatibility, because the code outside of GSAP is quite simple, and uses standard functions and operations.

Thanks @Rodrigo, I'll give this a try!

The beauty of GSAP is that you can build anything you like. In compression to other 'plugins' were it does one specific thing GSAP is more a tool box in which you can build anything you like! The only thing holding you back is your own creativity. Personally I would start with a simple thing and start building from there, make demo's (make A LOT of demo's) and post back here when you get stuck at specific parts. Keep in mind that you're sharing a site of a design agency with as far as I can see a team with over 10 people who all have their own skill and experience, so I would adjust your goals until you've got some more experience with the tools and then you'll see you can build anything you like! If you're stuck for inspiration you can check out the GSAP collection page on Codepen with so many demo's. Hope it helps and happy tweening! https://codepen.io/GreenSock/collections/

Hi there, I just can't get the demo to replicate it sorry. I have done this - but it's not perfect. Would you recommed a better way to "call kill() on that animation from inside a 'resize' event handler". / Function to invalidate and remake specific animations function invalidateAndRemakeAnimations() { // Kill the first animation ScrollTrigger.getAll().forEach(trigger => { if (trigger.vars.trigger === ".row._1") { trigger.kill(); } }); // Remake the first animation gsap.to(".row._1", { scrollTrigger: { trigger: ".row._1", start: "top top", scrub: true, pin: true, pinSpacing: false, invalidateOnRefresh: true, markers: true } }); // Kill the second animation ScrollTrigger.getAll().forEach(trigger => { if (trigger.vars.trigger === ".row._3") { trigger.kill(); } }); // Remake the second animation gsap.to("h2.text", { scrollTrigger: { trigger: ".row._3", start: "top top", scrub: true, invalidateOnRefresh: true }, position: "relative" }); } // Initial application of animations invalidateAndRemakeAnimations(); // Listen for orientation change event window.addEventListener("orientationchange", function() { // When orientation changes, invalidate and remake specific animations invalidateAndRemakeAnimations(); });

Thank you so much for clarification! <3