Search the Community
Showing results for tags 'position'.
Found 39 results
-
Hi. I have trouble with Safari browser positioning of elements with TweenMax x and y. In all browsers car at this position: But in Safari car at the another position: Code: TweenMax.to("#car", 0.1, {x: 530, y: 262, scale: 0.6, transformOrigin: "50% 50%"}); How to fix it?
-
Hi, im working in this Bezier animation: TweenMax.to(myFish, 5, {bezier:{curviness:2.1, values:[{x:0, y:-100},{x:150, y:-200},{x:0, y:-400},{x:-100, y:-500},{x:0, y:-700},{x:0, y:-900}],autoRotate:["x","y","rotation",90,false]}, ease:Power1.easeInOut}); What i want to do is the next: I'm trying to simulate a fish swimming, everything is ok, but when the user do "touchstart" on the fish, this action will kill the tween but also I want to make this draggable, so I'm not sure if this could be, because I suppose I need the current position (top,left) to start the drag stuff. so.. any ideas? thanks a lot. I'm thinking.. $myContainer.append(target); Draggable.create(target,{ type:"top,left", bounds: $myContainer }); var tween = TweenMax.to(target, 10, {bezier:{curviness:2.1, values:[{x:0, y:-100},{x:150, y:-200},{x:0, y:-400},{x:-100, y:-500},{x:0, y:-700},{x:0, y:-900}],autoRotate:["x","y","rotation",90,false]}, ease:Power1.easeInOut}); target.on("touchstart", function() { tween.kill(); //then start dragging });
-
Hi All, Is there a way to make a smooth transition when changing from position absolute to position relative. You can see the jump in the demo.
-
I can get position values during a drag (using Draggable). But can I get position values during a Throw (using throwProps)?
-
Hi guys, I have recreated the problem as the title states. I have a div that has a zoom and a Draggable item inside it. On zoom = 1 everything works great but if you change the zoom the Draggable position is out. While using jQuery-UI Draggable I was able to fix the issue by the following code: var zoom = $("#main").css("zoom"); $('svg').draggable({ drag: function(evt,ui) { // zoom fix ui.position.top = Math.round(ui.position.top / zoom); ui.position.left = Math.round(ui.position.left / zoom); } }); As the x and y properties on the Draggable object are [read-only] how can this be done to fix position with GSAP Draggable? Will appreciate some help. Cheers, Praney
-
Hello! 1) div moves to 200 pixels to the right and takes the position 300px - it's ok 2) and next div moves to 50 pixels to the left - why? I thought it was specified the absolute position (left:50px) And how I can move the block to the absolute position (left:50px) at the second tween (if the first tween use "x:..." ) var logo = document.getElementById("elem"); new TweenMax(logo, 2, {x:200}); new TweenMax(logo, 2, {css:{left:"50px"}}).delay(2); ...... <div style="left: 100px; top: 100px; position:absolute;" id="elem">blablabla</div>
-
Hello, I'm facing performance issues when tweening SVG <image> elements x and y position. I'm animating using the attr x and y value. The performance is great on IE,FF and Safari, but very bad on Chrome. Does anyone have a cross browser solution or an explanation why this happends? Thanks! Jonas
-
Hi everyone. Just wondering, if It is possible something like: Draggable.create("#myObject", {type:"xPercent,yPercent"}); or Draggable.create("#myObject", {type:"leftPercent, topPercent"}); Simply said, my goal in both cases is a percentage output. Is this possible with current version of GreenSock Draggable?
-
Hi, I'm very new to greensock, but just getting my head around it. I have created my first simple animation using TimelineLite. Everything is working although I can't seem to make animations overlap properly. I am using a position value but it doesn't seem to work with "-=X" or "+=X" I have to enter "+X" or "-X" for it to do anything. And then when it does work I have to calculate from the beginning of the timeline as it doesn't work using the previous animation. <script> window.onload = function() { var tl = new TimelineLite(); var bgMain = document.getElementById("bgMain"); var worldvision = document.getElementById("worldvision"); var darkarea = document.getElementById("darkarea"); var text1 = document.getElementById("text1"); var text2 = document.getElementById("text2"); var text3 = document.getElementById("text3"); var donate = document.getElementById("donate"); tl.from(worldvision, 1, {css:{bottom:"-70px"}}) .from(bgMain, 1, {css:{width:"350px", height:"275px"}}, "+0.2") .from(darkarea, 1, {css:{opacity:"0"}}) .from(text1, 2, {css:{opacity:"0"}}) .to(text1, 2, {css:{opacity:"0"}}) .from(text2, 2, {css:{opacity:"0"}}, "+5.4") I would like this to start just before the last one finishes but I have to calculate all the way from the beginning of the timeline. .from(text3, 1, {css:{opacity:"0"}}) .from(donate, 1, {css:{opacity:"0"}}) } </script> Any guidance would be great thanks!
-
I'd like to have some table cells animate from their automatically laid out relative position, to certain designated absolute positions to highlight them, and then have them return to their position in the table. In particular I have a Gantt chart with three selectable cells which I would like to tween from its initial... {top:"0%",left:"0%",width:"auto",height:"auto",position:"relative"} {top:"0%",left:"0%",width:"auto",height:"auto",position:"relative"} {top:"0%",left:"0%",width:"auto",height:"auto",position:"relative"} to a temporary... {top:"0%",left:"0%",width:"100%",height:"33%",position:"absolute"} {top:"33%",left:"0%",width:"100%",height:"33%",position:"absolute"} {top:"66%",left:"0%",width:"100%",height:"33%",position:"absolute"} ...and then tween them back to their initial relative values again. Is there a Greensock way of doing this? If I use a regular to(...) tween with the values above, the 'position' value is toggled monolithically to 'absolute', with the top and left set to 0 so the cells jump to the top left corner immediately, then tween their location and width from there, rather than tweening smoothly from their initial (relative) location. There's probably a workaround, involving JQuery calculating the starting positions for the tween from the rendering engine, but perhaps someone has an elegant way of doing this, as I'm sure I'm not the only one who needs the behaviour.
-
Hi there, I read this forum front to back and can't find a solution for my problem. We're using the TweenMax pack on a animation and it works amazingly on Chrome, FF and Safari, as you would expect. Even IE9+ is a doozie and we're not having problems with that. HOWEVER, IE8 insists in not playing ball. So after a lot of debugging and fiddling around, I have two questions for you. 1) I notice that a few of the animations use "filter:progid:DXImageTransform.Microsoft.Matrix" while other will use use margin to move things around. Why's that? I can't find a pattern why TweenMax. The animations that use "filter" work fine. But... 2) The animations using margin don't. If I use "TweenMax.to" it disregards the current position of the element and starts from 0x0. The "from" values below are also disregarded and the animation starts from 0x0. TweenMax.fromTo(_cloud_small, 4.6, {css:{x:600}}, {css:{y:120, x:200}}); We've tried changing 'x' and 'y' to 'left' and 'top' and a whole bunch other things, but nothing seems to work. It is as if on onStart the the object's margin is set to 0 and the animation starts from there. Why, I ask you, WHY? I've spent a few hours on this now, and I can't understand the reason. Any clues will be most appreciated! Hug of the bear and thanks!
-
Hello, I have an element whose opacity is being changed based on scroll position. No problem there. When the element is in the scroll range, I want it to loop an animation only while within the scroll position range. The looping the animation part is what I'm having trouble with. I tried calling a function, using onComplete, etc. Here is the timeline: var tlwhoweareGreen = new TimelineMax({paused:true}); tlwhoweareGreen.append( TweenLite.to($("div#whoweare-green"), 1, {css:{opacity:1, autoAlpha:1}}) ); /*I've been trying to append the timeline or call a function here. Once the opacity has been set to 1, I want it to loop back to zero and back to one, infinitely until the the user has scrolled outside the range*/ Here is the scroll function: $(window).scroll(function() { var getVert = $(this).scrollTop(); console.log(getVert); var getHor = $(this).scrollLeft(); function scrollTween(startPoint, endPoint, tweenName, type) { var progressNumber; if(type == 'vertical') { progressNumber = (1 / (endPoint - startPoint)) * (getVert - startPoint); } else if (type == 'horizontal') { progressNumber = (1 / (endPoint - startPoint)) * (getHor - startPoint); } if (progressNumber >= 0 && progressNumber <= 1) { tweenName.progress(progressNumber); } else if(progressNumber < 0) { tweenName.progress(0); } else if(progressNumber > 1) { tweenName.progress(1); } } scrollTween(400, 800, tlwhoweareGreen, 'vertical'); $("div#whoweare-green").css("display", "block"); }); }); </script>
-
Hey! First of all, this isn't an animation or tween problem but as there is no other Javascript section, I'm posting it here. Also I'm not entirely sure that it is caused by TweenLite but it is happening in my TweenLite line of code. I have an image and I want to generate a reflection effect for it so I duplicated the image, mirrored it and reduced the opacity through TweenLite (makes it so much easier!). In all browsers I have tested it so far it works fine (including IE7) but in Chrome it's behaving weird. The reflecting image is at the bottom of my page and should partially exceed the bottom border of the DIV it is in. What Chrome does is that the image itself does not go further down than the border of the content div but the canvas or area of the image does go down. This results in clipping the image. This could be an issue with the css I'm applying with the TweenLite line or it could be the way TweenLite handles it. If I comment out the line with where the TweenLite css is set, it gets positioned over the border just fine, but obviously without the right css attributes. Here is the Jsfiddle: http://jsfiddle.net/qTE2m/ here are screenshots of what I mean: Chrome: http://puu.sh/1xI15 FireFox: http://puu.sh/1xI24 The black line at the bottom is the border of the div the image is in.
-
Hello. This is my first post. And I believe this is a noob question, in fact. I have a tween that has a bezier effect on it and I want it to receive the "y" position through a variable. Something like this: var myTween: TweenLite = new TweenLite(my_mc, 2, {y: myVar + 43 , ease:Bounce.easeOut, onComplete: myFunction}); Is there a simple way to pass this value? Thx in advance.
