Leaderboard

This is officially my favourite forum post so far. Thanks for starting my morning off with a chuckle @khairunnisaas

Hi Shutt, Do you mean something like this? A Pen by GreenSock (codepen.io)

you can achieve this by tweening the timeScale() of a tween. Rollover the red svg https://codepen.io/snorkltv/pen/abLbyGj?editors=1010 Here is a video with an older gsap syntax that explains the concept Check out the courses in my signature. You can enroll for free tonight. Once you enroll, my GSAP 3 Beyond the Basics course walks you through tweening the progress() and timeScale() of a tween in the first chapter and loads of other important stuff.

Hi Akhil, You would need to change the zIndex before the animation starts, kind of like this... GSAP Hover Timeline Animation (codepen.io)

Here you go pal! https://codepen.io/GreenSock/pen/KKvOQeL?editors=1101

You can find lots of demos resembling some of the effects on that site in the demo-section, on codepen and throughout the forums. This one from the demo-section might be helpful for the effect that is skewing the text on scroll based on velocity https://codepen.io/GreenSock/pen/eYpGLYL And these threads could help with some of the other effects

Hi Sannan, Let's take this one step at a time. You should start by making the changes Cassie suggested, like getting rid of the transform strings. // bad gsap.to(".foo", { css: { transform: "translate(-70%, -150%)", } }); // good gsap.to(".foo", { xPercent: -70, yPercent: -150 }); And you don't need to include the css wrapper for any of your animations. // bad gsap.to("#h31", { css: { display: "none" } }); // good gsap.to("#h31", { display: "none" }); Next step would be to get rid of all those animations in the onComplete and refactor your code to use timelines instead. Here's a good resource to learn about timelines and how to position your animations. And for a more in-depth guide to GSAP, @Carl has some excellent courses. https://www.creativecodingclub.com/courses/FreeGSAP3Express?ref=44f484

Just wanted to show off how easy it is to make accordions with the Flip Plugin. Accordion FLIP (codepen.io)

Hey Folks, Some may say I'm crazy but I've decided to unlock nearly 3 years of work for a limited time to help you on your way towards mastering GSAP. That's right, my entire Creative Coding Club course bundle now has FREE open enrollment for a 30-day trial. No credit cards or funny-business. Just full access to over 130 lessons that were largely inspired from the questions I've seen people ask in these forums. My 9,000+ posts here and 6-ish years working at GreenSock gave me the experience to create training that will hopefully keep you out of these forums and get you quickly on your way to making wonderful animations on your own. If you have struggled with the basics, have trouble applying what you see in the docs, or need to take your skills to the next level I guarantee there is something of value for you in this bundle. Jump on in today, risk free, assess the value for yourself. Open enrollment won't last for long. And of course those that act quick can get some ridiculous Early Bird Black Friday savings before Nov 22. Enroll Today For Free! Hope you enjoy the lessons! Carl Below is a demo that highlights some of my favorite learning tips https://codepen.io/snorkltv/pen/WNxeWWZ Animations like this will be a breeze to create after you've spent some time with my training

Thanks!!! 🙌 So I had problems with your demo because the SVG had a bunch of transforms on it, so the SVG coordinates don't match up nicely with the label, so I just made my own version. It was a little harder than I initially thought due to way the angles can flip depending on how you drag stuff around. Draggable SVG points (codepen.io) Also, if you want to use the util selector to get an element, you need to do it like this as it returns an array. const triangle = q("#triangle")[0];

Welcome to the forums @khairunnisaas Draggable doesn't have any hamsters 🐹 Best bet is to look at what scripts are being loaded in that pen... Looks like HamsterJS is a library to help with mouse wheel events... https://github.com/monospaced/hamster.js

Hey @emjay Effects like this are largely visual trickery! https://codepen.io/GreenSock/pen/gOxZzXy The dots are equally spaced so if you move each dots up to the position occupied by the next row you can just loop it and it'll look like it's endless. Hope this helps!

Hi @Afplaktape Welcome to the forum. The secret here is to draw a mask or masks over your artwork with a stroke just wide enough to cover it. Here's an example with two masks starting at the center of the logo. https://codepen.io/PointC/pen/LYjBpqv Another option is a single mask and start drawSVG from the center. https://codepen.io/PointC/pen/eYEjJJP I have some tutorials to explain these techniques in more detail. The first one is about handwriting but applies to any underlying path you wish to reveal with a variable width stroke. https://www.motiontricks.com/svg-calligraphy-handwriting-animation/ https://www.motiontricks.com/adobe-illustrator-path-direction-quick-tip/ https://www.motiontricks.com/svg-masks-and-clippaths/ All of the above methods require the DrawSVG plugin which is a club perk. https://greensock.com/club/ Hopefully that helps. Happy tweening and welcome aboard.

Welcome to the forums @azadsarxanli A simple answer to your simple question: No, they are not the same. ScrollMagic is not a GreenSock product, whereas ScrollTrigger is. And that is the absolute best thing about ScrollTrigger because besides it allowing you to do everything you could do with ScrollMagic (and a whole lot more beyond that), it is actively maintained, developed further over time (just check on the latest additions for it that came with GSAP 3.8.0) and you get support for it in these forums, which btw already contain quite a few helper-functions working around some edge-cases - so it's good to stick around I'm pretty sure you will have lots of fun with ScrollTrigger.

Fab! And if you wanted to show the text line by line you could do something like this - https://codepen.io/GreenSock/pen/NWvzjLW Hope this helps!  ✨

Hi @PixelDynamics Welcome to the forum. I think I'd just add a pseudo-element to that div for the underline effect. Something like this. https://codepen.io/PointC/pen/aa65e5941028e17a675bfb20504f3867 Hopefully that helps. Happy tweening and welcome aboard.

Hi @maddylobb Welcome to the forum and thanks for being a Club member. We really appreciate the support. Looks like you're running into some .from() tweens and an immediateRender issue. My advice would be to set each path to drawSVG:0 and then then use .to() tweens. Here's that change. https://codepen.io/PointC/pen/e600a675c2e25009c37c3b7880e1d236 An even easier approach with much less code would be to use a stagger. Here's that change. https://codepen.io/PointC/pen/fca02b2075d4760899cfec8efb693738 Hopefully that helps. Happy tweening and welcome aboard.

The solution from @OSUblake should be all you need. 👍 Here's a slightly different approach I had laying around in case it helps. Instead of looping through all the animations to see which one to reverse I keep track of the currently open (or active) item with an active variable. Every time you open something you check to see if there is an "active" element. If yes, close it by reversing its animation and then update the active variable to reference the thing you just clicked on. In this example there is a dedicated close button for each element (which you may not need). https://codepen.io/snorkltv/pen/YzGpXWO

Hello there @Wizard of Oz As the ScrollTrigger docs state, scrollTrigger can be used as either a shorthand for the trigger (described below) or as a configuration object with any of the following properties. In your case, since you want to configure things in more detail, it would have to be an object. gsap.from(childSplit.lines, { scrollTrigger: { trigger: title, start: 'center center', scroller: ".smooth-scroll", markers: true }, duration: 3, yPercent: 100, ease: "power4", skewY: 10, stagger: 0.1 }); Also, for it to work properly with locomotive-scroll, you forgot to add the last lines as seen in the demo on the .scrollerProxy() docs-page // ... add this after the creation of your ScrollTriggers // each time the window updates, we should refresh ScrollTrigger and then update LocomotiveScroll. ScrollTrigger.addEventListener("refresh", () => locoScroll.update()); // after everything is set up, refresh() ScrollTrigger and update LocomotiveScroll because padding may have been added for pinning, etc. ScrollTrigger.refresh(); This already works better: https://codepen.io/akapowl/pen/f3728f7b164abd4eeb5b1405e9271ca1

Hi @tjefe Welcome to the forum. Masks and/or clipPaths would be the way to go here. The handwriting can easily be handled with the DrawSVG plugin. If your stroke width is the same width throughout the letters, you can animate the stroke itself. I have a couple tutorials about that. https://www.motiontricks.com/animated-handwriting-effect-part-1/ https://www.motiontricks.com/animated-handwriting-effect-part-2/ If the stroke width of the letters is variable, you'll want to mask them and use DrawSVG to animate the mask. Tutorials about that here: https://www.motiontricks.com/svg-masks-and-clippaths/ https://www.motiontricks.com/svg-calligraphy-handwriting-animation/ The trick is having a duplicate set of the letter paths in your mask (or clip-path) and animating the opacity of those paths once the lettering is done drawing itself. Then scale both groups of paths up at the same time to reveal the underlying image. Something like this: https://codepen.io/PointC/pen/zYdPXXa Hopefully that gets you started. Happy tweening and welcome aboard. PS The DrawSVG plugin is a Club perk. More info: https://greensock.com/club/

I don't think that grouping trick is gonna work in Firefox. I'd probably use the plain circle as a proxy like this. YMMV. https://codepen.io/PointC/pen/aa3b8fdadd3578ddd7844143265a4b92

Welcome to the forums @Oleksandr07 Try adding a height/min-height to your .list, because if you don't, your .list will have a height of 0 and ScrollTrigger's pin-spacing will add up the scroll-duration to that, so you will 'end up short', the way you have things set up. Here is your example with a min-height of 50vh on the .list. Hope that helps. https://codepen.io/akapowl/pen/d53128e743726ed435fce5d937fb4900 Edit: ...just to give some idea for how to possibly handle things: If you e.g. set the min-height to calc(300px + 10vh) matching a) the height of the images you use + b) 10vh with resemblance to the 10% distance to the top where your pinning begins, the scrolling will continue nicely when the whitespace above and below the image would be the same. https://codepen.io/akapowl/pen/c3ff56019123a6ad3dfd234801e0be3b

I guess you could create your own version of batch. Image reveal animation using GSAP ScrollTrigger (codepen.io)

No need since you've got once: true (that'll kill them automatically once they fire the first time). I'd recommend setting the initial state with a .set() and then using a .to() in the onEnter in order to avoid the flash that could happen if you scroll quickly and the .from() hasn't rendered its initial state yet. And you could simplify the ScrollTrigger that senses the end of the scroll too: https://codepen.io/GreenSock/pen/KKXPqXp?editors=0010

Hi @Afaq Rashid Welcome to the forum. I'd think a mask or clip-path would work. You could possibly make it work by cleverly stacking up some circles and scaling/transforming them at the right time. Those are just the first few things that popped into my head. We're happy to help with any GSAP related problems or questions as you work though your project. Best of luck. Happy tweening.

Hi @stefdijkstra Welcome to the forum and thanks for joining Club GreenSock. Looks like you found my dashed paths tutorial. Thanks for reading motiontricks.com. It seems @Cassie has you all fixed here, but I'll add a little extra. If you can get everything positioned correctly when you create the graphics you avoid all these weird little positioning problems. By using a background rectangle the same size as your project you can avoid a bunch of funky transforms when you export. I have a short tutorial about that here: https://www.motiontricks.com/use-background-rectangle-with-svg-exports/ Happy tweening and welcome aboard.

Hello there @cephalee2tension - welcome to the forums. Scrollbased animations like what you have in mind are heavily dependent on correct setup, so first and foremost you should make sure to set things up, so it will be possible for ScrollTrigger to work its magic in the first place. Without any JS, your pen looks like this... https://codepen.io/akapowl/pen/ec3af6893d85672380abd0b08c525e4b ...which is bound to 'break' things or not let them work like you might think, as there is no real space to scroll through in the first place (so there is nothing ScrollTrigger can react to correctly). For something basic like you have there with the pinning, things work just fine like that because of ST's 'magic' of applying the pin-spacing, but if you want to go beyond that, you will have to set things up differenty, I'm afraid. A setup like this should be a better basis. https://codepen.io/akapowl/pen/7090389ab1670dfa2880c57e1bd7c7d7 For the fading in and out of images before and after the pinning (which btw you wouldn't need to set a tl up for - if all you need it to do is pin things, you can use ScrollTrigger.create() ) you could create seperate ScrollTriggers. The one before the pinning would be pretty straight forward - the one after the pinning can be a bit tricky though because of the pinning, so I would probably pin the images inside the wrapper instead of the wrapper itself (with pin-spacing set to false except for the one on the last wrapper), so you can still use the wrapper as a trigger later on (as it will continue scrolling whereas it wouldn't if you were to pin it). Now you could set the start of the fading-out ScrollTrigger according to the scroll-duration of the pinning ScrollTrigger and you will end up on something like this, which works quite fine with both, scrub and time-based tweens (start and end will probably have to be adjusted a bit for time-based tweens though, depending on how exactly things are supposed to happen). I hope it will help a bit. https://codepen.io/akapowl/pen/15fd312b87db7b9e35d231c291211949

Welcome to the forums @yousoumar It should be scrollTrigger instead of ScrollTrigger.

@akapowl I can't thank you enough, you are an absolute hero! Apologies for all of the questions, I'm taking time to learn this functionality, though had a piece of work that was urgent. Thanks again for all of your help, its very much appreciated

hmmm... yeah I see that. You have competing from() tweens but I think I'd use a fromTo() tween with negative percentages if you want it to go backwards. This seems to work without a glitch for me. https://codepen.io/PointC/pen/63344e9fd885b610e253436e23d718fb Happy tweening.

Hey @GreenSock! Of course! I think my question was not formulated the way i wanted... It was less of a hide-it-i-don't-want-it-stolen, and more of a "how do other sites do it it's all tidy and clean!" I sure understand the whole honor system and find it awesome! (helped me a lot) For a while now, i've been trying to figure out my whole "process" when it comes to wordpress sites, meaning minifying, cleaning, optimizing, automatizing several recurrent tasks, as i build many many wordpress sites. But in the everyday work, i never take enough time to "structure" my workflow. @Cassie thanks for that! It's basically a minifier right? @JIZA i'll take a look, see? i didn't even know stuff like that existed lol! Anyways guys, i can definitely say ever since i've started using GSAP, my work exponentially improved. It basically changed my life (workwise :P) And if anyone wants to share their workflow with wordpress + gsap + etc, let me know we could chat maybe elsewhere since this isn't a wordpress forum! Thanks for the awesome stuff!!

You can set the center of origin first to avoid the jump ✨ https://codepen.io/GreenSock/pen/ZEJNjEy?editors=0011

It's snapping correctly - you just set up your animations in the timeline in a way that doesn't line up with those snapping points. You basically told snapping to space the points evenly across the timeline but your animations are spread differently. Like the last one doesn't fade out. And there's a fade-in at the start. I think it'd be cleaner to just drop a label into the key spots where you want it to snap, and then use something like snap: "labelsDirectional": https://codepen.io/GreenSock/pen/oNeRLyK?editors=0010 Does that clear things up?

Hello @fripi I think the 2 splits is just a nifty little trick allowing each line to appear out of nowhere without having to wrap each of the lines in a wrapper with overflow: hidden 'manually'. For the width-related question, try this: .lineParent { overflow: hidden; max-width: max-content; } https://developer.mozilla.org/en-US/docs/Web/CSS/max-content In this example I changed the property to tween to xPercent instead of x and set it to 101 (as I was still seeing some rudimental pixels after the tween was compelete). https://codepen.io/akapowl/pen/06af805309bdc7864755ea987a921d4d

Hello @Aitor It's always best to include a minimal demo for people here to tinker with (as the forum guidelines state) that makes it way easier to provide you with a suitable solution. Technically you can tween any value with GSAP, so you could e.g. set up an object with a value and onUpdate of a tween on that value, update what you need to with that value. I have no experience with cannon.js whatsoever, so I'm not sure if there is an easier way (but judging from the little experience I have with three.js and this scenario being sort of similar to how to tween certain properties in three.js, I don't really think so), but here is what I came up with. Hope it helps let sphereRotation = { val: 0 }; gsap.to( sphereRotation, { duration: 5, val: 2, repeat: -1, yoyo: true, ease: "power1.inOut", onUpdate: updateRotation }) function updateRotation() { sphereBody.quaternion.setFromAxisAngle( new CANNON.Vec3(0, 1, 0), Math.PI * sphereRotation.val ) } https://codepen.io/akapowl/pen/5e21f51cc80e45865d72ec08d556afd2

Hello @JoffreyPersia This is more a logic thing, than related to GSAP. Instead of targetting all wrappers when creating your timeline, like you do now, you will have to create a timeline for each of those wrappers, simplest in a loop and when looping over them, target each specific wrapper and its respective paragraph only (also when it comes to the events-handling) - since you are using jQuery, that could maybe look something like this then https://codepen.io/akapowl/pen/4c9d85a24497b277537c05d4ec246b9d

Hey there @rala Key to this visual trickery is to first get the SVG prepared correctly, meaning creating a pattern that seamlessly repeats horizontally and stays withing the bounds of one plain axis (don't know how else to say that, hope it still makes sense) - yours is off on the vertical axis, it sort of moves up diagonally, that's why when you animate it on the x-axis horizontally, it will get cut off by the clip-path. Here's a visualization of what I mean by the above To make it animate smoothly you will need to set an ease of none on your tween (which I would preferably choose an xPercent for actually). Hope this helps a bit. Happy tweening https://codepen.io/akapowl/pen/269fb9e218ef1f1f35b36d3b2c0506d0

To do this, I wouldn't actually drag the handle. I would use one of my favorite Draggable techniques, using a proxy element that's not in the DOM. The basic idea is that you use a trigger to start dragging the proxy element, and then apply those changes to the actual target. This should help you get started. Adjustable Scrubber (codepen.io)

Hey Nick! Sure - you just need to pop each of those dropdowns into a container with overflow hidden on. Like so https://codepen.io/GreenSock/pen/KKvBYKX

Another option is to use a sprite and randomly set the background position. Here's a quick demo showing how to loop though and do that. I've placed the actual sprite at the top of the demo so you can see the original image. Each div then just shifts the background position. https://codepen.io/PointC/pen/rNzrzpR I was just going to drop the demo above but I kinda wanted to see the dogs falling so I updated the original demo and added a couple of things. I present the 'Dogwood Tree' losing its leaves. See what I did there? https://codepen.io/PointC/pen/BadPdXx Hopefully that helps. Happy tweening and thanks for being a Club member.

Welcome to forums @Malik Turk You can make your timeline a little longer with some empty space in it like this. let tl = gsap.timeline(); tl.fromTo(marqueeText, { x: 0 }, { x: 100 }) .set({}, {}, "+=0.5"); // dummy tween to extend the timeline another 0.5 seconds ScrollTrigger.create({ animation: tl, trigger: document.querySelector('.marquee-image') start: 'top', end: 'bottom', pin: true, scrub: true, pinType: 'transform', });

Welcome to the forums @PikabobAlex What I like to do is just make a function that will call itself on complete, kind of like this. animate() function animate() { gsap.timeline({ onComplete: animate }) .to(foo, { duration: "random(1, 3)", ... }) }

That's because @Cassie is genuinely clever. I'm just running around pretending to know what I'm doing.

Hey @tjefe, You just need to get the correct origin for your transform. Maybe something like this? https://codepen.io/GreenSock/pen/LYjmJqy?editors=0010

Ah sorry - typo! panel(s) - Here you go. https://codepen.io/cassie-codes/pen/143a7b54f938be3b1bae27700a6dcb1d

Hi PixelBakery, That would be incredibly difficult to do without a complex collision detection algorithm as the bounding boxes would overlap. If the images didn't overlap, you could do a brute force method where you just check if the space is occupied. Here's an old demo where I do that with boxes. https://codepen.io/osublake/pen/WjWPob And circle packing... https://codepen.io/osublake/pen/bWJZVB

Well... I think Club membership is always warranted with so many time saving plugins. That being said, MotionPath is a free plugin - no membership required. The MotionPath helper is a club plugin. https://greensock.com/club/ In answer to your question - yes MotionPath could assist you in placing those targets. There are other ways to make it work too, but MP could make your work a lot easier. Happy tweening.

Hello @alirezahekmati It does work on mobile for me, but depending on the size of your screen the car might already have reached his endX and that's why you don't see it move. I adjusted the pen a bit, so now it runs from the left side off screen to the right side off screen, so now you should see it working, no matter how big the screen is. let startX = gsap.getProperty('svg', 'width') * -1 let endX = width ... ... .fromTo("svg", {x:startX}, {duration:duration, x:endX, ease:ease}) ... https://codepen.io/akapowl/pen/bf350d6a1ddce94d54392d1f09a9c69b

Hi @alirezahekmati, You can pass stagger an object with more information. In this case you would want to specify that the animation should start at the end of the array. https://codepen.io/GreenSock/pen/xxLPBrE?editors=1010 Happy tweening, hope this helps!

Hi @animaker Welcome to the forum and thanks for being a club member. I think you're looking for: tw.restart(true); From the docs: //restarts, not including any delay that was defined myAnimation.restart(); //restarts, including any delay, and doesn't suppress events during the initial move back to time:0 myAnimation.restart(true, false); https://greensock.com/docs/v3/GSAP/Tween/restart() Happy tweening.