Jump to content
GreenSock

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

Search the Community

Showing results for tags 'scale'.

  • 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'm trying to get this tween to work with an eventListener, and it works fine if I pull it out of it, but as soon as it's back in the event listener, nothing happens. I've also tried doing it with jquery and using .play() and .pause() and I am getting the same issue. I also tried setting the event listener to the clippath itself, rather than the circle, and no joy. No idea what's wrong here! I'm working directly off this other codepen and it works fine there. http://codepen.io/rorytawn/pen/OVeWNB
  2. Both with Draggable and even without it, I can't get clear text when scaling. http://codepen.io/anon/pen/eNajXR
  3. Hi, I've been working long on the chart for the client yet I cannot solve the slow Firefox zoom problem. Here's the limited version of the SVG chart that exibits the problem: http://codepen.io/mattsrinc/pen/mJMRMX Now please try to click on the light blue areas (of the cow drawing shown). The neck and the part at the top are set to be zoomed (scale-d) two times while the bottom parts are set to zoom to three times larger. The (zoom) animation is slow and unusable on Firefox (when other parts are added, even in this limited version the slowness is noticable). Safari and Google Chrome are great - testing all this on MacBook Pro, Windows experience is similar. Because of the shaking text animations I have already scripted timelines to have text appear after the zoom ends. Is that because of the (known) scaling bug in the Firefox? I've tested different tricks mentioned in the forum (rotate by 0.01, z etc) yet it doesn't help. When I have explained the issue to the client I thought about simple changing the viewbox of the SVG e.g. having a final view a zoom by using SVG attributes and GreenSock somehow animated the tween (if it would not call scale command implementation). Dear community members, is there any workaround to get same fast animation like in Chrome and Safari? And no, no Flash please - never scripted it.
  4. Hello, I am trying to get a small scrollable body of text (the table of contents) to appear starting from under the button that is clicked to present the table of contents. Then I want the table of contents to disappear by a reverse animation back under the button when the user has selected a place in the table of contents. I have a solution that partially works, but if the user has scrolled to the bottom half of the table of contents, the tween to remove the table of contents is happening twice. Or maybe it is starting, getting interrupted by something, and then finishing. This is a 'single page' mobile app. So pages of text are being removed from the DOM when the TOC is shown, and added to the DOM when the TOC is removed. I don't know if I could fit the essential ingredients into a codepen, but these are the two tween calls that I am using. Show: TweenMax.fromTo(this.rootNode, 0.7, { css: {scale:0} }, { css: {scale:1, transformOrigin:"left top"}, ease:Power4.easeOut}); Hide: TweenMax.fromTo(this.rootNode, 0.7, { css: {scale:1} }, { css: {scale:0}}); Thanks for any help you can provide.
  5. Hi all, I've encountered a strange situation: when an item whose css position is set to 'fixed' is placed within another div that has been scaled using TweenMax, the fixed item is no longer fixed. Any ideas?... Thanks for the great work ! Elior
  6. Is it possibe to scale a div with TweenMax but I would like to maintain or reset the CSS top and left position? Below are a few failed attempts. It seems TweenMax always scales from the center point. TweenMax.fromTo('#div-name', 2, {scaleX:.5, scaleY:.5}, {css:{top:0, left:0}}); or TweenMax.to('#div-name', 2, {scaleX:.5, scaleY:.5}); $("#div-name").css({ top: '0px', left: '0px' }); The Codepen URL shows the red div scaling but not maintaining the top: 0 and left: 0 desired position.
  7. http://jsfiddle.net/nqdaj3cL/ Hello! I have a (maybe simple) problem with transforms and GSAP: I want to scale a centered object and modify its width but as you can see in the fiddle, the object isn't centered after the animation. It's because the translate(-50%, -50%) isn't honored anymore as GSAP keeps in memory the initial x and y values. But if I remove the matrix in the inspector and modify manually a transform : scale, it centers fine. What can I do in this case? Thank you!
  8. Hi, is there any way to disbale "translateZ(0)" hack in v1.15.0 ? Please check the codepen example in Chrome. When I use v1.14.2 it looks cool, but with v1.15.0 scale looks very blurry on webkit based browsers.
  9. Hi all, Recently switched to the JS environment, after working with Greensock for some months in Flash. I have a question: I've been working on a banner ad where a DIV is rotatated and scaled. It is a scale up of 20% over 4 seconds, causing FireFox to render the animation not very smoothly. Chrome works like a charm and Safari is having some problems too I guess (I couldn't watch it on IE yet...). I added a codepen, but have the feeling the effect is a little bit worse in my own file. Any ideas how this is caused? Is it the rotation combined with the scale? Thanks in advance!
  10. Hello and thanks for any help you can provide guys. Here´s my little issue: I have a map I need to zoom in/out this map. When zoomed in, users may drag it to see the details. Everything works, until I try to reset the map to it´s original scale/position. If I dragged the map, when the zoom out is selected, the scale goes right, but the position goes wrong. I want the position to be reset to the original values but it goes crazy if I made a drag of it. Also, as a plus....it is possible to make this zoom in, according to the user mouse click? Sorry for my grammar! Regards!
  11. I can't seem to figure out how I'd set the transform point so that I could have it scale from the right, bottom, etc. Thanks! - Lance
  12. Hi, in my current HTML5 project I need especially the scale and rotation skills from GSAP and one of the requirements is, that it have to run on IE8. Now I took notice that it doesn't works. I tested it at first in IE11 and emulating IE8 and after that I used an real IE8. In all other current browsers it works fine, include in IE11 and emulated IE9 and 10. The code, you can see in my codepen example isn't complex. What I made wrong or is it impossible in connection with IE8? Thanks for information to this problem. Best regards. Tilo
  13. Hey all, I was hoping someone could help with an issue I am having on tweening scale of a div that has a background image. The problem is that at the last moment the graphic snaps to this ugly blurred version. It looks good all up until that last moment. Does anyone have suggestions on how to handle or how to produce best experience? You can see super simple demo here(check view source, js/css is coded in html header): http://mistersaisho.com/rae/scaleTest/test.html They both have mousexover/mousexout listeners that adjust scale. Over it goes to 100% and out it goes to 80%. Top is effecting background-image and bottom is doing strait scale. I was thinking swapping with another image after the ween that would be at the smaller size though 100% however, I am trying to save as much k weight as possible. Thanks! **HAHAHAHA - I just got this error when submitting "Sorry, an error has occurred. Your topic contains the following suspected spam word, SExO" and it was because mousexover and mousexout(without x) were the issue
  14. I'm using GSAP's TweenMax to scale a div when a user clicks on a button. However, what I want to do is be able to get the current scale value and/or know how to increment the scale value by say 0.5. This is how I'm setting the scale when the button is click: TweenMax.to(mapContainer, 0.4, { scale: 1.3}); So scaled to 1.3 over 0.4 seconds. So what I'm wanting to do is when a user clicks on that button again, it will scale it by an extra 0.5 each time. I've also asked this on SO as well if you'd like to asnwer on there as well for the benefit of anyone looking aorund: http://stackoverflow.com/questions/24181307/how-to-get-scale-value-using-greensock-animation-platform-gsap Thanks!
  15. Example : http://codepen.io/anon/pen/dnuCJ?editors=001 Premise : We have a draggable grid that may be larger than the user's current viewport. When they start to drag, we are scaling the draggable area to fit in their viewport, and scaling back out when they are done. The Problem : Greensock draggable watches deltas in the pointer X / Y position to determine dragging. This means that... 1) On the initial scale the pointer becomes detached from the draggable element. 2) Pointer x/y deltas do not account for the scaled content, so it ends up feeling like there is a drag resistance when there is not. The more the content is scaled, the more exaggerated this becomes. Desired Outcome : 1) As the content scales, the x,y position of the draggable element is changed so that it remains underneath the pointer. 2) Pointer deltas are divided by scale so that there is no feeling of drag resistance. I've been exploring this but cannot come up with a good comprehensive solution, especially for the first problem. For the second point, I am actually able to set a negative dragResistance dragResistance = 1 - 1/scale but it feels awkward when the pointer is detached from the draggable element. Any sugestions are welcome! Thanks, Erin
  16. I've looked around this website and the internet at large for a little help, but I'm not sure I'm even searching for the correct thing. The problem I'm having is that the scale attribute, as it's applied inside a TweenMax.to( ), seems to stutter to the point of essentially skipping the animation to the final frame in IE9. Unfortunately the deployment environment I'm working with is Windows 7 with IE9 strictly, so my options are limited. I believe GSAP works fine in IE9 -- all of the animations work pretty much as expected on this website's showcase animations. Here's how I have my setup: 1. The page is framed by the Twitter Bootstrap Framework 2. Other scripts exist alongside GSAP: jQuery most notably. 3. The calls to TweenMax.to( ) are being made sequentially with a timed delay rather than being a part of a timeline. Most of the animations do not run over one another. Things I've tried: 1. Changing the scale value to "msTransform":"scale(1.4,1.4)" seems to have no effect -- no effect at all that is, scale no longer happens at all. I assume the value scale:1.4 makes the call to the proprietary values anyway. 2. Removing and manipulating animations around this one to isolate it as the singular animation. This exact effect was also happening with a translation when using x and y but was corrected by using left and top. Not sure if that helps determine what I might be doing wrong. I have a feeling it's not directly GSAP related but thought I might find some insight here over what could be causing the problem.
  17. Hello, My question with this example : http://codepen.io/NicolasJ/pen/umFdy How to ensure that when "Center" is unchecked and click on the button "DO IT 2" the red block is positioned correctly. That is to say that the two upper corners are aligned and the result is displayed [t = 0 | b = 290 | l = 0 | r = 50] and not [55 t = | b = 235 | s = 55 | r = 5] How to ensure that when "Center" is checked and click on the "DO IT 3" button the red block is centered on the gray block? In summary, my question is how to properly calculate the sets of coordinates which I want to go in both cases (centered checked and unchecked) and keeping transformOrigin:"50% 50%". Hoping to be sufficiently clear Thanks
  18. Hi guys, I have a simple tween that tweens the opacity and scale of an element. It's made up of a number of child divs, some with with background images TweenLite.fromTo(elm, 1, { scale: 0, opacity: 0 }, { delay: delay, scale: 1, opacity: 1, ease: Power4.easeInOut } ); Here's a video showing the problem. https://plus.google.com/photos/117519930315665299724/albums/6016203100500855073/6016203101346895106?pid=6016203101346895106&oid=117519930315665299724&authkey=CNaF7OT_gJGA1QE @0:01 - The above tween is run @0:04 - I run another tween which just returns the scale and opacity to 0 @0:10 - I set the elements display property to none @0:15 - I set the elements display property to block @0:19 - Tween scale and opacity to 0 @0:23 - Tween scale and opacity to 1 So at @0:15 it's rendered correctly. but again @0:23 is not again. I assume this is actually a browser issue, it doesn't think i needs to redraw the element after the scaling. The odd thing is though that if I only ever scale from .5 instead of 0 then there are no rendering issues. TweenLite.fromTo(@elm, 1, { scale: .5, opacity: 0 }, { delay: delay, scale: 1, opacity: 1, ease: Power4.easeInOut } ); (it's all fine on chrome desktop)
  19. Hello, Is someone tried to extend "Draggable" to make it possible to use the multi-touch and so with two fingers simultaneously rotate, scale and move an object ? This is a general question but I did not really find an answer on the forum. Before leaving for prototyping I'm not sure this is possible. Is someone has any feedback on this point ?
  20. Hi, I'm trying to create a similar website to http://www.nouvelleoctavia.fr whereby as you scroll the content and imagery increase in size, fade in and fade out as if you are passing through it. I'm a newbie to GreenSock and I am having trouble understanding how it works. I'm currently trying to get a simple coloured div rectangle that is in the centre of the screen to increase and "pass through" as I scroll but it is not working. Any help would be most appreciated in getting me started. Thanks
  21. I have a container div that has overflow: auto; and then I use tweenlite to zoom in some of the images. I like that it zooms to the center using the scale feature, but it only let's me scroll down and right. It chops off anything in top or left. I can get everything if I scale then more the top and left negatively, but I don't want to zoom to the top corner. Is there a way to re register the size, or a workaround? Thanks
  22. Hi, I'm having troubles when resizing images inside a div on IE7/8, working fine on other browsers. I've got a wrapper div with a background and containing several images, you can zoom the wrapper and all the images inside will scale accordingly. Well, this zoom effect when in IE7/8 is not working properly, when I zoom the wrapper the content is not scaling (always 100%) but the background is zooming in and out correctly. This is the structure: <div id="wrapper"> <a href="">image1</div> <a href="">image2</div> <a href="">image3</div> ... </div> Thanks in advance.
  23. I have done a lot of work in ActionScript over the years developing interactive maps for use online and in kiosks. I'm making the jump into JavaScript, and I'm looking at the various tools available. I make extensive use of the MatrixTransformer class in my ActionScript work to facilitate precise zooming and panning in my maps. Is there currently a good solution in GSAP for JavaScript for accomplishing these tasks? If not, is there any plan for including a MatrixTransformer analog in GSAP for JavaScript? Thank you.
  24. I am using draggable on a div containing svg elements If I dont use draggable and scale the div via:- var i = $('#chart'); TweenLite.to(i, 2, {scale:4}); The edges of the SVG text and circle etc remain crisp as you would expect from scaled vectors. However if I enable draggable via:- var aD = Draggable.create("#chart", {type:"x,y", edgeResistance:0.5, throwProps:true, bounds:window}); and then zoom the SVG element become fuzzy as though they were scaled pixels. This happens even if I disable draggable before scaling Any ideas why this might be? Thanks - Dean Update: Scale without Draggable uses -webkit-transform: matrix(... Scale with Draggable uses -webkit-transform: matrix3d(... using Safari and Chrome on Mac - not a problem on Firefox (not using webkit) Ah: Putting force3D:false as in: TweenLite.to(i, 2, {scaleX:4, scaleY:4, scaleZ:1, force3D:false}); Is their a reason for the problem with matrix3d and scale on webkit? solves the problem
  25. Hey Guys, Ran into a problem where IE8 is not scaling an image. I've read several posts but nothing seems to work (element must be absolute, etc...) Here is a super basic example... http://duke.innovah.com/dukeregional/test.html Here's the JS: $(document).ready(function() { var bool = true; $('#campus').click(function(){ var _scale = (bool) ? .7: 1; TweenLite.to($('#campus'), 1, {scale:_scale}); bool = !bool; }); }); Works in all tested browsers except IE8. In IE8 the image pans a little but no scaling. I've also tried using scaleX and scaleY instead of scale. Note: I'm using IE10 in Browser Mode: IE8 and Document Mode: IE8 standards. When IE10 is in "compatibility" mode the issue also occurs. Any help or workaround is greatly appreciated!
×