Jump to content
GreenSock

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


Forums

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

Product Groups

  • Club GreenSock
  • TransformManager
  • Supercharge

Categories

  • FAQ

Categories

  • Examples
  • Showcase

Categories

  • Products
  • Plugins

Categories

  • Learning Center
  • Blog

Categories

  • ScrollTrigger Demos

Categories

There are no results to display.


Find results in...

Find results that contain...


Date Created

  • Start

    End


Last Updated

  • Start

    End


Filter by number of...

Joined

  • Start

    End


Group


Personal Website


Twitter


CodePen


Company Website


Location


Interests

Found 22 results

  1. 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 using this amazing library
  2. 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!
  3. 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.
  4. 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
  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 scroll bar on the page now your viewport is 1813px but the content is already painted according to 1830px to compensate this 17px extra width the page shows a horizontal scrollbar it can be solved by using body {overflow-y: scroll;} Using this will initially put a scrollbar does solving the issue alltogether What have i learned from this: The main cluprit of this was the pin-spacer div creater by scroll trigger I dont know why but it was wider than the viewport width (1830px compared to 1813px in my case) and at the bottom of the scroll something triggred some a change in trigger element style from. transform: translate3d(0px, 0px, 0px); left: 0px; top: 0.001px; margin: 0px; width: 1830px; height: 890px; padding: 0px; box-sizing: border-box; max-width: 1830px; max-height: 890px; position: fixed; to transform: translate3d(0px, 890.001px, 0px); left: 0px; top: 0px; margin: 0px; width: 1829.52px; height: 889.524px; padding: 0px; bottom: auto; right: auto; this didnt make any sense for me #Solution for this [Techincally just a workaround using css] Enable markers in gsap (because everything is fine when markers are enabled) then use this css rule to hide the markers div[class^="gsap-marker-"] { visibility: hidden; opacity: 0; }
  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% width to both panes). Why is this not the case?
  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. Please help understand what i doing wrong, and how this work ? Sorry for my English =)
  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 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: http://codepen.io/Ard/pen/rLmRwK http://codepen.io/Ard/full/rLmRwK/
  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.to(cortana_blurb, .15, {width:204, ease:Linear.easeNone, delay:1.6 }); } What I want is to minimize it to one line code like: MU.showBlurb = function(){ TweenMax.to(cortana_blurb, .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
  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 I'm missing something basic... http://codepen.io/vanadu/pen/dYmKBb 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
  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? Can you suggest a workaround for what I'm trying to accomplish? Thanks.
  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 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.
  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 suggestions to achieve this effect properly ? Thanks a lot !
  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, 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!
  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 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!
  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}), barWidthTween.to(jQuery(targetSelector),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( barWidthTween.to(jQuery(targetSelector), 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.
  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. Here a .fla that shows the problem: https://www.dropbox.com/s/wx6vtjho4vn0t9k/TransManager_MinWidthBug.fla Thank you.
  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
×