Jump to content

Search the Community

Showing results for tags 'position'.

More search options

  • Search By Tags

    Type tags separated by commas.
  • Search By Author

Content Type


  • HTML5 / JS
    • GSAP
    • Banner Animation
    • Jobs & Freelance
  • Flash / ActionScript Archive
    • GSAP (Flash)
    • Loading (Flash)
    • TransformManager (Flash)

Product Groups

  • Club GreenSock
  • TransformManager


There are no results to display.

Find results in...

Find results that contain...

Date Created

  • Start


Last Updated

  • Start


Filter by number of...


  • Start





Website URL







Found 29 results

  1. I'm trying to move paths created in a Illustrator to a given position. In the codePen, I move the group, then morph the balloon and move the stars. The 2 targets are positioned at 100,300 and 300,300 (in pixels) in Illustrator. I've tried a variety of techniques but none seem to work...
  2. Hey everyone, I have recreated the card animation from the iOS app store, but having problems with the positioning when wrapping multiple cards on to one line. In the attached pen, when the user clicks a card, the card should expand to the whole screen and at the same time reposition to the top of the viewport. The animation works great for the first card in each row, but every card after that in a row will not travel to the top of the viewport and stops about halfway up the page. Anyone have any suggestions on how to correct this unwanted behavior?
  3. Hi, I've created a TimelineMax instance with a series of child TweenMax animations. I need to play the timeline backward and forward to transition between two states. This works great. When executing a reverse() only, I want some of the child animations to have lower position values, to speed up the animation as a whole. I keep references to the ones I want to target, and then use remove() to strip them from the timeline, before then re-adding them for the reverse(), with revised values. I've scoured the forum for an answer and have read much about how changing child tweens does not affect the overall duration of a timeline (which, when you alter / remove child tweens somewhere in the middle, makes sense) but in this case, the tweens I want to remove are the last ones in the timeline. Before I re-add them, is there a way to force the timeline to recalculate its duration, so that when they are re-added, they are appended after the last child. As it stands now, there is 'dead space' on the timeline where the tweens were, and so, when re-adding them, there is a long pause before they are played. The pause gets longer with each play() and reverse() (and remove() and add() as the total duration grows and grows.
  4. Hey guys, I am new to all of this and trying really hard to create a banner where 3 lines of text stagger in ( from left to right ) then bounce and then slowly fade out. Would also love the option to repeat this every so many seconds. I have explored the repeat -1 option, but cannot find the option to repeat an action every so many second. Question: How can i fade out from where the animation last ended? Thank you guys in advance and Gsap is Awesome!
  5. I'd like to have a dynamic duration for a tween. Example: A button animates and builds itself up. Then the text animates. While the text animates I want the button to scale just a tiny bit. The scale should exactly end when the text animation is complete. During development the timing of the text animation changes extremely often and differs dramatically. Remembering to set the scale duration by hand is annoying and unnecessary distraction. Calculating the timings of all the parts building the text animation is even more annoying. I'd love the scale-animation to have a dynamic duration alá "until end of text animation" or "until end of whole timeline" or even better "until label XY" If this isn't possible, which I fear is the case, how do you tackle timings of longer animations parallel to a queue of smaller pieces that should end together? Thank you!
  6. Playing with the machine gun text effect from http://codepen.io/mfgpker/pen/cmiue?editors=1010 I need to be able to export these frames as PNG images but running into some trouble because of the way foreignObjects are seen I suppose. The original version of the machine gun text animation used jquery to create and address elements and, though the text was visible in the resulting PNG exports, the positioning information was completely ignored - even though the animation runs fine in the browser. So, I decided to go to great pains to namespace everything in case that was the issue. The animation works fine, but now, the exported images don't show the text at all. The other thing I wondered was if I needed to move the styles into the SVG or the foreignObject but that hasn't solved the real problem. I'm pretty sure it has to do with the way XMLSerializer is seeing or processing the data from the master SVG so I've been scouring the Internet to see if anyone else might have encountered this issue. Coming up dry. Is there anything I can do with GSAP's animation settings to circumvent what's happening in a way XMLSerializer would be able to process accurately?
  7. Hi Guys, I'm trying to achieve something that probably is very simple but I think i surely missing something. So let's say I have a draggable in the position x:800 y: 200 Now I drag it to the position x:500 y:100, and after releasing the draggable, and from this point onward, I want to make the origin of the draggable this last position. So all the transformations would be applied from this last position. I hope my explanation makes sense . Is there a simple way of achieving this? Thanks.
  8. If i repeat timeline comand tl.from(head, 0.5, {left:100}); it will repeat objects movement stating from position defined in css. Is it possible to move same object several times from previous position? So instead of tl.from(head, 0.5, {left:100}); - 100px tl.from(head, 0.5, {left:200}); - 100px tl.from(head, 0.5, {left:300}); - 100px it would be tl.from(head, 0.5, {left:100}); - 100px tl.from(head, 0.5, {left:100}); - 100px tl.from(head, 0.5, {left:100}); - 100px
  9. I'm using Draggable to give a few elements the option to be dragged around the viewport. I have a function that I'm calling later on that needs the position (x,y) of these dragged items. Is it possible to get the x and y values of those dragged elements? OffsetTop is not working due to the 3d translates.
  10. Hello, I'm expanding on a pen I already posted a couple of days ago, and trying to figure out ways to write a cleaner timeline. The whole thing will be a sequence of images, or slides, always fading to the next. In the example there are 3, but they might as well be 100. For the basic behaviour, fading in and out, I have this: $.each($('.slide'), function(i) { tl.add([ TweenMax.to($('.slide-' + (i+1)), 1, { opacity: 0, immediateRender: false }), TweenMax.to($('.slide-' + (i+2)), 1, { opacity: 1, immediateRender: false }) ], '+=1'); tl.add('slide' + (i+1)); }); }); Notice that I'm also adding a label after each step. At this point, I would like to add variations at specific point. For example, after the slide-2 animation is complete, I want something to happen before proceeding to slide-3. I thought I could simply add a new Tween to the timeline, using the label as a position marker, like this: tl.add(TweenMax.to('.slide-4', 1, {opacity: .5}), 'slide2+=1'); What I'm expecting, is to see the slide-4 to appear after the 2, but instead it seems to ignore the position parameter. Am I again missing something about the position or my approach is totally wrong?
  11. Hi Greensocks, after reading tons of topics on the subject of animating svg I did not find an answer that works properly for my goal. Now I desperately need your help: Elements inside my svg are scaled to 2.8 by click. After that I need them to be centered inside the viewbox. Scaling works fine, centering does not. Do you have any suggestions? Cheers Gregor
  12. Hello, I'm trying to make an animation where at some point there's a sequence of images, one on top of each other, with each image just disappearing to show the one right below. They are absolute positioned and I'm controlling their appearance by simply tweening their opacity. Since I don't want a fade effect, I thought I would set the duration to 0. But this way it seems to ignore the position parameter I set. In the pen I created, I'm expecting to see the number 1, first. And after 1 second of scrolling down, the number 2. Instead, it appears directly the number 2 and the weird thing is that if I scroll back, it actually appears the number 1. Setting both duration to 1 make it actually to work, but I don't get what the issue is. Am I missing something about position and duration?
  13. Hi everyone, I recreated a codepen that replicate more or less my problem (for using that click somewhere in the white area) I'm trying to achieve something like the one you can see. I need to open a "fixed popup" that everytime change it's initial position. If you try the pen everything works fine for the only first click but if you try to click again you can see that the "modal" still opening from the position you clicked the first time. Can anyone explain whats is going on? ps: I added a delay so you can see clearly what's is going on. Thanks eveyone!
  14. Hey guys, I am totally new to GSAP (I just started using it last night), not to mention a junior developer in general. I want to animate some elements on a page to move accross the page and fade out, all with the same class. The part I am confused about though, is that in order for the elements to move they must be given a position property of absolute or fixed. (At least that's what the greensock tutorial said I had to do). When I apply this position property to the elements with the class I want to animate, they all stack on top of each other in the same place. How do I keep the elements from starting and ending at the same place in the window with this css property applied?
  15. 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?
  16. 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 });
  17. 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.
  18. I can get position values during a drag (using Draggable). But can I get position values during a Throw (using throwProps)?
  19. 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
  20. 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>
  21. 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
  22. 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?
  23. 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!
  24. 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.