Leaderboard

This is a pretty complex functionality, but I'll try and point you in the right directions... For this, you'll want to create a timeline and use the position of your drag proxy to link 'scrub' the progress of the timeline. These are different ideas, but use draggable to control different timelines, which is more or less the same concept you're looking for: https://codepen.io/elegantseagulls/pen/eYRgXpd https://codepen.io/elegantseagulls/pen/GRxNJGK?editors=0010

@agsymonds I had a similar issue when using GSAP with BarbaJS. Could screenshare and debug together if you want.

Thanks for your response @Rodrigo, I was getting confused at the point where I need to copy the gsap-bonus.tgz file into my project directory (I wasn't sure in which area), but think I've managed to find the solution. Thanks for your help!

thanks a lot! @mvaneijgen was doing this for my web dev project and since the deadline is in 9 February i didn't have enough time to give this a serious start, it's still was fun trying to fix this code and make it animate properly (i made it work by making two timelines and didn't know how to stop it from starting when the page loads 🤣 and had other issues ofc) but i think your solution is much better!, your help was really appreciated ❤️ and I'll make sure to check the linked materials and more when possible, here's the finale result: https://codepen.io/faresAlharbi0/pen/dyjwvVj

Also! There's an article on this effect here - https://css-tricks.com/going-meta-gsap-the-quest-for-perfect-infinite-scrolling/

Not the cleanest code! And it could be improved a lot, but something like this seems to work! https://codepen.io/Since1979/pen/xxJmbMJ

I'm not sure that GSDevTools is something that's meant for production... but to kill it, from the docs: How do I kill/destroy/remove the dev tools instance? If you have a reference to the dev tools (it's probably easiest to give the dev tools instance an id, i.e. GSDevTools.create({id:"main"})) then you can kill the instance by using GSDevTools.getById("main").kill().

Hi @fares welcome to the forum! There where a few things wrong with your setup. First off, never use transitions in CSS, if you want to animate things with GSAP. If you do, the browser will tween every value GSAP is already animating! Next what I would do is make it so your element is perfect with just CSS, make it how you want it to look when it is done animating. Your current setup seems logical, just animate to this value other wise tween to this other value. The only thing is you were adding new tweens to a timeline on each click, the easier solution is, build the timeline you want the animation to have and just play or reverse the timeline. So what I did is update your timeline (btw duration is part of the defaults:{} object) and set it to paused, so that id doesn't play on page load. Also set reversed to true. Then in your click function. Check if the animation is reversed: true if so tl.play() otherwise tl.reverse(); I had to remove some of your CSS, because it was trowing off the animation. Hope it helps and happy tweening! https://codepen.io/mvaneijgen/pen/LYBMZLR?editors=0101 I've also add some nice to haves with visibility: hidden; and autoAlpha: 1, read more about FOUC if your are interested.

There is a lot of content out there how to setup locomotive scroll with ScrollTrigger, but this is a bit old at the moment, because GSAP has it own smooth scroll aptly named SmoothScroll which perfectly works with ScrollTrigger, so if you don't have a specific need for locomotive scroll I would suggest going with SmoothScroll, will save you a lot of time. https://codepen.io/GreenSock/pen/ExPdqKy

Great to have you as a student in Creative Coding Club! Definitely check out the lesson ScrollTriggers for Multiple Sections in ScrollTrigger Express. The video goes into great detail on how to loop through multiple elements, find child elements to animate, and control each section's animation with ScrollTrigger. I modified that lesson's demo to include a basic SplitText animation on the <h1> in each section https://codepen.io/snorkltv/pen/gOjZPEY?editors=1010 Side Note: if anyone around here is into 90's imports, a 1994 Supra just sold for $150,000 on BringATrailer.com

Loops can help with that. https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Loops_and_iteration https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/forEach This article may help, too. https://css-tricks.com/tips-for-writing-animation-code-efficiently/

@Dzhuleikhan your planet animation on Codepen works ✅ Your planet animation on your website doesn't work ❌ I'm on Safari Version 16.3 (18614.4.6.1.5), I could not see why it wasn't working, because it is really hard to debug a live website and your Codepen does work. My suggestion would be to disable certain parts on your website and keep testing until it does work, so you can see what is interfering

I'd like to use GSDevTools in a React (18) project with HRM enabled (with Vite). Using the new gsap.context(), I tried `.create()`ing it inside: // src/App.js function App() { useEffect(() => { const ctx = gsap.context(() => { const gsDevTools = GSDevTools.create(); // HERE gsap.fromTo(...); }); return () => ctx.revert(); }, []) return (<>...</>) } but once HRM reloads, I got 2 (or more) GSDevTools one over the other. I've contacted the support and quickly got a quick answer from @Cassie: What I understand from this, is I have to "manually" cleanup (without the help of `ctx.revert()`) my gsDevTools instance. Here is my try: // src/App.js function App() { // GSDevTools instance useEffect(() => { const gsDevTools = GSDevTools.create(); return () => gsDevTools.kill(); }, []) // Tweens useEffect(() => { const ctx = gsap.context(() => { gsap.fromTo(...); // other tweens... }); return () => ctx.revert(); }, []) return (<>...</>) } @Cassie am I correct? Is this the correct way of properly handle GSDevTools ? As you can see, I have instantiated it in its own `useEffect`: is it something recommended? Ultimately and to be sure, why GSDevTools is not "auto-cleaned" with `gsap.context()`? Is this something that could come in a next release? (or no, this is intentional) Thank you

Hi there Vitali, Looks like that developer was using our bonus plugins which are behind the Club GreenSock membership. (paid subscription) https://greensock.com/club/ If you're not editing the GSAP code at all - I would suggest reaching out to the old developer to get his access token added to the codebase as an ENV variable. If you're planning on editing the GSAP code you will need your own membership, happy to help you with any questions about that via DM if that's helpful at all?

That's a really nice solution and very readable! Thanks for contributing!

Yep - It's not meant for production, just for debugging, so I doubt we'll add it in to context - It's nice and simple to create and kill as it stands.

Thank you for the super quick reply. I will take a close look at it. Greetings, Marc 👍

Hi @devRawnie welcome to the forum! I'm not completely sure on what it is you want to do, but if I understand it correctly you want to either have the animation play on scroll or do the exact same but on button click. Destroying ScrollTriggers and enabling them, can get really complicated, so why not keep it simple and just scroll for the visitor on button click, this way the animation is always the same and no need to destroy ScrollTriggers and enable them again. I've used the ScrollToPlugin to scroll to the end of the ScrollTrigger.end position, based on the timeline.duration(). Should do the trick right? Hope it helps and happy tweening! https://codepen.io/mvaneijgen/pen/zYLyqMX?editors=0011

Hi @parbawng welcome to the forum! I'm not sure which animation you're talking about? Is it the video where the "curtains" the the left and right move away? If so that is how I would build it, just have a video element with two blocks on top of it and move the one on the left to the left and the on the right to the right. If you wan it to happen on scroll I would recommend removing ScrollTrigger! This seems counter intuitive, but ScrollTrigger is just animating something on scroll, so just focus on the animation at first and only when you're happy with the animation add ScrollTrigger back in. Would love to see what you could do on your own, so let us know and if you're stuck post back here with a minimal demo! Hope it helps and happy tweening!

Hey @Cassie Wow thanks a lot for this solution, I missed this parameter when I was reading the documentation That works like a charm 🙌 Cheers

What I would do in this situation is move all the values to variables, so that I can easily change them. And then its just a matter of keeping changing the values until you've got something you like. Even better yet, you could give it to a colleague/friend and let them change the values. To me your animation looks fine! Slow, simple.

Update: Conditional rendering actually broke the ScrollSmoother effects, so it's perhaps a bit too nuclear for this. What I eventually did was pass an isRendered state from _app down into the page components then wrapped the useLayoutEffect and all the GSAP code inside a conditional statement, passing isRendered into the dependancy array. I'm sure there's a cleaner way, but It seems to have fixed it.

I may have found a fix to the problem simply by setting overflow-x: clip Just leaving that here in case someone else runs into this.

Thank you! It now works properly. Thanks to everyone who answered. Thank you!

That looks like you've written out console.log("GSAP", "ScrollTrigger") with strings I don't think you've got your scripts enqueued properly though. I would expect to see the GSAP object returned. Could you copy paste this snippet in for me? console.log(gsap, "💚") This should be what you get back And this is the correct way to enqueue your scripts. // The proper way to enqueue GSAP script in WordPress // wp_enqueue_script( $handle, $src, $deps, $ver, $in_footer ); function theme_gsap_script(){ // The core GSAP library wp_enqueue_script( 'gsap-js', 'https://cdnjs.cloudflare.com/ajax/libs/gsap/3.11.3/gsap.min.js', array(), false, true ); // ScrollTrigger - with gsap.js passed as a dependency wp_enqueue_script( 'gsap-st', 'https://cdnjs.cloudflare.com/ajax/libs/gsap/3.11.3/ScrollTrigger.min.js', array('gsap-js'), false, true ); // Your animation code file - with gsap.js passed as a dependency wp_enqueue_script( 'gsap-js2', get_template_directory_uri() . 'js/app.js', array('gsap-js'), false, true ); } add_action( 'wp_enqueue_scripts', 'theme_gsap_script' ); We can try to help but we're not wordpress experts here. Maybe give this wordpress support discord a go if we can't help? https://disboard.org/server/991553521197518878

Sure, you can add start and end markers wherever you need. It'll just have to be a little more custom! https://codepen.io/GreenSock/pen/JjBeWPO?editors=0010

I spent a few hours digging into this with my foggy COVID-brain and I think I found the very rare edge case related to snapping and the fact that when you apply a ScrollTrigger to a timeline it has to wait for a tick before it actually refreshes that instance (otherwise the timeline would likely be empty...people create timelines and THEN populate them so we can't do the refresh() right away). Here's a beta file: https://assets.codepen.io/16327/ScrollTrigger.min.js (you probably need to clear your cache) Better? Also, I wanted to make sure you understood that when you did your ScrollTrigger.config({ autoRefreshEvents: "..."}) stuff, that only affects when a full ScrollTrigger.refresh() gets called automatically (for ALL ScrollTriggers). But each individual ScrollTrigger has to refresh() initially when created, otherwise they wouldn't have any start/end values It looked like you were surprised to see the onRefresh() callback triggered when you were re-creating your ScrollTrigger(s) on resize, but that's totally normal. Let me know if you need more clarity around that. Does the beta file behave the way you'd expect? It was quite a challenge to try to follow the 400+ lines of your TypeScript demo in my condition 🙃 In the future, I'd definitely recommend trying to strip things back further. Like if the problem is that resizing results in the scroll jumping to the very end, maybe try to do the most basic demo possible and if it works, start layering things on (like in this case, you'd need snapping). Then the moment it breaks, you know exactly what it was and we can avoid all that extra complexity. I know you were trying to be helpful with all those logs/traces. It was a bit of information overload, and there were so many pieces all firing at various times which I think just made it more convoluted than it needed to be. I do appreciate the intent. Hopefully the beta resolves things for you though and you don't need to mess with the demo anymore. Thanks for putting the effort into creating the demo! I know it's always a challenge. Creating a minimal demo is quite an art form, I know.

Hi, You're not including neither the GSAP core file nor the DrawSVG Plugin: https://codepen.io/GreenSock/pen/NWBORwb Always use this codepen as a starting point since it includes the latest versions of the core and plugins: https://codepen.io/GreenSock/pen/aYYOdN Happy Tweening!

The examples by @PointC are using the DrawSVG Plugin: https://codepen.io/GreenSock/pen/bNdLyR I don't know how to make it simpler than this, it's just 12 lines of code! 🤯 https://codepen.io/PointC/pen/KKPZgpL/58208432ba7ab0ca30cc4ea6d84a988f I suggest you to take a look at the docs and examples of DrawSVG and watch this video about it: Happy Tweening!

Hi @dinoiam and welcome to the GreenSock forums! I see a few issues here: The i and the dot are separate paths, hence using stagger adds a weird effect. You should try to combine them into a single path in order to animate them at the same time. You are currently using the default duration (0.5 seconds) and a longer stagger time, so there will be a pause of 0.5 seconds between each path being animated, which is kind of odd. The stagger easing you're using might not be helping too much neither, I'd start by not using any easing function and then add something to the animation instead of the stagger. Maybe this comes closer to what you're trying to do: https://codepen.io/GreenSock/pen/JjBOjoK I added some extra height to the elements before and after the signature and the markers for better debugging. Also take a look at this articles by @PointC about animating handwriting with GSAP: https://www.motiontricks.com/animated-handwriting-effect-part-1/ https://www.motiontricks.com/animated-handwriting-effect-part-2/ https://www.motiontricks.com/svg-calligraphy-handwriting-animation/ Finally take a look at the DrawSVG Plugin which should make this super easy: Let us know if you have more questions. Happy Tweening!

Hi, That website is actually using canvas with WebGL (THREEJS) to create the circle wipe and most likely either shaders or a displacement filter for the image effect. You can apply a clip path based on a SVG element that you can update using GSAP. I updated the codepen example you provided: https://codepen.io/GreenSock/pen/eYjgqXJ Also for animating the circle you can use that approach or the one from this article by @PointC: https://www.motiontricks.com/movie-countdown-animation/ Hopefully this is enough to get you started. Happy Tweening!

The live example you have and the demo you provided don't use either Draggable or the Inertia Plugin, so you can set the draggable option to false: let carousel = buildCarousel(items, { radiusX: 250, radiusY: 210, activeAngle: -90, draggable: false, onClick(element, self) { self.to(element, {duration: 1, ease: "power1.inOut"}, "short"); }, onActivate(element, self) { element.classList.add("active"); }, onDeactivate(element, self) { element.classList.remove("active"); }, // when a drag or animation starts (via the Carousel's to()/next()/previous() methods) onStart(element, self) { gsap.to(descriptions[items.indexOf(element)], {autoAlpha: 0, duration: 0.25, overwrite: "auto"}); }, onStop(element, self) { gsap.to(descriptions[items.indexOf(element)], {autoAlpha: 1, overwrite: "auto"}); } }); If you want to use the example with the red circles you can just offset the start and endpoints by minus 25%: gsap.set(items, { motionPath: { path: circlePath, align: circlePath, alignOrigin: [0.5, 0.5], start: -0.25, end: i => (i / items.length) - 0.25, }, scale: 0.9 }); The rest of the code should remain the same. Yet another option with the latter example (red dots) is to set the start point of the path to the top of the circle. Check this article by @PointC https://www.motiontricks.com/cut-your-path-start-points-in-adobe-illustrator/ Hopefully this helps. Happy Tweening!

Hi Jack and Cassie, First of all I wanted to say thanks for all your help and being interested. I just found out what was causing the problem with my animation, when I coded the website before implementing on WordPress I defined my viewport like this: <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0" /> And then on the implementation it changed to <meta name="viewport" content="width=device-width, initial-scale=1"> This difference was making my animation breaking in all browsers except Safari (desktop and mobile). Hehehe, won't happen again :_) thanks, Jonas