Bernat__ Posted November 6, 2023 Posted November 6, 2023 On 3/16/2023 at 4:37 PM, Rodrigo said: Hi @ag93 and welcome to the GreenSock forums! Just use GSAP Wrap util to offset the end position in the initial setup of the MotionPath Plugin: gsap.set(items, { motionPath: { path: circlePath, align: circlePath, alignOrigin: [0.5, 0.5], end: (i) => gsap.utils.wrap(0, 1, i / items.length + 0.25), }, scale: 0.9 }); https://greensock.com/docs/v3/GSAP/UtilityMethods/wrap() Here is a fork of the codepen example: Hi, I'd like to use the code on this Codepen, but I need the circles to be rotated depending on their position on the main circle. I'm adding a mockup to show what I mean. How could I achieve that? Thanks.
mvaneijgen Posted November 6, 2023 Posted November 6, 2023 Hi @Bernat__ welcome to the forum! Have you see the motion path property autoRotate (https://gsap.com/docs/v3/Plugins/MotionPathPlugin) Quote Boolean | Number - Rotates the element in the direction of the path. true matches the angle of the path exactly, but you can offset the angle by any amount by defining autoRotate as a number (in degrees). For example, autoRotate: 90 would add 90 degrees to the rotation as it moves along the path. If you’d like the element to rotate from its center, simply set transformOrigin: "50% 50%". To align the path with the center of the target, either use alignOrigin: [0.5, 0.5] or set xPercent: -50, yPercent: -50 on the target before the motionPath tween. 2 1
Bernat__ Posted November 13, 2023 Posted November 13, 2023 On 11/6/2023 at 9:11 AM, mvaneijgen said: Hi @Bernat__ welcome to the forum! Have you see the motion path property autoRotate (https://gsap.com/docs/v3/Plugins/MotionPathPlugin) Thanks a lot! I'll try what you say.
Bernat__ Posted November 14, 2023 Posted November 14, 2023 On 11/6/2023 at 9:11 AM, mvaneijgen said: Hi @Bernat__ welcome to the forum! Have you see the motion path property autoRotate (https://gsap.com/docs/v3/Plugins/MotionPathPlugin) Hi again, Thanks to autoRotate I've achieved what I was looking for. Now I'm trying to modify another aspect of the carousel: the carousel I'm building has 5 items, and I'd like them to fill just one half of the circle (180º) not 360º as they do now. The first item should be in the 0º position, and each item would be separated 36º from the next one. When the user clicks the Next button, the items would rotate 36º, and the second item would be in the 0º position, and so on. Is it possible to achieve that? Any indication is appreciated. Thanks.
mvaneijgen Posted November 14, 2023 Posted November 14, 2023 7 minutes ago, Bernat__ said: Is it possible to achieve that? Any indication is appreciated. yeah, sure? Everything is possible! The question is how much custom code is that going to need. I'm not completely sure what it is you're trying to do, so if you could provide a minimal demo with the current setup and tell us what you've already tried, someone here will be happy to take a look at your code. Here's a starter CodePen that loads all the plugins. Just click "fork" at the bottom right and make your minimal demo: See the Pen aYYOdN by GreenSock (@GreenSock) on CodePen.
Bernat__ Posted November 14, 2023 Posted November 14, 2023 11 minutes ago, mvaneijgen said: yeah, sure? Everything is possible! The question is how much custom code is that going to need. I'm not completely sure what it is you're trying to do, so if you could provide a minimal demo with the current setup and tell us what you've already tried, someone here will be happy to take a look at your code. Here's a starter CodePen that loads all the plugins. Just click "fork" at the bottom right and make your minimal demo: Hi, sure I can provide a demo. Here it is: See the Pen qBgXgWw by zubrik (@zubrik) on CodePen. Now all the items fill the 360º of the circle. I'd like them to fill just the right half of it. Item 1 would be at 0º, item 2 at 36º, etc. On every click of the Next button, items would move 36º. I hope what I'm trying to do is clearer now. Thanks.
mvaneijgen Posted November 14, 2023 Posted November 14, 2023 You're using the MotionPath Plugin, this places items on a path using a range of 0 to 1. In this case 0 will be 0 degrees and 1, 360 degrees, so if you want half the circle you're have to put the elements in a range between 0 and 0.5. The circle you've drawn has its start in the middle right point, this is probably the default in SVG, so you have to rotate the shape -90 to move the point or draw your own shapes that has it start where you want it to. Same logic applies to moving the elements on click, itemStep needs to be 0.5 instead of 1 Hope it helps and happy tweening! See the Pen vYbJMjw?editors=1010 by mvaneijgen (@mvaneijgen) on CodePen. 1
Rodrigo Posted November 14, 2023 Posted November 14, 2023 Hi, On top of Mitchel's great advice, you could look into this article by David DeSandro in order to get a better grasp of how disposing elements on a circular pattern works: https://3dtransforms.desandro.com/carousel Hopefully this helps. Happy Tweening! 1
ruisu1050 Posted December 14, 2023 Posted December 14, 2023 On 11/28/2022 at 4:11 AM, GreenSock said: Revisiting this old thread to share a fancy helper function I whipped together that simplifies a lot of this and even makes it draggable/spinnable with inertia (disclaimer: InertiaPlugin requires a Club GreenSock membership): Hello! I am trying to do something like this, but i am having trouble to skip certain number (eg, circle 2) on drag or on click on next, is this posible?
Rodrigo Posted December 14, 2023 Posted December 14, 2023 Hi @ruisu1050 and welcome to the GSAP Forums! Thanks for being a Club GSAP member and supporting GSAP! We love helping with GSAP-related questions, but unfortunately we just don't have the resources to provide free general consulting, logic troubleshooting, or "how do I recreate this cool effect I saw on another site?" tutorials. What have you tried in terms of this? You'd have to come up with the logic by keeping track of the current index in order to jump from 1 to 3 and the other way around as well. I would recommend you to fork the demo you want to build from and give it a try. If you get stuck you can post back in the forums and remember to include a minimal demo that clearly illustrates the problem you're having. Happy Tweening!
aydinvivik Posted March 10, 2024 Posted March 10, 2024 (edited) On 12/7/2021 at 10:32 AM, OSUblake said: Hi tracta, You only need 1 timeline, and for snapping, check out GSAP's utility methods. We can use some of those animate the progress of the timline. I found exactly what I was looking for thank you, but do you have any idea how to make the active item in the middle of the top instead of on the right side? Like this; Edited March 10, 2024 by aydinvivik I missed it, I did it :)
aydinvivik Posted March 10, 2024 Posted March 10, 2024 27 minutes ago, aydinvivik said: I found exactly what I was looking for thank you, but do you have any idea how to make the active item in the middle of the top instead of on the right side? Like this; I missed it, I did it
Alex.Marti Posted August 8, 2024 Posted August 8, 2024 On 11/27/2022 at 9:11 PM, GreenSock said: Revisiting this old thread to share a fancy helper function I whipped together that simplifies a lot of this and even makes it draggable/spinnable with inertia (disclaimer: InertiaPlugin requires a Club GreenSock membership): This helper function is AWSOME! Thanks a lot! Is it normal we can't found it on the helper functions page https://gsap.com/docs/v3/HelperFunctions/ ? Is there a way to pause the carousel? I tried carousel.pause(); but it's not working. Is there also a way to change the initial direction to "CW"? Regards, Alex
Alex.Marti Posted September 12, 2024 Posted September 12, 2024 On 8/8/2024 at 3:28 PM, Cassie said: I'll add it to the helper functions! Thanks Cassie ! I'm sure it will help other people to have it on the Helper Function's page. I'm not sure if you saw my previous questions : Is it possible to pause the carousel ? Is it possible to change the default direction ? Alex
Cassie Posted September 12, 2024 Posted September 12, 2024 If you log out the carousel, you'll see that autoAdvance is a tween, so you could just pause it? document.querySelector(".pause").addEventListener("click", (e) => { console.log("pause") carousel.autoAdvance.pause() }) I don't have time to dig into direction, but you'd have to set up an option to change the rotation values to negative values. Hope this helps!
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment
Create an account
Sign up for a new account in our community. It's easy!
Register a new accountSign in
Already have an account? Sign in here.
Sign In Now