Jump to content

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

Search the Community

Showing results for tags 'width'.

  • 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 22 results

  1. Hello! Is there an easy way to make the width of a span expand to like 500px and then collapse to 0, within a few seconds? Here is what I have so far: gsap.to('.block', {duration: 1, width: 500}, 0.2); I know when using keyframes it would be something like this: @-webkit-keyframes block { 0% { width: 0px } 100% { width: 500px } } Thank you!
  2. I have a simple svg with a rect box inside. I want to change the width of this rect in such a way that it changes from the centre of the rect, like a scaleX would work with transform-origin center. Currently, reducing the width contracts it from the right side. I need to change with width in order to maintain fidelity otherwise I'd use scale. Is there a way to get this to work? Would I have to play around with the x attribute? Thanks.
  3. 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
  4. I don't know if this is a bug or there's a lacking on my understanding how SCROLLTRIGGER pinning works. Cause apparently, I'm having this annoying issue of page width increment (to 100%) when pinning the section. So basically, the problem is the second I set the width to 100vw. So, whenever I reach the SCROLLTRIGGER start, and it pins, it just expands the whole section to the rest of the horizontal space of the window (there is somehow additional widths, even though I never set anything exceeding 100vh 🙄). Please, help me and every other people who are facing the same issue us
  5. I'm using scrollTrigger to scale the svg used in clip path but the page width is slightly greater than 100vw and height also seem to be a bit more as my center component also scroll a bit up at the end but however when i set markers to true this problem is magically gone and im scratching my head to find a reason for this behaviour can someone help my understand this issue better #EDIT: This was because the initial page (without ScrollTrigger) has no scroll so when ScrollTrigger adds scroll to the page. I.e. Say your page is 1830px initially but then ScrollTrigger puts a 17px scrol
  6. Hello all, I am new to GSAP and am trying to understand what goes on under the hood. How to reproduce the issue: 1. Click the "Reduce Container" button. 2. Click the "Toggle LeftPane / Reverse Animation" button. Upon click the "Toggle LeftPane / Reverse Animation" button, you see a noticeable hop in the animation. Why is this? Expected results: After clicking the "Toggle LeftPane / Reverse Animation" button and reducing the left pane down to 200px, reversing the animation should bring the left and right pane split back to a 50/50 (100% widt
  7. 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. Pl
  8. 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: TweenMax.to('#cloud', 5, { x:"20%", ease:Power1.easeInOut, yoyo: true, repeat:-1 });
  9. 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!
  10. 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
  11. 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(){ TweenMax.to(cortana_blurb, .15, {width: 34, ease:Linear.easeNone}), .4; TweenMax.to(cortana_blurb, .15, {width:64, ease:Linear.easeNone, delay:.4 }); TweenMax.to(cortana_blurb, .15, {width:111, ease:Linear.easeNone, delay:.8 }); TweenMax.to(cortana_blurb, .15, {width:144, ease:Linear.easeNone, delay:1.2 }); TweenMax.
  12. 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
  13. 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? Ca
  14. 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
  15. 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
  16. 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 sugg
  17. 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 = TweenMax.to('.arrow-test', 2, { bezier:[ {left:100, top:250, alpha: 0}, {left:300, top:0, alpha: 0.5}, {left:500, t
  18. 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(){ TweenMax.to($(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 scal
  19. 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...
  20. 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([ bgTween.to(jQuery(targetSelector),animationTime ,{backgroundColor:'#454545', onComplete: resetCSS}), bar
  21. Hello, i have already asked this question in the following thread: http://forums.greensock.com/topic/6964-constrain-scaling-to-avoid-mirror-efects/ 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.
  22. 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