Jump to content
GreenSock

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

Search the Community

Showing results for tags 'position'.

  • 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. 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.
  2. 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!
  3. 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>
  4. 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.
  5. 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.
×