Search the Community

Showing results for tags 'width'.

More search options

  • Search By Tags

    Type tags separated by commas.
  • Search By Author

Content Type


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


  • HTML5 / JS
    • Public
    • "Simply Green" Package
    • "Shockingly Green" Package
    • "Business Green" Package
  • Flash
    • AS3
    • AS2

Found 17 results

  1. Animate width from left to right

    I'm trying to animate a div (mask) from left to right using width, keeping the text static. I have tried to achieve this using transformOrigin & marginLeft Any other suggestions welcome Thanks
  2. border width after reverse problem

    Hello, i have 1 element. He must grow in width, height and border, and he do this. But have problem after when i did reverse (i showed two case) 1-case(icon-cursor-1): When click start and after complete animation click reverse() (after complete animation reverse) and again click start we see: border width jumping 2-case(icon-cursor-2): When click start and after complete animation click reverse() (after complete animation reverse) , he don't return primary value for border width (default border width 3px) P.S. if i write position 0(=0.75) for tweens, he return true value. Please help understand what i doing wrong, and how this work ? Sorry for my English =)
  3. Hi, I am creating a responsive animation where there's an image on the background and some elements of it are animated. For example, I would like to move a cloud 20% of the screen width, but with the code that I have, it's moving it but of a 20% of the cloud width. Does anyone know how to do it of the screen width instead of the cloud width? This is my code:'#cloud', 5, { x:"20%", ease:Power1.easeInOut, yoyo: true, repeat:-1 });
  4. Hello, Animation which I try to do, works well with computers or iPhone, but if it fires on Android it can munch, unfortunately, is not smooth. Maybe someone is able to help me in what I was doing wrong and how to improve? The code is a mess, but this is the first time I try to move animations from CSS to JS. The alpha version for phones was not very smooth and able to "trim". After using GSAP is much better, but it seems to me that it might be better. In addition, some questions (GSAP, JS, CSS): 1) The problem with the grid. I can not set the width (50%) plus a margin? The elements are in absolute position, otherwise when opening the remaining contents can jump. If I use the width: calc () animation can behave strangely. I tried to change position relative to the absolute (in animation), but without success. In the version of the tablet / desktop grid of 100% is replaced by 50% in 2 rows. 2) FadeOut flashes. I'm not sure what causes this? It seemed to me that zIndex, but probably not? 3) I do not know how to get 100% of the width div before animation? now the value entered is rigidly spoil responsiveness (width: '375.5px' or width '457.5px') 4) Literature, which will allow me to expand my knowledge? I know that's a lot, but maybe someone will help me? Sorry for bad english. Regards Links:
  5. Hi there, I'm wondering if is possible to load an animation with different width and a small delay each time the width gets bigger. For example: This is the original code: The css for the <div cortana_blurb> is set to width: 0; MU.showBlurb = function(){, .15, {width: 34, ease:Linear.easeNone}), .4;, .15, {width:64, ease:Linear.easeNone, delay:.4 });, .15, {width:111, ease:Linear.easeNone, delay:.8 });, .15, {width:144, ease:Linear.easeNone, delay:1.2 });, .15, {width:204, ease:Linear.easeNone, delay:1.6 }); } What I want is to minimize it to one line code like: MU.showBlurb = function(){, .15, {width: 34, 64, 111, 144, 204, ease:Linear.easeNone}), .4; } I know it's a trick one, but if there is a way to do it and you guy could help me it will be great. Kind regards, Fernando Fas
  6. I'm basically a noob, but this should be easy and I'm suffering from two days of head-bashing. I'm trying to loop through an array of text values in absolutely positioned elements. The start and return tween positions are based on the width of the elements, which of course change when the text within them changes. I'm using TimelineMax and addCallback to change the text. But I can't figure out how to get the updated element width back into the tween. See attached Codepen -- the element to the right of the red text should bounce back to the right edge of the new text, not the old text. I'm sure I'm missing something basic... BTW the red text has to have a fixed position, so floats and relative positioning is out...unless I missed something there too. Thanks for any pointers...Vanadu
  7. TransformOrigin on Height transform?

    Hi there. This seems rather simple but actually might not be as a simple of a solution as I was hoping for. I'm trying to transform the height of a div: #mountain { position: absolute; top: 175px; left: 18px; width:123px; height:46px; background-image:url(mountain.png); } Using this GSAP TweenMax.from('#mountain', .5, {height:0, transformOrigin:"bottom"}); On <div id="mountain"></div> However it does transforms the height, it scales the div from the top down regardless of the transformOrigin setting. What am I missing? I suspect transformOrigin does not cover height? Can you suggest a workaround for what I'm trying to accomplish? Thanks.
  8. Hello, I made a codepen page to illustrate my issue. Basically, I have a black box that tweens its' width and height properties, then tweens down Y 150px and tweens its' width and height again. However, when I resize the page, I need to change the Y and width and height coordinates. How can I do this when it's written in the script? Can I save the coordinates as variables and somehow change them when the browser resizes? Thanks!
  9. I'm trying to figure out why my right column doesn't expand properly when "hide" button is clicked. Both left and right columns are floating left; left column ranges from 20% width to 0 %; right column ranges from 80% width to 100% respectively. Looks great when "show" is clicked, but there seems to be a floating/width issue when "hide" is clicked. This seems like it should be simple, but I can't figure out what I'm doing wrong... Thanks a trillion. BC
  10. Hi, I am having an issue animating/tweening the width of a rect element within an SVG. When using scaleX with a percentage value, the rect animated perfectly, however the SVG stroke scales with the box, which is not ideal, I would also prefer to specify a specific value as opposed to a percentage. When using width with a pixel value (without appending "px"), the rect does not animate. If you inspect the element you will notice the animation being applied to the correct element, however the value being applied to the rect is specified in pixels with the "px" appended, which is not a value SVG elements recognise/respond to. I hope my explanation makes sense. If anyone can shed some light on this it would be greatly appreciated. Thank you.
  11. Sliding effect on "mouseover"

    Hello everyone, I'm struggling to achieve the following sliding effect : When my mouse is over a box, I want that box to appear with a sliding effect. Right now I'm using TimelineLite, animating the "width" from 0 to 100px, as shown in the Jump start guide. The problem is I can't have the mouse over a 0px box... It works when I include this box in a div, I can now have the mouse over the div. BUT as soon as the box appears at 100px, the mouse isn't anymore over the div but over the box, resulting in an unwanted mouse out, looping the animation... Does anyone have got some suggestions to achieve this effect properly ? Thanks a lot !
  12. I just started to get into using the TweenMax JS animation library, and I have to say that it is pretty sweet. I've gone through and started doing test, and such, and tested the bezier plugin ,which is pretty awesome in itself. My question with the bezier plugin is whether or not it would handle responsive design, such as when the user rescales down their browser window? Currently I have this tween, that is set to animate when the item comes into view. var atween ='.arrow-test', 2, { bezier:[ {left:100, top:250, alpha: 0}, {left:300, top:0, alpha: 0.5}, {left:500, top:400, alpha:1} ], ease:Power1.easeInOut, paused: true }); My CSS is as follows: .arrow-test-wrapper { position: relative; } .arrow-test { position: relative; top: 0; left: 0; } Does animating on bezier curves support responsive design? Or is there something that I am missing in my code? Thanks!
  13. Hello, Im trying to find away to infinitely scale an image. The only way i can think of is using a recursive function. I tried to use 'repeat: -1, but it just restarts the tween from the beginning value of the css property. start(); function start(){$(img), 4, { css:{ scale:'+=0.5' }, ease: Power0.easeInOut, onComplete: function(){ start(); } }); } I was wondering if there is a better way using TweenMax or TimelineMax to infinitely scale an image? Either using (transform) scale or width and height (css or dom). Basically I want to keep animating the value up, infinitely. By incrementing up, infinitely. Any help will be highly appreciated! Thank You!
  14. Get width after scale

    Hi, How can I get the actual width of an element after scaling it with Tweenmax? Example: $('#myDiv').width(100); // Sets width of #myDiv to 100; TweenMax.set($('#myDiv'), {scale:1.2}); console.log($('#myDiv').width()); // gives 100 instead of 120 How can I get the actual width of the div? Thanks a lot in advance, this thing is frustrating me and breaking my head today...
  15. var tm = new TimelineMax(); var bgTween = new TweenMax(); var barWidthTween = new TweenMax(); var groupCount = 4; var clickCount = 0; var animationTime = 5; // seconds var targetSelector = '#statusBar'; var splitTime = animationTime / groupCount; //1.25 second jQuery('#target').click(function(){ clickCount++; // this will basically eval to 25%, 50%, 75% & 100% var animWidth = ((100/groupCount)*clickCount); switch( clickCount ){ case 1: tm.add([,animationTime ,{backgroundColor:'#454545', onComplete: resetCSS}),,splitTime ,{width:animWidth+"%", onComplete: pauseAnimation}) ],0,0); break; default: // presumes first click/case has already been met (this is the part thats not working) tm.append(, splitTime,{width:animWidth+"%", onComplete: pauseAnimation}) ); break; } }); Note: var "barWidthTween" has a callback after the 1.25 second execution to pause the whole timeline before the var "bgTween" has finished. [ it should still have another 3.75 sec's left ] "WHAT IM TRYING TO ACHIEVE" A colour bar that changes colour over a 5 second period, while that same bar increases in size on every click. "hense the need for the pause every 1.25 seconds" I need to be able to reverse this motion also which is why im not using multiple TimelineMax instances. I hope I've made my problem clear and if not, i'll try and add some clarity.
  16. Hello, i have already asked this question in the following thread: The solution was to set the minScaleX and minScaleY to 0 and that worked, but now I need to constrain the width and height of a transformItem, not the scale. So, i used the minWidth and minHeight properties of the item. At the beginning its seemed to work, however if I keep scaling beyond the min values, the item will eventually jump to negative scale values. I think its a bug but i don't know, any help will be greatly appreciated. Here a .fla that shows the problem: Thank you.
  17. Hello, I was looking in TransformItem class, I have minScale there, but i need somenthing like minDimensions method. There is a recomendation to implement this functionality. Thank you