Jump to content
GreenSock

Search In
  • More options...
Find results that contain...
Find results in...

Leaderboard

Popular Content

Showing content with the highest reputation since 11/02/2021 in all areas

  1. This is officially my favourite forum post so far. Thanks for starting my morning off with a chuckle @khairunnisaas
    6 points
  2. Hi Shutt, Do you mean something like this? A Pen by GreenSock (codepen.io)
    6 points
  3. 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.
    5 points
  4. Hi Akhil, You would need to change the zIndex before the animation starts, kind of like this... GSAP Hover Timeline Animation (codepen.io)
    5 points
  5. Here you go pal! https://codepen.io/GreenSock/pen/KKvOQeL?editors=1101
    5 points
  6. 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
    5 points
  7. 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
    5 points
  8. Just wanted to show off how easy it is to make accordions with the Flip Plugin. Accordion FLIP (codepen.io)
    5 points
  9. 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
    5 points
  10. 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];
    5 points
  11. 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
    5 points
  12. 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!
    5 points
  13. 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.
    5 points
  14. 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.
    5 points
  15. 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!  ✨
    5 points
  16. 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.
    5 points
  17. 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.
    5 points
  18. 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
    5 points
  19. 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
    5 points
  20. 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/
    5 points
  21. 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
    5 points
  22. 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
    4 points
  23. I guess you could create your own version of batch. Image reveal animation using GSAP ScrollTrigger (codepen.io)
    4 points
  24. 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
    4 points
  25. 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.
    4 points
  26. 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.
    4 points
  27. 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
    4 points
  28. Welcome to the forums @yousoumar It should be scrollTrigger instead of ScrollTrigger.
    4 points
  29. @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
    4 points
  30. 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.
    4 points
  31. 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!!
    4 points
  32. You can set the center of origin first to avoid the jump ✨ https://codepen.io/GreenSock/pen/ZEJNjEy?editors=0011
    4 points
  33. 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?
    4 points
  34. 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
    4 points
  35. 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
    4 points
  36. 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
    4 points
  37. 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
    4 points
  38. 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)
    4 points
  39. 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
    4 points
  40. 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.
    4 points
  41. 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', });
    4 points
  42. 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)", ... }) }
    4 points
  43. That's because @Cassie is genuinely clever. I'm just running around pretending to know what I'm doing.
    4 points
  44. 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
    4 points
  45. Ah sorry - typo! panel(s) - Here you go. https://codepen.io/cassie-codes/pen/143a7b54f938be3b1bae27700a6dcb1d
    4 points
  46. 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
    4 points
  47. 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.
    4 points
  48. 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
    4 points
  49. 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!
    4 points
  50. 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.
    4 points
×