Leaderboard

Hi @buster808 Thanks for reading Motion Tricks. Glad to see you're having some fun with meters. In this case I think measuring the length of the path and tweening to an absolute length would be the easiest approach. I've forked your pen with a couple small changes. If we get the desired percentage by dividing your target count (600) by the hard coded max of 1140 and then multiply that by the max rotation of 180 you get the needle rotation. Multiplying that same percentage times the length of path we're drawing and you'll get the target length. Use those values in the tween and you'll get this. https://codepen.io/PointC/pen/b19e05f7c111c7d3a6ecef9762fc5c61 I'd also recommend using a function to create everything since the dials are the same. Then just feed in the desired count and you'll be good to go. Hopefully this all makes sense. Happy tweening.

Did you mean "Buy them a Tesla"? 🤔 Yeah, @PointC is a rock star around here, as are @akapowl, @Carl, @elegantseagulls lately and really all the moderators. The staff too ( @Cassie & @OSUblake ). It's a dream team. 🙌

I've reworked some of this for you @mrpsk https://codepen.io/GreenSock/pen/WNZqKOM?editors=0010 With scrollTriggered things like this it's pretty important to think about the markup and the styling. Consider which things will be pinned in place, which will scroll naturally and what needs to be animated. If you're animating between images in a slideshow type fashion - it's often best to keep them in the same container, position then absolutely and then just change their position with GSAP. In the demo I've tweaked for you, the text and numbers just scroll naturally but the images are being animated. You could also create one timeline for all the image animations and tie it to the entire progress of the scroll instead of triggering at each container.

Hello @mrpsk There is quite a lot going on in your demo, and I think you might need to re-work how you do some of those things. You have quite some ScrollTriggers there with the same trigger element and same start and end, so for one you could go ahead and merge them together in one scrolltrigger-controlled timeline whereever that is the case. As you are also having pins on some of those for the same element multiple times, I think it would definitely be better to merge those. One more thing you'll want to keep in mind, is to use immediateRender: false whenever you are going to tween on the same property of one and the same element later on with another ScrollTrigger controlled tween. Not doing so is one of the most common ScrollTrigger mistakes. I don't have the time to go through everything in your demo and re-work it for you, but this thread here shows a way how to get a very similar effect to the website you linked as reference. As your setup looks to be a bit different, you will probably have to adjust quite a lot though.

I think your best bet for this would be to use a forEach loop for each dial, then and set your values/math to figure out rotation etc using data-attributes or similar. For the mask-ring drawSVG, you'll probably want to use a .fromTo(maskRing, { drawSVG: 0 }, { drawSVG: `${(600 / 1140) * 100}%` }) and rotation: (600 / 1140) * 180 or something similar.

PS I should also mention, since this is an SVG, you can also use the very handy svgOrigin. So this would work too. .from("#leafs > *", { scale: 0, svgOrigin: "192 192", duration: 1.4, ease: "power1.inOut", stagger: 0.5 }); Happy tweening.

Hi @animationmagic DrawSVG won't work on any of these elements because they are all filled paths. DrawSVG only works on strokes. If you simply want the scale to start at the lower right of your leaf, you can change the transformOrigin like this. https://codepen.io/PointC/pen/6fedd968003847755d5385b3f99edeb0 Happy tweening and thanks for being a Club member. We really appreciate the support.

Here's a ScrollTrigger version. https://codepen.io/PointC/pen/abLjdNm

@OSUblake the 142vmax for the dot width and height is very cool. clever trick! @Edward not exactly sure what the end result is going to be but I took a chisel to some of the css and changed the trigger to be the block. in one of your more recent demos the "start" marker was way above the "scroller-start" which meant your scrolltrigger animation was most of the way complete when the page first loaded before any scrolling occurred. Your GSAP code really wasn't bad. A big part of all of this is getting CSS to do what you want. This is what I came up with just trying to center the text over the circle. https://codepen.io/snorkltv/pen/RwLJMeL This reminded me of one of my lessons in ScrollTrigger Express. https://codepen.io/snorkltv/pen/NWNrbay?editors=0010 The focus of the lesson is on preventing the page from scrolling until the first part of the animation is done, but it uses a similar circle-fill trick that was inspired by another demo of Blake's. maybe something in the demo will be helpful. 80% of the hard part of ScrollTrigger animations is setting things up with CSS and HTML and getting the animation timeline right BEFORE you worry about ScrollTrigger. My beginner GSAP course is totally free (link in signature) if you are interested. Good luck with the project.

Hello there. I'm afraid, asking others to convert something for you is not how these free support forums work (see the forum guidelines). That thread you linked should give you a good starting point to trying things yourself. There is a super awesome helper function in the docs that should also come in very helpful when it comes to creating an infinitely animating loop. I'm not sure what exactly it is, you're going for as that pen of yours does not appear to do much for me visually, but to get you started, here's an example of that helper function pen I mentioned, repeating infinitel,y and with a ScrollTrigger added that makes it change direction depending on the direction of scroll. Give it a shot to tweak it to your liking. We will be glad to help more with any GSAP specific questions. https://codepen.io/akapowl/pen/dyVKvKj

good job on your demo. check out turn.js it appears to be a free jquery plugin http://www.turnjs.com/#samples/magazine3 Unless you understand 100% what needs to be done to simulate an interactive draggable page curl like that it will probably be much better to just go with an "off-the-shelf" solution than spend 40+ hours trying to code it and debug it on multiple browsers / devices. turning a flat div/image into something that curves in 3D space isn't trivial. as you can see in the example above (using the slider or next/back arrows), adding a little gradient (as cassie suggested) in the middle does help a little.

Hi @buster808 Looks like you're stuck with the meters. Here's a fork of your demo in which I used a forEach loop to make the animations and add a ScrollTrigger to each one. I think it should get you moving in the right direction. I used a small array for the dial values, but you can also use data attributes as @elegantseagulls mentioned above. Lots of ways to make it happen. https://codepen.io/PointC/pen/gOGNEOr Happy tweening and thanks for reading Motion Tricks.

Hi @gilesht If you want to scroll through an SVG and trigger animations along the way this demo from my course ScrollTrigger Express may help https://codepen.io/snorkltv/pen/bb90e695148fec0087f76c2f703cbdb4 I like to keep things simple to make them easier for my students to digest but it was inspired by this amazing example from Shunya Koide https://codepen.io/shunyadezain/pen/rNxzvgp?editors=0010 There's so much you can do with ScrollTrigger and SVG!

The beauty of GSAP is that you can build with it what ever your hearth desires. I've build a carousel with GSAP I'm really happy with, because I can extent it with animations if needed. Here is a basic version https://codepen.io/mvaneijgen/full/GREebPK and here a more elaborate version https://codepen.io/mvaneijgen/full/YzQZBgr

Welcome to the forums @Alessandro Serra A concept like this could work: First wrap the section in a div and pin the section itself with one ScrollTrigger. Then for as many toggles as you need, create ScrollTriggers using the wrapper as the trigger with the start dependent on its top and the amount of window-heights scrolled. Like in this example everything is dependent on the number of colors in that array. I'm not sure what exactly it is you are going for, but you can give it a shot and fiddle around a bit with that example. https://codepen.io/akapowl/pen/VwMqXZX

No, you can't alter the scrub value, but you could get a similar effect by simply tweening the scroll position to make things longer. Candid admission: usually we don't do "build-to-order" things in these forums, but I got curious and love a challenge, so as a courtesy I whipped together an example and even made the page draggable: https://codepen.io/GreenSock/pen/yLzQavG?editors=0010 Notice the buttons create a tween of the scroll position and they take 2 seconds to complete. Obviously you can tweak that to whatever you want. Does that help?

Bingo! Good job figuring it out. Glad to hear it's all working now. Happy tweening and thanks for being a Club member.

Hello @Skilltech First things first (before I forget to mention it): <main id="primary" class="site-main"> <main id="primary" class="site-main"> You are opening your main twice in your HTML markup, so for the examples below I removed one of those opening tags. Elements with position: fixed (and I assume the same will be the case for background-attachment: fixed) will not work the way you'd expect with a smooth-scrolling library as such. Since the smooth-scrolling is created by applying transforms to a parent-container, these transforms will change the context for the 'fixed'. Instead of where you want to fix them, they will just appear scrolling with the flow when they are inside that parent. So that probably is nothing related to GSAP but in the 'nature' of how that smooth-scrolling works. A suggested workaround by idiotWu for when you need to have your elements inside that parent container and can not simply put them outside is to be found in this issue-thread on smooth-scrollbar's GitHub. https://github.com/idiotWu/smooth-scrollbar/discussions/362#discussioncomment-854090 Basically it adjusts the top-value of an element all the time while scrolling, so it appears to be 'fixed'. I added it in the pen below (alongside overflow: hidden on the section.parallax-background-section) to show how it could work - you could probably do something similar to that in an onUpdate function of a ScrollTrigger, too, if you wanted. https://codepen.io/akapowl/pen/OJxoxNY Edit: ...and here is another version with the 'fixed-correction' happening in the onUpdate of the ScrollTrigger, as I mentioned before. https://codepen.io/akapowl/pen/oNGPGQJ

Well, it doesn't exactly break - If you have different cases you will have to adjust the logic to fit those different cases. You could also use a ternary operator for the start - check if the section's scrollHeight is bigger or smaller than e.g. the window's height and set the start depending on that. start: section.scrollHeight <= window.innerHeight ? 'top top' : 'bottom bottom' https://codepen.io/akapowl/pen/OJxwZME

Heya! Sure thing. So firstly you'll want to use display:inline to keep your text... well... 'inline' ✨ Secondly you'll want to loop around your chunks and add a staggered tween to the timeline for each one. Here you go... https://codepen.io/GreenSock/pen/VwMBQpg?editors=1111

It's ok @PointC, I got this one: @keyframes BMW { 0% {background-color:white;} 100% {background-color:black;} Thanks again for your all your help!

here you go https://codepen.io/PointC/pen/XWeBjrb I'll look for my Tesla later this week.

Hi raund, I didn't do a deep dive into your code, but I noticed that you are passing the same leader to every line. The way I set that demo up made more sense in GSAP prior to version 3 as the leader object is the old _gsTransform object except for the first one, which is the just a simple object with x and y properties. Notice in the loop how the leader changes. The createLine function is returning the _gsTransform object for that line, so the next createLine call will pass in the previous line's _gsTransform object. for (var i = 0; i < total; i++) { leader = createLine(leader, i); } In v3, _gsTransform has been replaced with gsap.getProperty, so we need to make a few adjustments. Now the leader is what gsap.getProperty(line) returns. That will work fine with all the lines except for the first one, so I made the initial leader object a function so that it will use a similar syntax to getProperty. let leader = (prop) => { return prop === "x" ? pointer.x : pointer.y; } Line Trails (codepen.io) Now about implementing that in React - I probably wouldn't make the lines their own component. I would try to make the entire animation a single component. I would also avoid using setState for the position as it's unnecessary for the animation, and just slows React down.

Welcome to the world of GSAP, @NewbieScroll! Aside from starting with the "Getting Started" guide (which you did), there isn't a particular order you should go through, no. Like @elegantseagulls, I'd highly recommend Carl's video courses here: https://www.creativecodingclub.com/courses/FreeGSAP3Express?ref=44f484 And Craig's motiontricks.com is fantastic as well. Good luck with your learning adventure!

Since you're using SVG text, I'd probably drop everything into the SVG and use a mask/clip-path. Here's an old demo with something similar. https://codepen.io/PointC/pen/ENRprd Hopefully that helps. Happy tweening.

@Carl's courses are awesome: https://www.snorkl.tv/ So are @PointC's: https://www.motiontricks.com/

Sure. You could just chain a .time() or .progress() to the end of the timeline. gsap.timeline().to("[data-animation='gsap'] .box", { duration: 2.5, yoyo: true, yoyoEase: true, y: -50, ease: "power1.inOut", stagger: { each: 0.5, from: "end", repeat: -1 } }).time(3.5); Happy tweening.

Some of the math behind that. Technically it would be like 141.42 and some change. 283 would be able to cover it from any point inside of the container, but it's centered so not necessary.

Just in case you want to take this type of effect a little further, here's a demo from one of my courses. You can remove the scale and opacity entirely if you want and get loads of variation by tweaking the values in the distributor configs. SInce the horizontal motion is being achieved via an x transform you should get better overall performance than letter-spacing. https://codepen.io/snorkltv/pen/yLyqVWQ?editors=0010

Hello @Creativist-Lab Try setting autoRound: false https://codepen.io/akapowl/pen/mdBLzPy Found in this thread And this is from the docs: autoRound By default, CSSPlugin will round pixel values and zIndex to the closest integer during the tween (the inbetween values) because it improves browser performance, but if you’d rather disable that behavior, pass autoRound: false in the CSS object. You can still use the SnapPlugin to manually define properties that you want rounded.

Hey there Pete, You need the object syntax. By default the class is added to the trigger element. From the docs. toggleClass String | Object - Adds/removes a class to an element (or multiple elements) when the ScrollTrigger toggles active/inactive. It can be either of the following: String - The name of the class to add to the trigger element, like toggleClass: "active" Object - To toggle a class for elements other than just the trigger, use the object syntax like toggleClass: {targets: ".my-selector", className: "active"}. The "targets" can be selector text, a direct reference to an element, or an Array of elements. Note that toggleActions don't apply to toggleClass. To have toggle class names in a different way, use the callback functions (onEnter, onLeave, onLeaveBack, and onEnterBack). Hope this helps! ✨

You need to create your animation after the SVG has loaded. The window load event does not include ajax calls like that, so you'll have to use a callback provided by XMLHttpRequest. Another option using fetch... Load and animate content (codepen.io)

Hey there! This is a very old version - we're on GSAP3 now, so it's likely that the issue is down to using deprecated syntax. Check out the migration guide. Here's an updated version - https://codepen.io/GreenSock/pen/jOGYebe?editors=0110 Another note - you're using canvas which is great for performance, but you're animating the canvas DOM elements instead of elements within the canvas, so you're not getting any performance benefits at all. This seems a little pointless - if you're just animating the canvas elements you could surely just use image tags. If you've chosen canvas for performance you'll need to animate the images themselves - not the canvas element. Maybe this is a minimal demo and there are reasons though! Just wanted to point it out in case it helps. Good luck!

Hey @Zoker Looks like it's down to a regression in the latest version. Sorry about that! Fixing options! Step back the version to 3.8 Use the latest beta Fix it for the current version by setting lazy: false on your .from() tween(s). https://codepen.io/GreenSock/pen/NWaQYVY?editors=1010 (You'll also need to load your GSAP script before the scrollTrigger script in your codepen JS panel.)

Hello and welcome to the GSAP forums @amit95 It looks like you are creating your ScrollTriggers before even initializing locomotive-scroll. Take a look on the order of execution in the locomotive-scroll example on the .scrollerProxy() documentation page - you'll want to stick to that order for setting things up appropriately to begin with. Also it looks like you did not specify the scroller on your ScrollTriggers. That's another thing you'll want to do, for things to properly get communicated between locomotive-scroll and ScrollTrigger. Hope that'll help get things running for you. https://codepen.io/GreenSock/pen/zYrELYe

Oh no don't worry about that. Very happy to help! ☺️ Thank you for the kind offer though. To answer this too... It's a bad plan if you're going to be moving the trigger element as it can mess up calculations - if you're just doing an opacity fade it'll be fine.

Sorry about that, @RaoulUnger - it was caused by a regression in 3.9.1 that's specific to .fromTo() tweens of CSS colors. It should be resolved in the next release which you can preview at: https://assets.codepen.io/16327/gsap-latest-beta.min.js or of course you can just use 3.9.0 for now if you prefer. Or don't use .fromTo(), as @elegantseagulls and @Cassie suggested. https://codepen.io/GreenSock/pen/xxXovOO?editors=1010

Thanks for the demo! You're animating from it's current position to -25, so you need to switch that around, which you can do with a from or fromTo animation or by using gsap.set() to initially position them and then use a to animation. And to have them staggered, you can use the stagger property. A Pen by GreenSock (codepen.io)

It looks like you have CSS in your WordPress instance that's adding a transition to each section that's fighting with the GSAP animation. You shouldn't have CSS transitions that conflict with GSAP's transforms.

@Jloafs I stumbled across this thread as I was having a similar issue. So what solved the issue for me was having an init() function run on both page load and the after hook. In this init function give each scrollTrigger an id relative to the section or functionality store those ids in an array then using the before hook loop through each id using `ScrollTrigger.getById(id)` and then run the kill() function Not tested the below code but should help understand what fixed my issue gsap.registerPlugin(ScrollTrigger); const prefix = 'className'; let triggerIDs; init(); function init() { const sections = document.querySelectorAll('sections'); triggerIDs = []; sections.forEach(function(element, index) { const ID = prefix + '__' + index; const tl = gsap.timeline({ scrollTrigger: { id: ID, markers: true, trigger: element, }, }) triggerIDs.push(ID) }); } barba.hooks.beforeLeave((data) => { triggerIDs.forEach(function(id) { ScrollTrigger.getById(id).kill(); }); }); barba.hooks.after((data) => { init(); });

Hi @camiloignaval Welcome to the forum. Looks to me like you'll need to set the overwrite property to true in those tweens. (It's false by default) You could also create a timeline for each element and play/reverse it on enter/leave. Hopefully that helps. Happy tweening and welcome aboard.

Path data looks fine and it clearly works correctly as seen in this demo. https://codepen.io/PointC/pen/920f23b493b302b6a111a733ce12e559 Definitely look at joining Club GreenSock so you can use MorphSVG in the wild. Happy tweening.

I just meant the x position set() in your matchMedia query. So your original code would look like: gsap.utils.toArray(".section-avant-apres").forEach((section, i) => { let theTarget = section.querySelector(".dragger") if (window.matchMedia("(max-width: 689px)").matches) { gsap.set(theTarget, { x: "50" }); } else { gsap.set(theTarget, { x: "450" }); } Draggable.create(theTarget, { type: "x", bounds: ".logo-new", onDrag: function () { let x = gsap.getProperty(this.target, "x"); gsap.set(".logo-old", { clipPath: `inset(0px 0px 0px ${x}px)` }); } }); }); Happy tweening.

Also, here is an unfinished codePen of what I was trying to accomplish with the subtle timing, using the solution. Thanks again, all of this is (as always) super helpful. https://codepen.io/celli/pen/GRMXNoz

You'll be able to put together a solution if you read through that thread Blake posted! Here's the specific sub-thread that will help - And the specific snippet - although this will need to be tweaked for horizontal scrolling let heights = [356, 129, 293, 188]; let totalHeight = 0; let prev = 0; heights.forEach(height => totalHeight += height); let snapArray = heights.map((height, i) => { let current = (prev + height / 2) / totalHeight; prev += height; return current; }); And here's the post where I did that - although this is aligning to the left instead of center. If you read through those examples you'll have your solution. Why don't you try to implement it? If you get stuck, feel free to post a demo of what you've tried and we'll happily take a look.

Hi @TrulyNewbie You went back into the archives for that old demo, didn't you? I'm not quite sure I follow the desired result, but it seems like you want the parent container to animate autoAlpha and the child h3/h5 to animate their position at the same time? Is that right? If so, I think I'd make a timeline for each element and set an active variable to pick which timeline to play/reverse. Maybe something like this. https://codepen.io/PointC/pen/QWqrdxR Is that what you needed or did I completely misunderstand the question? Happy tweening.

First off, if you are working on WordPress and editing themes. You should always create a child theme to make customizations on. It's bad practice to customize your parent theme (or just theme) because if the author of the theme updates their theme and you update it, you will lose all your customizations. If you make customizations on a child theme, you will then be able to safely update the parent theme without losing all your work. Now to help you enqueue. Your code should look like this: function wpb_adding_scripts(){ wp_register_script( 'gsap', 'https://cdnjs.cloudflare.com/ajax/libs/gsap/3.9.1/gsap.min.js', array(), '1.0', true ); wp_register_script( 'gsap-settings', get_stylesheet_directory_uri() .'/gsap-options.js', array('gsap'), '1.0', true ); wp_enqueue_script('gsap'); // This is probably not needed since below we are enqueueing the gsap-settings file with has a dependency on the gsap script, so it should enqueue both wp_enqueue_script('gsap-settings'); } add_action( 'wp_enqueue_scripts', 'wpb_adding_scripts' ); This would then enqueue the script properly I believe (haven't tested it but pretty sure it should stop the error). I also added a gsap-settings script, which you can create that js file in your theme at the correct location and write all your animation in there and call gsap. Hopefully this helps!

Hey there! It needs to be paths. DrawSVG animates the stroke of SVG paths and shapes. Not text. It's not particularly a 'plug and play' effect (certainly not just pointing a plugin at some text). There's a lot of prep that goes into it before you get to coding. But it looks great so it can be worth the effort. Here's a great article series outlining the steps from @PointC https://www.motiontricks.com/animated-handwriting-effect-part-1/

It should be lowercase gsap.to('.p2',{ scrollTrigger:{ // <-- lowercase "s" trigger: '.p3', markers:true, toggleActions:"play none none none" }, x:300, y:500, duration:4 });

Hello there, @pattocheu First up, I would suggest taking a closer look on how flexbox handles things - e.g. if you want your sections to have specific widths, make sure to set the flex properties for them, or else flexbox will kind of do its own thing. https://css-tricks.com/snippets/css/a-guide-to-flexbox/#flex With that corrected, your tween will still not work because you have sections with different widths, so using xPercent with calculations based on the number of sections you have for where to tween things to won't work - those calculations you are using work for sections that all have the same width, filling the screen. As an alternative approach you could tween on the x instead and do your calculations based on the scrollWidth of the container and the clientWidth (or alternatively window.innerWidth). That works better already - Hope it helps https://codepen.io/akapowl/pen/MWErygR