Jump to content
Search Community

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
  • Supercharge

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

  1. 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
  2. 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.
  3. 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
  4. 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)
  5. 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 ?
  6. 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
  7. 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
  8. 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.
  9. 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.
  10. 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
  11. 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!
  12. Hi, I upgraded from 1.9.0 to 1.10.2 to fix a bug I couldn't workaround. But I've found another bug which has broken my game If I put a tween onto a timeline, animating scale and top, with clearProps, and then put an identical tween into the timeline straight after it, the second time it doesn't animate the scale (it animates top OK). It worked in 1.9.0-beta: http://9ballpool.co.uk/test/greensock/index.html But doesn't work in 1.10.2-beta: http://9ballpool.co.uk/test/greensock/index2.html This is urgent as it's holding up going live with my game. Please help! - Kev
  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(){ 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!
  14. 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. I built a cube that spins on touch with v1.9.8, which worked great but, when switching to 1.10.0, the .scale on line 17 of my example seems to not scale the entire cube anymore and distorts one side. Example: http://jsfiddle.net/GhTcW/2/ You can uncomment the old script (1.9.8) in the html section to see the difference. I am using Safari 6.0.2 BTW. Love your guys work!
  16. Hi Greensock universe, IE is giving me grief, as expected. After a day of fighting with this, I decided to come to you for a shoulder and some sound advice. We have an animation working BEAUTIFULLY in all browsers but IE8 (haven't even looked IE7 yet, not sure if I ever will). At one stage, our main character gets scaled down, which is done using the code below. TweenMax.to(user.sprite(), 1, { scale: 0.6, onStart: function() { //Kick spritesheet animation in } }); This character has a few different sprite sheets for it so it can walk and jump around the page. The sprite sheet animation is done with background-position management (this is NOT done using TweenMax). All browsers report the full width of the div that has the character in it, even when the element is scaled down (144px). We use this width to updated the background-position for the spritesheet animation. HOWEVER IE8 reports a different width as it scales the object down (86.4px final width), and, because the sprite sheet file is based on a 144px width, it all turns to custard. I attached an image of how the character looks after both the scaling and sprite sheet animations are completed. All other browser play ball with no problems what so ever. Any ideas? Help me please?
  17. Everything seems to to set correctly, and the opacity transition works fine, but nothing happens with scale: TweenMax.set(letter, {opacity:.5, scale:.4, transformOrigin:"50% 50%", fill:c}); TweenMax.to(letter, 1, {opacity:1, scale:1, ease:Elastic.easeOut.config(1), delay: i*.1}); I don't think anything too crazy is going on with my code... Anybody else run into a similar problem?
  18. Hey Jack, I came back here because of one little (or not) thing to repair and I would like to have your opinion about that. On the video below I have showed how the scaling reacts on the button (MovieClip with elements inside). http://youtu.be/IreHrg27uwM It goes wrong when I try to scale it from the handles you will see in the video. Element Button is a MovieClip which is containing background and textfield (not visible in the video, cause I have forgotten to enable it), Anyway I can't scale the Element Button like usually, because the background has to be redrawn to keep original radius corners or gradients and the text cannot be scaled always on the center of the button. What I did is: In the Main class where all elements are managed is: transformItem = transformManager.addItem(element); transformItem.minScale = 0; transformItem.minWidth = 20; transformItem.minHeight = 20; transformItem.addEventListener(TransformEvent.MOVE, onMoveElement, false, 0, true); transformItem.addEventListener(TransformEvent.FINISH_INTERACTIVE_MOVE, onMoveElementComplete, false, 0, true); transformItem.addEventListener(TransformEvent.SCALE, onScaleElement, false, 0, true) transformItem.addEventListener(TransformEvent.SELECT, onSelectElement, false, 0, true); transformItem.addEventListener(TransformEvent.DESELECT, onDeselectElement, false, 0, true); transformItem.addEventListener(TransformEvent.DELETE, onRemoveElement, false, 0, true); transformItemsArray.push(transformItem); While scaling the element I call updateProperties() method in the Element itself, this way I have always 'fresh' data. So in this case width, height, x, y, so the background can be drawn correctly. This is how the ButtonElement class look like. package { import fl.motion.Color; import flash.display.GradientType; import flash.display.Shape; import flash.events.Event; import flash.geom.ColorTransform; import flash.geom.Matrix; import flash.text.TextField; import flash.text.TextFormat; import nl.adlantic.adbase.adcreator.models.vo.AdCreatorButtonElementVO; import nl.adlantic.utils.FontManager; import nl.adlantic.utils.MathUtil; /** * * @author Grzegorz Tomasiak * @copy 2013 © AdLantic. All rights reserved. * */ public class AdCreatorButtonElement extends AdCreatorElement { private var textfield:TextField; private var textFormat:TextFormat; private var background:Shape; private var border:Shape; private var colorTransform:ColorTransform; private var properties:AdCreatorButtonElementVO; private var tempProperties:AdCreatorButtonElementVO; public function AdCreatorButtonElement() { createBackground(); createBorder(); createTextField(); addObjects(); } /** * * Override * */ override public function setProperties($properties:Object):void { super.setProperties($properties); properties = $properties as AdCreatorButtonElementVO; if (properties) { updateBackground(); updateBorder(); updateTextField(); } } override public function updateProperties($properties:Object):void { super.updateProperties($properties); tempProperties = new AdCreatorButtonElementVO($properties); for (var prop:Object in $properties) { if(properties.hasOwnProperty(prop)) properties[prop] = tempProperties[prop]; } updateBackground(); updateBorder(); //updateTextField(); } /** * * Methods * */ private function createBackground():void { background = new Shape(); colorTransform = new ColorTransform(); } private function createBorder():void { border = new Shape(); } private function createTextField():void { textFormat = new TextFormat(); textfield = new TextField(); textfield.multiline = true; textfield.wordWrap = true; textfield.selectable = false; textfield.setTextFormat(textFormat); } private function addObjects():void { addChild(background); addChild(border); //addChild(textfield); } private function updateBackground():void { var matrix:Matrix = new Matrix(); matrix.createGradientBox(properties.width, properties.height, Math.PI / 2); background.graphics.clear(); background.graphics.beginGradientFill(GradientType.LINEAR, [properties.background_color, Color.interpolateColor(properties.background_color, 0x000000, .5)], [1, 1], [0, 255], matrix); background.graphics.drawRoundRect(0, 0, properties.width, properties.height, properties.radius); background.graphics.endFill(); this.scaleX = 1; this.scaleY = 1; textfield.scaleX = 1; textfield.scaleY = 1; trace(this.x, this.y); } private function updateBorder():void { var matrix:Matrix = new Matrix(); matrix.createGradientBox(properties.width, properties.height, Math.PI / 2); border.graphics.clear(); if(properties.border_thickness > 0) { border.graphics.lineStyle(properties.border_thickness, 0, 1, true); border.graphics.lineGradientStyle(GradientType.LINEAR, [properties.border_color, Color.interpolateColor(properties.border_color, 0x000000, .5)], [1, 1], [0, 255], matrix); border.graphics.drawRoundRect(properties.border_thickness / 2, properties.border_thickness / 2, properties.width - properties.border_thickness, properties.height - properties.border_thickness, properties.radius); border.graphics.endFill(); } } private function updateTextField():void { textFormat.color = properties.format.color; textFormat.font = properties.format.font; textFormat.size = properties.format.size; textFormat.align = properties.format.align; textFormat.bold = properties.format.bold; textfield.text = properties.text; textfield.width = properties.width; textfield.height = 20; if (FontManager.instance.isFontEmbedded(properties.format.font)) textfield.embedFonts = true; else textfield.embedFonts = false; textfield.setTextFormat(textFormat); textfield.y = background.height / 2 - textfield.height / 2; } } } My question is, do you already know what's the problem and how to possibly fix it or you have advices to to that thing differently. Any help would be awesome. Thank you.
  19. So I realise that transformOrigin is a CSS property and thus don't expect it to work when tweening scaleX and scaleY of an EaselJS Bitmap, but is there any way I can achieve the same ends? Tweening using a top left origin isn't always ideal. Thanks
  20. Hi, I'm trying to scale (zoom in) on a point based on a hover event handler. The way this is supposed to work: on the baseImage, which is an installation with a bunch of products, we have info icons displayed wherever a relevant product is used. If a user hovers over one of these icons, the baseImage zooms in on that point (info icon). I got it to zoom, but not to the point where I want it to. Is this even possible? I can't help but feel that this isn't as complicated as it's turning out to be. I've hit a wall and any help would be greatly appreciated. See the attached image to get an idea of what I'm talking about.
  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. Im trying to rotate a square in Y axis and at the same time scale it up so it ends up covering almost all the screen, when I only use the Y rotation it works perfect, when I use just the scale works great, buen when they are combined, the square deforms and the image flicks... Am I doing something wrong? here is the code: TweenLite.to(cuadroAzul, 1, {rotationY:-180, width:862.10, height:518.4, onComplete:goHandler, ease:Strong.easeIn}); I believe it's a problem in Flash's 3D environment because if I try to make the tween in timeline it behaves crazy. Any help would be greatly appreciated
  23. Hi! I'm having a problem with a webpage. It contains 6 elements that are animated via css for :hover behaviours: .mySel{ -xx-transform: scale(0.8); } .mySel:hover{ -xx-transform: scale(1); } On intro, I need to tween these elements' y position individually, so I use TweenLite: TweenLite.to(this,1,{css:{y:50}}); Problem is, when my tween finishes, the tweened elements have inline styles overriding my :hover behaviour: -webkit-transform: matrix(0.8, 0, 0, 0.8, 0, 0); I see why jack did this but I'm open to manually resetting inline styles onComplete, but I have no way of using TweenLite to do so. I'll have to deal with vendor prefixes manually. I was wishing for TweenLite.to(this,0,{css:{scale:"" or scale:"none" or scale:"auto"}}) to reset the property but no dice... Can someone help me in any way?
  24. Guest

    scale object size using mouse over

    How would I implement a slight object scale change on mouse over? Thanks! Zach
  25. Hey everyone, At the moment I'm working on a small class for myself to make different animated buttons with javascript, html and css (personal pre-made buttons to add them to project in the future). I'm making as much different animation I can think of growing, shining, depth, vibrating etc etc... I am now at the part where I am making them compatible for all browsers as much as possible (it's horror...) and working on a button that scales larger on mouse over. In all browsers this works perfectly fine except in IE7, IE8, and most likely IE6 too but I cant test that one. In these browsers the button does animate somewhat but does not expand and when it animates it removes the gradient filter that was on it... I have no idea how to enter this in jsfiddle, it's fairly complex :/ Because I want it to use as few files as possible and only want 1 line of code in the main document to call a button from the class, I generate the html and css of the button inside the JS file. The gradient I use for IE 7-9 is: gradientIE79 = "filter: progid:DXImageTransform.Microsoft.gradient(startColorStr="+ color2 +", EndColorStr="+ color1 +"); (color1 and color2 get added dynamically) and on the same button I use the follow Tween: TweenLite.to(button1, 0.25, { css:{scaleX:1.15, scaleY:1.15}}); What happens on my screen is that the button does show a sign of scaling, the top left corner of the button (I can see it because it still has a border around it) moves to the left corner to which it is supposed to tween. The problem is that the whole button move to the top left, it just re-positions instead of growing. Not only does it re-position but it also gets rid of the gradient that was on it as soon as the tween starts. I know it's all very confusing and I'm trying to explain it as good as I can. If there is anything not clear or if I left anything out, let me know. Thanks
×
×
  • Create New...