Search the Community
Showing results for tags 'absolute'.
Found 6 results
-
Hi. I am starting to go mad trying to resolve this, so I thought I would post a question here instead. I am try to implement a rotation such that everything on the page view box (the outermost group -- depicted by the purple outline) rotates about its pre-defined origin point (shown by the cross - located at 50% 50% of view port in this case, but could be anywhere). At present the resultant rotation is relative to the compound contents of the Group (i.e. all the House elements) -- spinning around itself , whereas I need it to be relative to the parent view box -- effectively spinning around a fixed point on the page. So... the outer Group element ('street' in my codepen example) needs to behave like a parent-filler rather than a child-wrapper, with the origin offsets relative to the parents offset and dimensions. Note: The content items can be arbitrary i.e. multiple houses, cars etc. (set by a user), and the content may also exceed the bounds of the purple view box. None of these factors should affect the pre-defined rotation origin of the 'street'. (start) (desired @ 90 deg)
-
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?
-
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
-
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? -
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>
-
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.
