Jump to content
Search Community

Search the Community

Showing results for tags 'relative'.

  • Search By Tags

    Type tags separated by commas.
  • Search By Author

Content Type


  • GreenSock Forums
    • GSAP
    • Banner Animation
    • Jobs & Freelance
  • Flash / ActionScript Archive
    • GSAP (Flash)
    • Loading (Flash)
    • TransformManager (Flash)

Product Groups

  • Club GreenSock
  • TransformManager
  • Supercharge


There are no results to display.

Find results in...

Find results that contain...

Date Created

  • Start


Last Updated

  • Start


Filter by number of...


  • Start



Personal Website



Company Website



Found 14 results

  1. Hello everyone! First of all, thank you very much for this library. I love animations and also this library :). I'm having some problems animating backgroundPositionX because the library is not working the way i expect. I would like if someone could tell me if effectively is the correct behaviour or maybe im doing something wrong. In the case the library i working correctly i would appreciate a lot some workaround to archieve my objective. My objective is to animate a seamless wave pattern image with a constant movement. Then i will have a button that when clicked will add an "impulse" to the wave, and when the "impulse" ends, the wave should continue with the constant movement. My problem is with the first part. I expect this code gsap .timeline({ defaults: { ease: 'none' } }) .to('.wave', { backgroundPositionX: '+=150', duration: 2, repeat: -1 }); to do the "constant movement" part, but what i get is a repeated animation from 0px to 150px as you will see in the provided codepen. I think this is wrong because when i use the property "x", it works like i expect, adding the value "150" to the previous value. Thanks again and sorry for my english. If you don't understand something, just tell me so i will find another way to express it.
  2. So I am using relative values yPercent:"+=80" to move my 3 bubbles based on which the user chooses to reveal or not. They work fine sometimes but after playing around with it a bit, they start to act in strange ways, am I missing something in my method? If this is not clear or something I made too complicated please let me know! thanks for the help ;)
  3. I'm trying to tween an element that has a relative height and it sits inside a container with relative height using absolute positioning. The desired tween animation is to move the element from the bottom of the container until it reaches the center. I'm also using scrollmagic as this animation should only appear during scroll to this container. I tried a few ways first way: default css of the element is already absolute positioned to center, container { position: relative; } element { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); } get the height of the element and its container. Minus off the element height from the container height. divide result by *two pass this height as a parameter in tween created window resize function and update the heights and also refresh the scenes scene is updated but tween is not. The culpit here is Tween not refreshing the variables on resize. Second way: default css of the element is at the bottom of the container with bottom: 0; position is still absolute used a to tween with top: "50%", yPercent: -50 this doesn't put the element in the center it's not centered and it only moves slightly The culpit here is using bottom: 0; and that breaks the absolute centering. Without bottom zero it works but the element comes in from outside of the container. Is there a workaround to this? Please help. Thanks!
  4. I found a bug in the latest 1.19.1 where relative changes won't work anymore. See the next 2 jsfiddles. https://jsfiddle.net/ufnup8rx/ [Working 1.19.0] https://jsfiddle.net/ufnup8rx/1/ [Fail 1.19.1]
  5. 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
  6. Having problems scaling an element up and then back down to original value, if there is transform="matrix()" applied. The particular case of <use> element with transformation applied loses the transformation in the process of animation. Is there a way to respect original scale values in order to programmatically create this hover effect without the objects flipping? Thanks in advance!
  7. Hi all, I have a very specific situation, where the display objects have an original scaling factor NOT equal to 1 (for example, 0.5, or 0.3333). I am trying to achieve the effect of relative scaling on it. I am aware of the syntax of "+=" and "-=" for relative values. However, since this is scaling we are talking about, it might be a little different. Let me explain. For example, i want to scale the object by a factor of 4, that means i would like the object's dimensions to x4. So if the object is originally 50x50, it will be 200x200. Problem is, if the original scale factor is not 1, and instead is something, say, 0.5, then scale to 4 will in fact increase the object's dimension by 8 times, hence making it 400x400. In a more straightforward example, if i scale it to 1, the object will effectively scale up twice its current dimension to 100x100, where as logically, scaling by 1 should have no effect. i have thought of maybe using "*=", since we're dealing with factors and multiplications. but it doesn't seem to be a valid syntax, and it would also suffer problems when i'm trying to shrink the image back down to its original size. So i guess my question is, is it possible to scale relatively in my situation? Thank you for your help!
  8. I am currently working on a project where an animation along the line is implemented, i.e. a chosen SVG element (in this particular case a <g> ) is moved along a <path>. Previously, I have implemented this using Snap.SVG and it worked fine, however, having to also do some "morphing" on the elements, I decided to give MorphSVGPlugin a go to save resources. However, so far it has not been a smooth ride... Stepping through the code, I observe the following: 1. The object is rendered in a starting position (the correct starting position). 2. The line path is rendered (I used fill="blue" just to demonstrate the position of the line) - the starting point is supposed to be the top "corner", however, it is an invisible "looped" line. 2. The animation kicks in, and the object is instantly positioned somewhere else! This is the actual problem for me right now. 3. The object is animated along a correct curve! This makes me think that MorphSVGPlugin.pathDataToBezier method is working as intended and provides x-y array of movement points. However, TweenMax.to() method seems to disturb the intended starting point for the animation, I really can't put a finger on it right now. There is very little control I have over the artwork, which has been designed in AI and exported to SVG format. Hoping to find the resolution to this problem as soon as possible.
  9. Hello and thanks again for your product here! I have a swf in a folder on my server for ever client. I'd like each of those swfs to load a file in a common folder one level up. For exmple: fakeRootName\Client100\this.swf fakeRootName\Client101\this.swf fakeRootName\CommonXML\targetXML.xml How can i direct Loadermax to reach targetXML.xml?
  10. I have an object that is within scope of two tweens. I want to relatively tween a numeric property of this object in both tweens, however the tweens both seem to be making their own internal copy of the object during the tween and overwriting the object. Thus the resulting value of the object is equal to the value of the tween that finishes last and thus gets to overwrite the property the last. See my codepen for an example. How would I make these tweens compete against each other?
  11. 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.
  12. I'm attempting to tween a div to a relative position, however it seems to no longer be working using the same syntax that previously used to work. TweenMax.to( div, duration, { delay: delay, ease: Cubic.easeInOut, x: "100"}); Any ideas?
  13. I have successfully animated a backgroundPosition through TimelineLite to achieve a some animation. I am now trying to see if I can achieve this with one Tween. Here is what I need to do but its not working yet. var TL = TweenMax("#seqHolder", 1, {backgroundPosition:"-=300px 0", repeat:23, paused:true}); I want to have the background subtract 300px from its position every time the tween repeats. Any input would be greatly appreciated. Thanks.
  14. Hi all, TweenLite allows relative property tweening if the value is supplied as a string. When is this useful? Apart from the obvious like when you want to move an object offscreen you say "x:10000". But I would still prefer calculating the value absolutely. I simply can't see one real world application for relative tweening. Can anyone tell me if they used it? or where it would be good to use it? Maybe something like this? TweenLite.to(obj, {x: 50}); TweenLite.to(obj, {x: "10"}); // goes to 60 TweenLite.to(obj, {x: "-10"}); // goes back to 50 Is this a practical example or are there more? Thanks
  • Create New...