Jump to content
GreenSock

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

Search the Community

Showing results for tags 'rotation'.

  • 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

Find results in...

Find results that contain...


Date Created

  • Start

    End


Last Updated

  • Start

    End


Filter by number of...

Joined

  • Start

    End


Group


AIM


MSN


Website URL


ICQ


Yahoo


Jabber


Skype


Location


Interests

  1. Hello, at the moment I have a div that rotates infinite with normal css animations. But I want to do it with Greensock, because i want the animation to be more responsive depending on what I click. The idea is that I want the div to start rotating after clicking a button. It start slow and builds up speed. After 1 Second it's on full speed and keeps rotating until I press the button again. Then it should decrease the rotation till it stops. Could somebody point me in a direction? I would prefer to use tweenLite if that is possible.
  2. Hi there. I'm trying to create a simple shooting star effect by scaling a rotated div. First of all the div scales out as though the star is streaking across (which is correct), then the scale collapses changing it's transform origin. However, as you see in the codepen the div jumps around. I'll probably make a work around and scale an image instead of a rotated div, but I thought I'd check to see if there was a way to do this utilizing only code. JS TweenMax.set('#star', {rotation:-30}); TweenMax.from("#star", .5, {scaleX:0}); TweenMax.to("#star", .5, {scaleX:0, transformOrigin:"left", delay:.5}); HTML <div id="star"> </div> CSS star { position:absolute; top:-1; left:68px; width:285px; height:94px; border-top:1px solid #fff; opacity:.5; }
  3. Hi, I just started learning GSAP and my first task is to animate an image like a hinge effect starting from the ground. I was able to get a similar effect but the image is upside down, I'm confused about rotation and would appreciate any help with a solution and what I did wrong. Thanks! http://codepen.io/gk/pen/NGEgmq
  4. I am trying to rotate the top and botton element from particluar rotation angle to 0 deg. While the elemnts are getting rotated i want the height of that elemnt to get adjusted accordingly. It must look like that the arrow is geeting shhot from the bow.
  5. Hi, This codepen works in IE but not Chrome or Firefox. Basically its the same setup as i have in Lectora. Lectora autogenerates html and css, so i cannot change much in the structure of the html. The javascript however i can change to whatever needed to get this working. Doublechecked with some other projects done, and noticed that indeed IE works while Firefox and Chrome have problems with tweens for x/y, rotation, scale and the alike... Tested on: Windows 10, IE: 11.0.10240 FF: 41.0.1 Chrome: 45.0.2454.101 m Doing some searching in different codepens i find several pens that work alike. But all of them do create/append new text elements that then get transformed. A workaround i might give a try. But in my case i would prefer not to create new text and just animate like in IE on the existing texts. I hope anyone can help out. Kind regards, Math
  6. Hey @ all, need some help with a very simple animation, but i can't figure out what is actually happening. here is the Pen again: http://codepen.io/Cosciug/pen/rVEORw Here's how the nimation should go: On hover over yellow div, it moves to the right, and starts rotating -180 deg on the Y axis, origin being the left border. Here's the problem now, the the div starts rotating, it instantly jumps weirdly and starts from there instead on the original position. This bugs me out and i spent already over an hour searching why this is happening but i just can't figure out why. Basically, the div should flip just like a page of a book, from the initial position and not from any other that i do not want. Any help maybe ? Thx in advance, Cosciug
  7. so i am building a bike animation, and i want to rotate the pedal assembly while keeping the pedal itself perpendicular to the ground. i am failing on that last bit. current version of the code here http://codepen.io/brountreeRS/pen/mJgNbb
  8. Hi, Please see my (first!) Codepen: I'm trying to rotate an object 360º on mouse-over. I want it to always stop at the top again (at the start position) - even when I mouse over several times very quickly. But it overwrites the current tween and then stops somewhere else. In Flash I was able to just say TweenNano.to(evt.target, 1, {rotation:-360}); but that only works once in JS. I tried to add "overwrite:"none" to no effect. Any ideas?
  9. Hi guys! Need your help! I need to connect the "Knob" and animation of numbers in Adobe Edge Animate, I did the dragged knob, and don't know how to do the rest ... Knob like this one greensock.com/draggable Change numbers with dragging like this greensock.com/timelinelite Add some scrins and Edge Animate files in attach files to better explain what I mean Thanks in advance for any help! Regards Misha. dc_power_supply_animate.zip
  10. Hi, I read some topics where people WANT the smoothing applied by modern browsers, if you rotate or zoom images for instance. That is NOT what I search for. In my example there are three spans with border. Two of them are being rotated and get new top/left positions, and even if their final rotation is 90 degrees, they become smoothed. How can i DISABLE this somehow? I was really searching a long time, and all I assume is that this is browser rendering dependent, but maybe I can get a hint here. Btw: When I reverse that animation back from picture 2 to picture 1, they are crisp again. Thanks!
  11. Hi guys I want to be the new face animation. For example, the yellow circle to the top of the cosine right move. Please help me.
  12. Since that draggable could be used to drag and rotate one element in 2d platform, I'm wondering that is it possible to control the element to rotate in 3d? I've found that there's a codepen http://codepen.io/MAW/pen/doPLME showing how to make one element both draggable and rotatable in 2d, but I can't find any way to expend this method to 3d rotation. I know that I can setup two sliders to control X rotation angle and Y rotation angle, but what I want most is some sort of "control point" to make the 3d rotation happen. Could you please give me some advices? Thanks!
  13. Hi everyone! Pretty simple question here, is there any way to tween a transform-rotate more then 360º. For anyone not super familiar with 3d transforms: Simply put, the limitations of matrix3d means you cant rotate more then 360º by passing values more then 1 or less then -1. Because of this you need to loop from states -1 to 1 if you wish to rotate multiple times. Is there any built in functionality for this? or is there an easy way to loop through the transform rotation? Thanks, Daniel Example of the 360º transforms I have been using: var tiltX = function(x){ return "matrix3d(1,0,0,0" + ",0,"+ Math.cos(x) +","+ -Math.sin(x) + ",0" + ",0," + Math.sin(x) +","+ Math.cos(x) +",0," + "0,0,0,1)"; }; TweenLite.fromTo($(".subdiv"),2, {css:{transform: tiltX(3.1415)}} , {css:{transform: tiltX(-3.14159)}} ); OR TweenLite.fromTo($(".subdiv"),2, {css:{transform:"rotateX(-179.99deg)"}} , {css:{transform:"rotateX(180deg)"}});
  14. Hi everyone, first of all, this is my first day using gsap and I am like a child ! Awesome plugin. Aaand I just Edit it because it was a really stupid question when you search a little more. I am very sorry. At least this is my first post in this forum.
  15. Hi, I'm new to GSAP so my issue could (hopefully) be peanuts for you guys I want to loop a timeline and add 90 degrees to the variable rotation every time it runs. Can't get it to work, because TimelineMax keeps the original value of rotation. The variable does get updated though..
  16. Hi all, I'm trying to create a rotation that goes from 20 to -20, but starts at 0 (and ideally ends at 0). I've tried using the startAt property to set the inital rotation, but it doesn't seem to work as expected (please see codepen). Could someone explain why the startAt property doesn't set the rotation to 0 and if I'm using fromTo correctly, or I need to do this animation in a different way? Thanks in advance!
  17. Hi, Have very strange behaviour that is not working only in Google Chrome but works in Firefox. I need to make it work in Chrome, can you help me with a hint? I have a cube with only side pages (without top and bottom) - so I have 4 pages and I rotate them for 90 degrees left and right. Here is the the LIVE example (everything is in a page - libraries are taken from CDN, CSS is inline, no images): http://www.cloomo.com/problem How to simulate the error: Start Google Chrome and go to http://www.cloomo.com/problem Go to the Page 3 (it has green background) and you will see that links "Back 2" and "Page 4" are not working and their text can not even beselected with a mouse. You can come to Page 3 by clicking on "Page 2" > "Page 3" or "Left" > "Left" Can you help me to make these links clickable? Is there an error in CSS styles or in GreeSock library? I can not find it. Another question: Is it possible to make it more smooth? Thanks Alex
  18. I've little experience with HTML5 and Javascript. I've only built sites with templates, and I'm attempting my first project that really requires a site built from scratch. I want to use knobs to sort images based on the knob setting, so I've got the draggable knob up and running, now I'm wondering how to even search this forum for answers on how to capture the knob's new position as a variable I can use to sort some images. I've got some examples of image sorts by tab pushes, so what I'd like to do is capture the knob's position after the user rotates it, set a variable and when the user presses sort, insert the variable value to duplicate the effect of a tab push. I'd appreciate any links to tutorials or documentation I can read that is specifically about this kind of task. Best, Marc
  19. Its quite easy to do a diagonal rotation in CSS. http://codepen.io/moorthyrweb/pen/jEayJL But, using GSAP how can I achieve the same?
  20. I cant for the life of me get a simple 3d rotation working in iOS Safari right now. It works from the Codepen for me, but not with all the same code in a simple html file (attached). This tells me I am probably doing something dumb. But basically it works correctly from desktop, but from my phone the rotated div disappears as it rotates. Please help. http://codepen.io/anon/pen/raYMwR index.html
  21. Is transformOrigin supported in IE9? If not, is there a work around? Strangely enough I don't have an issue with this in IE 8. Box 2 is supposed to rotate from the top but doesn't seem to do this in IE9. Thanks in advance. Any suggestion is much appreciated.
  22. Hi, rotation, rotationX, rotationY, skewX, skewY attributes aren't working when I use negative number after '+=' please check the attached pen. There is no problem when I use x, y, or scale parameters. Are you planing to add '*=' and '/=' support? I think it would be great for scale attribute...
  23. Hi, I have a problem with transformations in Chrome (webkit browsers). I would like to store the states of the elements in CSS classes and tween the elements from one state to other by class names. In the codepen example I rotate the red box three times, with different methods. All of it works perfectly in other browsers, but in Chrome the first tween is scaling instead of rotating. When I inspect the element I can see that in the first tween the browser use the -webkit-transform with a matrix, and the other two tweens use transform, with matrix3d. What's the solution? Thanks for the help!
  24. Hi all, It seems the default value for transformOrigin has changed (but not the documentation). It broke some of my older animations that expected the origin in the center. While TweenMax 1.11.8 was fine, my animated bicycle was shattered all over the screen with version 1.15 (or gsap/latest). I thought I'd let you know
  25. I have another question, and it might be something I'm doing wrong - but my on-load rotation works perfectly in chrome and safari, but does not work in Firefox. My on-click rotation works in all three. Is there a known firefox issue? Or do I need to use a different syntax to run the animation on page load in all browsers? Thanks!
×