Search the Community

Hello, I faced a problem which tried to resolve in a couple of ways, but all of them have some issues. Currently Im trying to implement the simple wheel spin animation. But tricky part it's in a steps what I want to achieve. This is the final version of what I'm doing. So we have 3 phases: 1. Start spin animation (going little bit back) and increase speed after that and start infinity spinning animation; 2. Waiting on response from API; 3. After receiving information from API calculate the final position and adjusting time for a stop animation; So the main issue here, that for some reasons I can see "speed up" for a wheel while receiving the data from API and can't figure out what is going. Initially I was trying to use 2 different methods for start and stop, but it also have pretty much the same issue and I was thinking that it can be an issue with timeline, but in the example below I have one timeline, Im event pausing before calculation and still have visual problem. Or maybe Im on a wrong way and some one have a better idea/vision how to implement that part. spin1: async ( dataPromise) => { return new Promise((resolve) => { if (!wheelRef.current) return const speed = 360 const tl = gsap.timeline() autoSpinTween.current = tl const accelDuration = 1.5 const accelDistance = (speed * accelDuration) / 2 tl.to(wheelRef.current, { rotation: '-=10', duration: 0.5, ease: 'sine.inOut', }).to(wheelRef.current, { rotation: `+=${accelDistance}`, duration: accelDuration, ease: 'power2.in', }) tl.to(wheelRef.current, { rotation: '+=360', duration: 360 / speed, ease: 'none', repeat: -1, }) dataPromise.then(({ winningSectionId, nextSections }) => { const currentRotation = gsap.getProperty( wheelRef.current, 'rotation', ) as number const timeInTimeline = tl.time() const currentVelocity = timeInTimeline < 2.0 ? (timeInTimeline / 2.0) * speed : speed const winningIndex = wheelSections.findIndex( (s) => s.id === winningSectionId, ) const sectionAngle = 360 / totalSections const normalizedRotation = currentRotation % 360 let distanceToTarget = (360 - normalizedRotation - winningIndex * sectionAngle) % 360 if (distanceToTarget < 0) distanceToTarget += 360 const minSpins = 2 const finalDistance = distanceToTarget + minSpins * 360 const adjustedDuration = (2 * finalDistance) / currentVelocity tl.kill() gsap.to(wheelRef.current, { rotation: currentRotation + finalDistance, duration: adjustedDuration, ease: 'power2.out', onComplete: () => resolve({ winningSectionId, nextSections }), }) }) }) } Add link to the project: https://stackblitz.com/edit/gsap-react-basic-f48716-ssrnhwjb?file=src%2FApp.js

Implementing a circular time picker where a line rotates toward the pointer on click with a short tween, and should immediately hand off to drag if the pointer moves. However, when clicking and then quickly dragging, the rotation glitches or remains bound to the tween briefly rather than following the drag instantly. onDragStart appears to fire on simple clicks (tiny pointer movement).

Hi everyone, I’m trying to create a 3D animation with GSAP where a square rotates like a disk, respecting the perspective. The square is tilted with rotationX and rotationY, but I want it to rotate around its own Z-axis in 3D, like spinning on its edges. The rotation currently feels flat and clockwise, and I want it to rotate in the direction of the square itself, taking the 3D perspective into account. Any tips on how to achieve this? Thanks in advance! Codepen: https://codepen.io/ramonv/pen/pvoEKaX

Hi, I'm trying to rotate the gallery and it does rotate but it rotates in the wrong way. Can anyone help me? I want it to rotate in the center. I'm a newbie here. Sorry if the question was so easy. I'm currently using ReactJS and I don't know why I can't log in to my CodePen account. It said "Login and Signup is unavailable" So I'm giving a CodeSandbox link. Hope you guys can give me some ideas. Link: circular-animation-image

Hi all, I need to programmatically update the rotation draggable element position when the user click on the blue donut area visible on the CodePen. I found the following solution that involve a gsap.to method, but i'd prefer use something like draggable.snapTo(180deg) Any suggestion? Thanks, you're awesome gsap.to("#controller", 1, { duration: 1, rotation: closest, ease: "back.out(1.4)", onUpdate: function () { draggable.rotation = closest; draggable.update(true) // doesn't work }, onComplete: function () { draggable.vars.onThrowComplete.call(draggable); } });

Hey guys, hope you all are having a great week! Is there any way I can achieve the 'radius' functionality using the 'rotation' type Draggable? I tried hacking my way into it but no good My problem is that when defining the liveSnap property on a 'rotation' Draggable, the grabbed element just instantly jumps from snap to snap instead of smoothly rotating around and then locking position once it is close enough to a given snap point (like what happens when using a 'x,y' type Draggable: https://codepen.io/GreenSock/pen/wgapaY) This codepen is the closest I've found to the result that I want, it works fine the way it is, but as soon as you add liveSnap: true, the dragging just becomes truncated ⬇️ Thanks in advance!

Hello I Hope you all are doing well. I am facing some issue is that Draggable onDrag returns this.rotation angle value incorrect. Please see the Image const pointer = Draggable.create(".rotate-pointer", { type: "rotation", onDragStart: (e) => { const gElement = e.target.closest("g"); const idx = gElement.getAttribute("id"); selectedRadiusPointer = idx; roundTableDraggable[idx].disable(); // pointer[idx].disable(); }, onDrag: function () { const rotation = e.target.getBoundingClientRect(); const parentG = document.getElementsByClassName(`table-${selectedRadiusPointer}`)[0]; TweenLite.to(parentG, { rotation: this.rotation || 0, transformOrigin: 'center center' }); console.log(this.rotation, 'rotation') }, onDragEnd: () => { roundTableDraggable[selectedRadiusPointer].enable(); }, }); This is my code and this is rotation angle values

Hello I hope you are doing well. I want to achieve that the small circle located on the border of circle when someone drag this in any the circle or svg group should rotate in that direction i'll post an examples so that you (respected helper) can understand. i have provided the code so please update it their. Thank you very much this comunity is very helpful i am loving it thanks : )

Gsap Rotating Arrow in circle,and is stopping well at various points, But Now want to trgieer some js code on each that stopping points, So that i can glow or animate each points logo , when stop on it for some time Just want to show Different alert or consoles on Different points

I am a huge newbie when it comes to gsap, however i wanted to create a rotating wheel with numbers on it inspired by a ui i saw. I used draggable hittest to detect the collision of the number and the collision box placed on the screen. however when i went outside the current viewport the collision was actually colliding with other elements on all 4 sides of it. I saw that there was really no way to fix this with the gsaps collision detection so i thought of a method of only detecting if the element collides with the hitbox AND is also inside the viewport. however it does not seem to register when the number goes into the viewport after rotating and only registers it onload... even if i use a setinterval function that runs multiple times, it does not seem to work. Any reason as to why? could i change it somehow to detect when the number goes into the viewport from draggable rotation? Or is there a way to fix the collision to only collide with the number its meant to collide with? Thank you for the read! I hope i can find some way to fix this very soon :).

Hi there, I want to create an animated wheel which starts at a specific degree and ends at a specific degree. Until it's requested to stop/pause it needs to spin infinite. So basically there are three stages "starting", "spinning", "stopping". The difficult task is to start and stop spinning with some momentum to feel natural. I have found multiple very helpful forum posts about that topic. They all stop at a random degree. Especially this seams to be a very similar problem but the solution is missing the momentum at start and stop position. Thanks in advance

Hi, I'm trying to animate a set of cards so when they animate in they rotate to a specific angle, these cards are stacked one on top of each other, so I have position them absolutely inside another div, but the transformOrigin does not seem to have an effect. Any help will be much appreciated. *** UPDATE *** After working on a codepen example I found what I did wrong, the codepen link has a working example. The problem was a reference to an extra div element. Regards, Ricardo

I've recently found a very nice codepen containing almost the exact same animation I wanted done in GSAP, and I've been trying to convert it to GSAP 3 to use it in a web app using pretty much just react hooks all over. It uses timeScale tweening to simulate acceleration and deceleration of a rotating svg, with a play/pause button. However, I can't seem to get the acceleration/deceleration effect to work on Firefox/Chrome, and it won't pause, either. The codepen I linked is the effect I'm trying to achieve, and I've linked a minimal reproducible example below: https://codesandbox.io/s/blissful-hill-boo2n There is just one condition that I'd like to include for my app besides using hooks and gsap 3, and that is that I need to fade the rotation in and out based on the state of the parent element, and as far as I can see that's working alright (as evidenced by the isActive! isNotActive! console logs). That state is currently set by the playButton element, via the setActiveCallback function. I'm not sure this is what's breaking everything, since the animation itself doesn't look like it's working properly on it's own with either react hooks or gsap 3. TL;DR: I can't get codesandbox the animation to pause, and the intended acceleration/deceleration effect is borked. Any help will be very much appreciated!

Hi I have to develop this animation where an image starts from scale:0 and opacity:0 then grows rotating with an easing power2.out then keeps it rotating infinite by linear easing. Some ideas? Thanks

I am currently trying to get an animation to rotate some particles based on the mouse cursor like the 'Default Demo' here. If you look at the codepen I linked, I can get the basic spinning working, but I need for the animation to follow the mouse and have min/max rotations link the demo. Is this possible? I don't need the circle to shrink/expand, I just need it to rotate based on the mouse cursor. Thanks in advance!

Dears, i have created an svg rect inside a group and i have make this svg group to have "transformOrigin:'center center' " explicitly then draw a little blue circle at this group returned position my question is when i am trying to rotate the svg group then resize it the return location is wrong and it's not at the center of this group, how i can keep my reference point at the center of this group all the time with all different transformation? https://codepen.io/Shouha85/pen/MWgxNwP?editors=1010

Hi, I would like to make my box rotates to 120 degrees, and then from 120 to 240, and then 240 to 360.. But right now each time it starts at 0 and goes to 120 degrees. TweenMax.to(box, 2, {rotation: '+=120', transformOrigin: '50% 50%', repeat: -1, repeatDelay: 2}); What is the correct way to increment a rotation? Thx

Hey all, I saw a lot of chatter on here that SVG G isn't necessarily supported but figured I would check -- I'm getting a really odd matrix transform for rotation on a SVG G elements. Seems like it's getting a translateX + translateY movement as well and swinging the animation strangely. Works perfectly for just SVG and I could rewrite to break out the g elements to separate SVGs (processor GULP!) but figured I'd check before I consider. The browsers we're supporting take in transform: rotate(90deg) correctly on SVG G and I could probably rewrite for CSS tweens as well but they're always a pain. Anyway, let me know eitherway! Thanks --- I didn't fork the broken codepen and now it's working as intended with the updates below.

Hi, So this is a simple rotation animation that works well on all browsers but Safari. Can't figure out why this is happening. Any ideas? (Chrome for desired results, Safari for wrong ones) Thanks!

Hi guys, i search some code example on this forum, but i found nothing that show a Pendulum effect with tweenLite or with TimelineLite? Someone would have a functional example to create a permanent pendulum effect? My target it to get something similar that spine2D allow. for help to understand, i just want replace spine by vanilla js and vanilla tweenLite feature, because i get more performance after my test with tweenLite. But am not sure how do a pendulum loop with tweenLite. If you can provide me demos or link to the docs it will be wonderful Maybe i just don't get the good keyword for search! sorry again for poor english, thank guys.

Hi, Loving the library so far guys just have a quick question. Is there a simple way to specify an animations midpoint and set css properties so it applies them via that midpoint? I.E a TweenMax function such as: TweenMax.from > Midpoint > To I realise this is basically how Tweens work and you should aim to chain multiple tweens together in a timeline to create multiple part animations, However I was just curious to see if there was something akin to this i'm missing as couldn't find anything in the documentation? The aim is to make the dots fade to a low opacity at the midpoint (as they rotate behind) then return to full opacity as they return to the front (and end point of the animation) ! Thanks in advance, Oli

Hi, I'm trying to achieve a rotating background effect with GSAP, like in this site. http://toyfight.co/ I'm nearly there or at least I think so. Do I need to use the positioning attribute x & y to get the same effect? I've tried different combinations but just can't get it. As you can see mine seems to rotate from the top down rather than bottom up. Like in the example website.

Hi, I'm new in this world. I would have to recreate this animation: a div rotates to the right to infinity with a determined speed ... then at the click on a button the rotation is reversed also changing speed for a few seconds and then return to normal animation .... I hope I explained myself .. can anyone help me?

Hello everybody! I would like to create a small riddle with kind of a dial. I have already created 8 buttons to control some tweens but I encountered a problem with the rotation of the outer number. Every time the outer scale is rotated out of its original position the rotation of the number itself takes place at the "12 o clock" position. When rotating the outer scale again the number jumps back to the new position. I would like to rotate the number by 180 degrees at its current position. Can anyone help me with this, please? Thanks in advance Tissi

Hey guys, I'm having some weird stacking order issues in Firefox and Safari, maybe someone can put me in the right direction towards fixing it. I have 2 cards to flip, that are inline-block, side by side and have the corners overlapped (on purpose). While they are rotating, one card gets behind the other one for a brief moment until it gets the correct order. This happens in Firefox. Chrome is fine. Also, I can see a different issue in Safari that appeared recently, where rotation is not even visible. This did work a couple months ago and still works in my production code, but not on Codepen now. The stacking issue in Firefox is what really matters to me right now. I tried setting z-indexes, but that didn't help, so I understand it's rendering issue? How can I go around it? Thank you!