Tony Geek

How enlightening, thanks a lot for the responses. Definitely got a few new solutions I can try.

Thanks for the reply! I have managed to figure this out, but I'm going to check out those tips regardless.

Okay nevermind! I do have a tendency to post and then make the big discovery to solve my issues. It was similar to some other solutions, the one that helped was this: https://codepen.io/oscar-2283/pen/jOKOMaZ Thanks all for reading.

Hi all, I've had a look around the forums to try and find out how to implement this solution. But it's not quite coming to me. The issue is pretty simple on paper: Make a snap counter that uses commas. It can use decimals, so why not commas? Well it's a bit tricker than it seems, and it doesn't look like there's anything in the docs about snapping that's relevant to my issue. Let say for example, that I have "12,345" as my number. Now with textContent, this would just snap it to 12. Or if I just used the snap on it's own, it would reach 12,345 but there would be a bunch of decimals flying around during the transition on "12" and "345". Is there any way I can just count up from 0 to 12,345 without having all the decimals around, whilst keeping all of the commas? I have found other solutions across the board, however said solutions have since become outdated with GSAP, and therefore I can't use them anymore. Thanks in advance!

Just solved my issue - was running an old version of scrolltrigger, that might add up 🤣

That is exactly what I was trying to do! Seems like it hasn't quite transferred into my work, but that just means something else is conflicting with it. I'll have to crack down and figure out what that is. Thanks a lot!

So I'm really not quite sure how to Title this, it's a bit of a confusing thing to explain but to demonstrate it is perhaps a lot easier. So I'm working on a timeline of sorts. As you scroll, I want a line to draw from the start of each container to the end. But I want it to look like one seamless line. So when you get to the end of one container, the next one starts. I've tried looking as posts such as this one, which seems to illustrate how setting a timeline per item works. However, I can't seem to get this to work in my case, as it seems the width of all of these is linked together, and not separately as they should be. Any help would be greatly appreciated.

Yeah, that looks like the solution to me. Thanks a lot for the help!

Hi, I'm new to the GSAP Draggable Plugin. I'm attempting to create a simple horizontal draggable element to act like a games library. However, I can't seem to get the draggable container to correctly use the boundaries of the container. I've gotten this as close as I can to functioning in terms of keeping the dragged position, as that seems to have been glitching majorly for me. I've spun that up onto a codepen so you can see what I mean. I just want to know how I can have a horizontal draggable container that: Respects the boundaries set by it's container. Maintains it's position after the drag is let go. https://codepen.io/tonycre8-the-bold/pen/gOqGpar Help much appreciated in advance!

Lovely! Just what I was looking for! Thanks a lot for this!

Hi, I've had a look around the forums to help me with this particular issue, but I haven't seemed to be able to get anywhere with this. I'm trying to hook myself into the callbacks of ScrolTrigger to set the Y property of an animation, I want it to do the following: - OnEnter, fade up and in from the bottom - OnLeave, fade up and out to the top - OnEnterBack, fade down and in from the top - OnLeaveBack, fade down and out from the bottom I was going to do this by manipulating a variable in each condition, but that doesn't seem to be working very well at all, as it doesn't do anything. I have tried using a condition check on the y variable like y: self => self.direction > 0 ? -150 : 150, but this doesn't fit my use case. I was wondering how I could achieve the desired effects by utilising the callbacks, or something else that I must be missing. Thanks in advance!

Looks like it. I've got a similar setup on a website I'm working on at the moment. And for some reason, this sort of solution doesn't work. The entire animation seems to break. I guess I'll have to look into it a bit more. It hasn't solved my problem but it's solved a problem for someone else potentially, so I'll mark it as the answer.

Hi all, I'm trying to create a horizontal scroll trigger where the element above stays stuck to the top whilst scrolling, but I'm not seeming to get anywhere with producing this. When I try and attach the scrolltrigger to the container, something about it breaks and the horizontal scroll no-longer applies to my list of elements. I've produced a codepen showing what the horizontal animation is, as well as some text above I would like to be pinned to the view. I've also done a little diagram, if that helps anyone at all ? Any questions please ask, I have had a poke around the forums to try and find any question like this, but haven't seemed to find any so if you do know of any solutions, feel free to point me in the right direction!

Hey guys. Essentially, I've got an animation to fade in and slide up, whilst staggering elements, and then to fade out and slide down when exiting. A relatively simple animation. For some reason though, this seems to be bugging out. I built a simple function to use as a base for my animations, which you can see here: function fadeInDownOutUp(elements, trigger, start, end) { let animation = gsap.timeline({ yoyo: true, autoAlpha: 1, scrollTrigger: { trigger: trigger, start: start, end: end, scrub: 1, markers: true, }, }, 0); // fade in the elements from bottom, then fade out again to top animation.from(elements, { duration: .8, opacity: 0, y: 150, stagger: 0.1, immediateRender: false, ease: "power2.inOut", onEnter: function (elements, trigger) { console.log('enter', elements, trigger) } }); animation.to(elements, { duration: 1, opacity: 1, y: 0, stagger: 0.1, immediateRender: false, ease: "power2.inOut", }); animation.to(elements, { duration: .8, opacity: 0, y: -150, stagger: 0.1, immediateRender: false, ease: "power2.inOut" }); } Now you might notice that I've got an onEnter console log in that animation, when I open the site it looks like all of my animations are triggered all at once, which might be the cause of the problem (but I'm not too sure). Just for reference, here is how that animation function is being used, like in the codepen: function animateServices() { let services = gsap.utils.toArray("#services .wpb_text_column"); if(checkMobile()) { fadeInDownOutUp(services ,"#services", "top 700", "bottom 300"); } else { fadeInDownOutUp(services, "#services", "top 400", "bottom 300"); } } We very clearly set the elements, set a trigger point, and set the start and end positions. I believe the positions are working fine, but something about the script is just triggering all the elements to get to opacity 1, before then switching quickly back to 0 and resetting the Y position. It's causing this flicker and I'm not really sure how to set this issue right. Any help would be greatly appreciated as to why this is an issue. EDIT: I thought the codepen was replicating my issue pretty well, but it looks like when I embed it here the issue goes away - so I've got a quick video on what the issue looks like on the site I'm working on: https://clipchamp.com/watch/PMjhYQf9aQA

Alright I managed to figure it out. Don't know why I didn't clock it sooner. Change: xPercent: -100 * (teamMembers.length - 1), To: xPercent: -100 * (teamMembers.length - 4), Thanks a lot for your help Cassie!

Hi Cassie, Thanks a lot for the update. Not sure why I thought it wasn't possible by just copying the code ? Mind you, at the minute it ends on the last one. Is there any way for it to end on the last 4? I'm assuming that would be something to do with the end point, but not sure how I would adjust it. Or it could be the xPercentage, but again I'm not sure how I would do the maths on that as every time I've tried it hasn't quite filled in. Thanks

Hi there, It's been a while since I've touched GSAP and it's ScrollTrigger, and have gotten a bit stuck trying to do a ScrollTrigger. I've attached a CodePen that illustrates what's going wrong. Of course, I'm not expecting the transition to play out like that. What I'm trying to achieve is something more like this https://codepen.io/PaulettePaillette/pen/KKBLqdN - Where you horizontally scroll through each element, all inline. Instead, mine seems to zip off the screen with increasing speed. I recognize it's likely something to do with my maths somewhere, but I'm struggling to figure out where the issue is. Any help would be much appreciated. Thanks

Hi, Thanks a lot for this! Seems to be implementing the ScrollTrigger now which is good.

Hi, I've tried following the guide found here in order to integrate GSAP into my WordPress website. So far, it's gone well. Except for the fact that I cannot trigger any easing, nor can I enable the ScrollTrigger plugin. Here's a sample of my functions.php code: function enqueue_global_functions() { wp_enqueue_script( 'global-functions', get_stylesheet_directory() . 'js/global-functions.js', array( 'jquery' ), '1.0.0', true ); } // Include GSAP javascript function enqueue_gsap() { wp_enqueue_script( 'gsap-js', 'https://cdnjs.cloudflare.com/ajax/libs/gsap/3.11.5/gsap.min.js', array( ), false, true ); wp_enqueue_script( 'gsap-st', 'https://cdnjs.cloudflare.com/ajax/libs/gsap/3.11.5/ScrollTrigger.min.js', array( 'gsap-js' ), false, true ); } add_action( 'wp_enqueue_scripts', "enqueue_gsap", 99); add_action( 'wp_enqueue_scripts', "enqueue_global_functions", 100); and then as well, my JavaScript: window.addEventListener("DOMContentLoaded", (event) => { console.log("DOM fully loaded and parsed") /* ========== Global Functions JS ========== */ window.addEventListener("load", function(e){ gsap.registerPlugin(ScrollTrigger); // Check if we're on the home page if (window.location.pathname === '/') { homeAnimation(); } }); /* ========== Global Functions JS END ========== */ }); function homeAnimation() { console.log(gsap) let tl = gsap.timeline({ defaults: { immediateRender: false }, scrollTrigger: { trigger: "#team-members", start: "top top", end: "bottom bottom", pin: true, scrub: 1, markers: true, }, lazy: false }) tl.from("#team-members", {trigger: "#team-members", y: 100, ease: "power1.inOut", duration: 1}) tl.to("#team-members", {trigger: "#team-members", y: 0, ease: "power1.inOut", duration: 1}) } However when I load the page in question, the only thing I get is the animation jumping from one space to another. I've tried multiple different ways around setting up the ScrollTrigger, but nothing seems to work. I know GSAP is working because the object is being moved. However none of the transition styles are applying, and neither is the ScrollTrigger. At one point it wasn't throwing errors, but now it's telling me that I haven't registered ScrollTriggers when I clearly have. The error message I get is: Invalid property trigger set to #team-members Missing plugin? gsap.registerPlugin() . Is there something that I'm doing wrong? I can't clearly find an answer as to how I'm doing things wrong. I'm even changing the order that scripts are being enqueued so as to load gsap and scrolltrigger before loading my custom scripts. And I can tell this from the order that they're loading in the footer, as is shown in the image attached.