Jump to content
GreenSock

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

Search the Community

Showing results for tags 'rotation'.



More search options

  • Search By Tags

    Type tags separated by commas.
  • Search By Author

Content Type


Forums

  • GreenSock Forums
    • GSAP
    • Banner Animation
    • Jobs & Freelance
  • Flash / ActionScript Archive
    • GSAP (Flash)
    • Loading (Flash)
    • TransformManager (Flash)

Product Groups

  • Club GreenSock
  • TransformManager
  • Supercharge

Categories

There are no results to display.


Find results in...

Find results that contain...


Date Created

  • Start

    End


Last Updated

  • Start

    End


Filter by number of...

Joined

  • Start

    End


Group


Personal Website


Twitter


CodePen


Company Website


Location


Interests

Found 137 results

  1. 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 :).
  2. 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
  3. GreenSock

    CSSPlugin

    With the help of the CSSPlugin, GSAP can animate almost any CSS-related property of DOM elements including the obvious things like width, height, margin, padding, top, left, and more plus more interesting things like transforms (rotation, scaleX, scaleY, skewX, skewY, x, y, rotationX, and rotationY), colors, opacity, and lots more. Because animating DOM elements in the browser is so common, GSAP automatically checks to see if the target is a DOM element and if it is (and you haven't already defined a "css" object in the vars parameter), the engine creates that css object for you and shifts any properties that aren't reserved (like onComplete, ease, delay, etc. or plugin keywords like scrollTo, morphSVG, pixi, etc.) into that css object when the tween renders for the first time. We recommend using the more concise style that omits the css:{} object but be aware that either style is acceptable. Learn more in the CSSPlugin documentation.
  4. I want to make a fortune wheeler game where user can click the button to spin the wheel then when it stops, it will show what user get. I create the function to spin the wheel but not I'm sure which approach to detect which item is chosen. Can someone give me an idea how to approach this? Thanks a bunch!
  5. 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
  6. 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!
  7. szsoma

    Lucky wheel

    Hi! I would like to make a lucky wheel (something like this) and I am in trouble with the indicator at the topright corner. I've 12 sectors on the wheel and the indicator sholuld move when the little sticks are under it. The problem is the wheels easing and the triggering. Can someone help me?
  8. 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
  9. Note: This plugin was removed from GSAP 3. However, you can register this unofficial plugin to get the effect back. Tweens any rotation-related property to another value in a particular direction which can be either clockwise ("_cw" suffix), counter-clockwise ("_ccw" suffix), or in the shortest direction ("_short" suffix) in which case the plugin chooses the direction for you based on the shortest path. For example: //obj.rotation starts at 45 var obj = {rotation:45}; // In GSAP 3 directionalRotation is built in): //tweens to the 270 position in a clockwise direction gsap.to(obj, {duration: 1, directionalRotation: {rotation: "270_cw"}}); //tweens to the 270 position in a counter-clockwise direction gsap.to(obj, {duration: 1, directionalRotation: {rotation: "270_ccw"}}); //tweens to the 270 position in the shortest direction (which, in this case, is counter-clockwise) gsap.to(obj, {duration: 1, directionalRotation: {rotation:"270_short"}}); // In GSAP 2 (directionRotation is an external plugin): //tweens to the 270 position in a clockwise direction TweenLite.to(obj, 1, {directionalRotation:"270_cw"}); //tweens to the 270 position in a counter-clockwise direction TweenLite.to(obj, 1, {directionalRotation:"270_ccw"}); //tweens to the 270 position in the shortest direction (which, in this case, is counter-clockwise) TweenLite.to(obj, 1, {directionalRotation:"270_short"}); We used rotation here but it could be anything, like newRot.x. Notice that the value is in quotes, thus a string with a particular suffix indicating the direction ("_cw", "_ccw", or "_short"). You can also use the "+=" or "-=" prefix to indicate relative values.
  10. Hi gang! I'm new to the party but just finished my first GreenSock implementation. Congrats on v3! Seems like I showed up at the perfect time. Once you catch all of the documentation issues (Draggable seems to have literally improved overnight!) this library will truly be my new favourite thing. For example, here is my implementation of a fancy knob that will scrub at variable speed depending on how far you turn it to the left or right. It will scrub even when you're not dragging the knob. Experience gives me the wisdom to recognise that this implementation would not be terse or possible without such a well-thought out API surface. Kudos! knobber (element) { const timeline = gsap.timeline({ repeat: -1, onRepeat: () => { const r = ~~draggable.rotation timeline.repeatDelay(gsap.utils.mapRange(0, 180, 1.0, 0.1, Math.abs(r))) // this.direction(r > 0) } }) timeline.pause() timeline.to({}, { duration: 0.1 }) const draggable = Draggable.create(element, { type: 'rotation', inertia: true, onDragStart: () => timeline.play(), onDragEnd: () => timeline.pause(), snap: () => { return 0 } })[0].applyBounds({ minRotation: -180, maxRotation: 180 }) } Anyhow, the issue I'm now faced with is that this implementation is extracted from a demo I've prepared for our project, StimulusReflex. As you're well aware, it will work without Inertia, but it simply won't be as sexy. I'm actually perfectly happy to recommend that people purchase a GSAP membership, but I don't want to violate your TOC (or trust) by putting the gsap-bonus.tgz on our public repo. Right now I have it set up with yarn/webpack pulling in the local archive as your npm instructions describe. (You might want to tell people to purge their caches to get rid of old versions, btw!) This works great for my workstation and for deploying to Heroku, but how do you suggest I handle the package management issue? If I was to push the repo as-is to production, anyone checking out the code to experiment with locally is going to get slapped by yarn/npm because that file doesn't exist. I actually do have a suggestion for how you could approach this: add localhost:3000 to your CDN whitelist so that people can experiment with the paid tools on their own machine, but in a way where they can't deploy it. This has actually worked fairly well for FontAwesome, who actually took it a step further to allow paid users to whitelist their project domains through a web interface. The other related question I have is about what I'll call progressive enhancement: is there a way to detect whether you're running the paid version and if Inertia was available from inside your webpack context? Specifically, I want to import Inertia if it's available and skip it if it's not. This would include passing InertiaPlugin to gsap.registerPlugin and even dynamically passing true/false to the inertia var when creating a Draggable instance. If there's a good strategy for this which won't make webpack angry if the file doesn't exist, I'd love to hear about it. Again, I propose a solution: include an InertiaPlugin.js in the OSS version on GitHub that has function signature placeholders - like a Java interface - but only actually spits out console warnings if it's not present. This way developers could comfortably set inertia:true regardless of whether it's available or not.
  11. 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!
  12. 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
  13. 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
  14. Note: This page was created for GSAP version 2. We have since released GSAP 3 with many improvements. This includes replacing accessing _gsTransform with gsap.getProperty(). Please see the GSAP 3 release notes for details. Have you ever wondered how to get the position, rotation or other transform-related properties that were animated with GSAP? It's actually quite simple: they're all neatly organized and updated in the _gsTransform object which GSAP attaches directly to the target element! Watch the video Let's set the rotation of the logo to 20 degrees. var logo = document.querySelector("#logo"); TweenMax.set(logo, {rotation:20}); GSAP applies that rotation via an inline style using a transform matrix (2d or 3d). If you were to inspect the element after the rotation was set you would see: <img style="transform: matrix(0.93969, 0.34202, -0.34202, 0.93969, 0, 0);" id="logo" src="..." > Not many humans would be able to discern the rotation from those values. Don't worry - the _gsTransform object has all the discrete values in human-readable form! console.log(logo._gsTransform); The console will show you an Object with the following properties and values: Object { force3D: "auto", perspective: 0, rotation: 20, rotationX: 0, rotationY: 0, scaleX: 1, scaleY: 1, scaleZ: 1, skewType: "compensated", skewX: 0, skewY: 0, svg: false, x: 0, xOffset: 0, xPercent: 0, y: 0, yOffset: 0, yPercent: 0, z: 0, zOrigin: 0 } To grab the rotation of the logo you would simply use: logo._gsTransform.rotation Click "Edit on CodePen" and open the console to see how it works See the Pen _gsTransform demo by GreenSock (@GreenSock) on CodePen. Get transform values during an animation Use an onUpdate callback to read the values during an animation: var logo = document.querySelector("#logo"); var output = document.querySelector("#output"); TweenMax.to(logo, 4, {rotationY:360, x:600, transformPerspective:800, transformOrigin:"50% 50%", onUpdate:showValues, ease:Linear.easeNone}); function showValues() { output.innerHTML = "x: " + parseInt(logo._gsTransform.x) + " rotation: " + parseInt(logo._gsTransform.rotationY); //you can also target the element being tweened using this.target //console.log(this.target.x); } The demo below illustrates how to read transform values during an animation. See the Pen _gsTransform demo: animation by GreenSock (@GreenSock) on CodePen. We strongly recommend always setting transform data through GSAP for optimized for performance (GSAP can cache values). Unfortunately, the browser doesn't always make it clear how certain values should be applied. Browsers report computed values as matrices which contain ambiguous rotational/scale data; the matrix for 90 and 450 degrees is the same and a rotation of 180 degrees has the same matrix as a scaleX of -1 (there are many examples). However, when you set the values directly through GSAP, it's crystal clear. Happy tweening!
  15. 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.
  16. 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!
  17. 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.
  18. Hello, I'm using TweenMax to try to do a rotationX on a Bitmap that I have added to the stage using EaselJS. Does anyone know if it is possible? I have looked at this post but it has been over a year and I didn't know if something might have changed. http://community.createjs.com/discussions/easeljs/462-integration-with-greensock-tweenmax-tweenlite Here is the code: _rodHolderCover = new createjs.Bitmap("images/rodCover1.png"); stage.addChild(_rodHolderCover); _rodHolderCover.addEventListener('mousedown', handleKeyDown); then in the event handler I have this. TweenMax.to(_rodHolderCover, 1,{rotationX: 180}); rotation works great and so does x and y,
  19. 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
  20. 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.
  21. I've been using MorphSVGPlugin.pathDataToBezier to get the arc's path and all have been good, but I just can't make the first "handle" (and the other handles that aren't just simple circles) rotate and move correctly. any ideas? Also need a nice way to move the svg dots randomly inside the half circle. Thanks in advance
  22. 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?
  23. 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
  24. 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!
  25. i set up a rotating masked wheel like this: http://pedaci.de/geheimlabor/anim_dev/rotateWheel.html now when you click the yellow and then green segments (and back) the mask spins all the way around instead of just taking the (obvious) short way. is there a quick and easy way to correct this behaviour? thanks.
×