Search the Community

Showing results for tags 'scale'.



More search options

  • Search By Tags

    Type tags separated by commas.
  • Search By Author

Content Type


Forums

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

Product Groups

  • Club GreenSock
  • TransformManager

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


AIM


MSN


Website URL


ICQ


Yahoo


Jabber


Skype


Location


Interests

Found 93 results

  1. davel160

    Scaling with GSAP and Adobe Animate

    Hi all, I've been using GSAP for awhile now, but am new to using Adobe Animate with GSAP. This is probably a simple question, but I can't seem to find out why scaling up objects in Adobe Animate using GSAP causes those elements to become extremely pixelated. Is there some kind of setting I am missing in Animate? Thanks!
  2. Noturnoo

    Animation: Scale left-to-right

    Hello, as you can see I'm new to the house. LOL I am now starting to use GSAP, and have a website that I know it uses, would like to know the best code to create this animation to load with percentage of the page, with hide in the image and show after the animation. Take the example: https://www.melville-design.com (site using greensock)
  3. gntjnn

    SVG transform origin

    Hi, i'm trying to recreate the following hover effect with GSAP: Right now i'm trying to figure out how i set the transform origin correctly. The element that I want to tween is initially translated so the animation starts at the wrong position. Hope someone can explain me how to fix this. Here is my Pen: Thanks
  4. Hey there, I've got this SVG map of some counties. in it, I have some markers, that serve a purpose on a live site, however I can't seem to get the little markers to line up properly in Safari only. I pasted it into a codepen with minimal code, and see that it is indeed the case on my Safari, but not on either Firefox or Chrome. Can anyone help me get those lined up for Safari users?
  5. Hello, I am novice, but i really impressed with this. I want to make product detail page having animations like this website: https://www.etq-amsterdam.com/store/product/men/low-3-timber/ When you click on product image, it will zoom it to full screen having pan effect. Also, when you scroll it, image will scale accordingly. I think they are using tweenmax, but i didn't able to crack it. Could you please help me with this? Thanks, Keyur
  6. Good Day Fellow GreenSockers, GreenSock has recently released a new video tut on a new ease called ExpoScaleEase for smooth scaling and zooming. https://greensock.com/docs/Easing/ExpoScaleEase This video tut was made by the Mighty @Carl, take it away Carl: If you haven't already done so, please check out and subscribe to the GreenSock Learning YouTube channel for more video tutorials. This way you don't miss out on new features and great learning videos from GreenSock. Happy Tweening
  7. Hector18

    Follow button effect

    Hi everyone, Could someone help me, I want to make a button effect like in this example. Please see the top-left circle menu: http://www.superbeparis.com/#!/ On mouse enter button follow the mouse and scale and on mouse leave animate to the initial position. Thank you guys
  8. myradon

    Greensock transformOrigin mystery

    Hey guys I've got a question concerning transformOrigin behaviour and why there is a difference in end-location of a group in SVG; Why does this; tlBalloon1.addLabel("start", 0); tlBalloon1.fromTo(balloon1, 0.35,{ css: {y: 0, opacity: 0, scale: 0.25}}, { css: {y: "-=10", opacity: 1, scale: 1, transformOrigin:"right bottom"}, ease:Back.easeOut.config(3)}, "start"); tlBalloon1.fromTo(balloon1, 0.35,{ css: {rotation: "-=20"}}, { css: {rotation: 0, transformOrigin: "right bottom"}, ease:Back.easeOut.config(3)}, "start"); Pen A have a different outcome then this; tlBalloon1.addLabel("start", 0); tlBalloon1.fromTo(balloon1, 0.35,{ css: {y: 0, rotation: "-=20", opacity: 0, scale: 0.25, transformOrigin:"right bottom"}}, { css: {y: "-=10",rotation: 0, opacity: 1, scale: 1}, ease:Back.easeOut.config(3)}, "start"); Pen B OKAY guys I found out myself. It appears when I start with offsetting attributes and I would like to transform to original I have to set transformOrigin in altered from-section.
  9. The animation is not like I want, it should have a typical collapsing expanding experience. If you click the "Expand/collapse", you'll expand/collapse the content. It doesn't have the expected animation of the height when is scaling , when I click close (X) it shold do the reversing animation. Content should be pushed. console.log('click 1'); TweenMax.fromTo(".Tile.is-expanded .Tile-flyout", 0.8, { scaleY:0 ,transformOrigin:"center top", autoAlpha:0, ease: Linear.easeNone }, {scaleY:1, autoAlpha:1,}); TweenMax.fromTo(".Tile.is-expanded .Tile-flyout > *", 0.8, { scaleY:2,transformOrigin:"center bottom", ease: Linear.easeNone }, {scaleY:1,}); console.log('click 2'); TweenMax.fromTo(".Tile .Tile-flyout", 0.8, { scaleY:1 ,transformOrigin:"center bottom", autoAlpha:1, ease: Linear.easeNone }, {scaleY:0, autoAlpha:0,}); TweenMax.fromTo(".Tile .Tile-flyout > *", 0.8, { scaleY:2,transformOrigin:"center bottom", ease: Linear.easeNone }, {scaleY:1,}); Demo:
  10. christopherduffy

    Tween Move and Scaling Issue

    Hi, I'm trying to make an element tween from off screen and land on a point while scaling down. I currently have the element scaling down and moving position but I don't want it to start scaling down until it gets closer to the red box. Any advice or guidance would be great.
  11. nick2price

    Scale image up

    Hi all, once again apologies, it will not let me fork a codepen so I have to use https://jsfiddle.net/z69w9u4g/47/ So I am using Scroll Magic, in my example I have place a dummy section so you can see the effect. So as you scroll down, you will see that the image scales up to 1.2. This is fine, and seems to work without issues. What I am trying to do however is this. I would like to give the image an initial scale of 0.5 and then scale up to 1.2 as you scroll down. Is there any way to give the image an initial scale of 0.5? Thanks
  12. Hey, The scaling effect is a little bit crazy - but nice: While the SHARKS set centered on the path they swim away when scaling down. What is the reason for this? I didn´t touch ...
  13. processprocess

    pixelated scale-down GSAP & Pixi.js

    I'm getting pixelation when using pixi.js sprites with gsap. I doubt this is a gsap or pixi problem, I'm sure it has to do with how I'm combining them. in the codepen example: pixiBug on left is pixi.js & gsap and we're getting pixelation on scale down domBug on right is DOM & gsap and edges are smooth no matter the scale. What am I missing here? Thanks!
  14. Hello guys, GSAP newbie here, hope someone can tell me what I am doing wrong. When I define scaleX value in transform attribute of SVG <g> it doesn't seem to be recognised by GSAP. Only when I explicitly set scaleX (line 2 in JS) does the tween work as intended. Translate values seem to be recognised just fine. http://codepen.io/hrvojesimic/pen/XMybJe?editors=1010
  15. processprocess

    scale not updating on Class instantiated object

    In my codepen - I'm instantiating elements from a class. x, y and backgroundColor successfully update. Scale fails to update. I'm updating scale exactly the same way I'm updating backgroundColor. I've tried everything I can think of... What's going on here?
  16. Good morning folks, I'm building a website where I present a list of posts links. When the user click on a link, I'm sending an Ajax request to get the content of the post, then populate an hidden container (.taz_overlay-content) and trigger a function that reveals it by animating it's scale. My "popup" (.taz_overlay) is vertically centered using CSS top: 50%; transform: translateY(-50%); The problem is the following: Depending of the amount text in the article, the popup is not vertically centered anymore but keeps it's previous position. Please note that I'm faking Ajax request in this provided Codepen by using 2 string variables (fakeAjaxContent1, fakeAjaxContent2), one with a few words, the other with a bunch. Example: When you first click "Link 1", the "small" popup triggers. It's perfectly vertically centered, as expected. From now on, if you click "Link 2", the "huge" popup triggers. But while it should have been perfectly vertically centered, it's keeping the matrix positioning of the previous animation and obviously appears completely in offset. The same behavior appear when First clicking "Link 2", then "Link 1" (you need to refresh the page before). The weird thing for me is that I thought erasing the style attribute at the end of the animation (line 25 of the JS) would solve the issue, but it's not Looks like there is some kind of cache somewhere. Note that if I deactivate the scale animation (starting line 4), the issue is solved! Any help would be greatly appreciated. Cheers, P.-S. : sorry if the Codepen looks a bit over made, it's extracted from my original code which is handling much more cases etc. I tried to reduce it to some kind of minimum so the "bug" still happens.
  17. pfash

    reverse cross-dissolve and scale

    Hi All, Beginner here. I'm hacking code given to me on this forum by PointC. I need to know how to reverse the scaling/cross-dissolving in my codpen demo: http://codepen.io/pfash/pen/aprmxq ...by clicking on the red box a second time. IOW: you click on the red box once to have it dissolve into the blue box and scale up...and then you click on the red box again and it all goes in reverse. That second part is my question. NOTE: This demo is supposed to have the red box on top of the blue box (so the red color smoothly transitions into blue) but I didn't have time to figure that out for this codepen demo and it's not critical to my question. Another concern: the scaling up (zooming larger) and cross-dissolving is not as smooth as I expected it'd be. You can see the blue box flash a bit. Any ideas why? Thanks much!
  18. Dayo

    Hover image scale in drupal

    Hello! I'm trying to create a simple hover effect on images in a 2 column gallery. I use drupal 8 and iv'e included the html code for one of the images in the gallery http://codepen.io/anon/pen/ZLPJQL The problem is that everything works in firefox but in chrome the animation flickers and the images goes invisible for a while before returning to normal (only on the right side of the gallery weirdly enough). Iv'e had this problem with chrome before and seen some threads on it but i can't remember what code it was that fixed the flicker problem. Iv'e tried setting force3d:true but it did not help. I'm using Jquery in the .js file beacuse i got errors when i was using the original script which looked like this: <script language="JavaScript" type="text/javascript"> $('.tileImage').hover( function () { TweenMax.to(this, 2, {scaleX:1.1, scaleY:1.1, ease:Circ.easeOut}); }, function () { TweenMax.to(this, 2, {scaleX:1, scaleY:1, ease:Circ.easeOut}); } ); </script> Any help is much appreciated, thanks for a great tool!
  19. Hi there, I am new to greensock and even to jquery/javascript at all. I am trying to scale the "g" parts of a svg element from 0 to 1. It already works but the elements don't stay in their end position when they are animating, but "move" in along the x and y axis. I am wondering if there is a way, that they stay fixed in their position and just scale from 0 to 1? I already searched the forum and found advises about transformOrigin, but none of them solved my problem.
  20. one2gov

    onResizeStart:function()

    Is it possible to update values of html on resize? Like this? onResizeStart:function() { xSize.innerHTML = this.target._gsTransform.scaleX; ySize.innerHTML = this.target._gsTransform.scaleY; } In the codepen i can't get values of _gsTransform.scaleX for some reason.
  21. Hey there, I'm trying to use TweenMax to animate an image inside a SVG clipPath. The problem is: when the transition is happening, the clipPath deactivate on Chrome and appears only after animation stops. On Safari and Firefox works just fine. Anyone can help me? Is a compatibility issue or am I doing something wrong? Thanks guys!
  22. nicolasdesle

    Scale Three JS object with Tweenmax

    Hi I would like to tween the scale of an array of Three JS objects. I am able to do this on requestAnimationFrame, but I would like to use Tweenmax: for ( var i = 0; i < meshes.length; i ++ ) { meshes.scale.x = meshes.scale.y = meshes.scale.z = boost; } Any idea how to? Thanks!
  23. swampthang

    Scale up from zero

    I have an app that allows you to save a file and reopen it. Everything works great except for when a scale to 0 has been applied to something and the user saves the file with an SVG in that state. When the file is opened the scale tween doesn't connect to the SVG when the scale settings in matrix3d start out at 0. The codepen is as simple as it gets and replicates the issue. There's only one line: TweenMax.fromTo('#gp-1',1,{scale: 0}, {scale: 1},0); It works if the style attribute starts out as: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 392, 315, 0, 1) ...but not if it starts out as: matrix3d(0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1, 0, 392, 315, 0, 1) I'm sure I'm struggling with this because of my lack of understanding something. Any guidance from a GSAP/SVG sage would be greatly appreciated.
  24. Hello, how would you scale back from a hi-res image to a lo-res like so: http://www.pixelettestudios.com/uploads/doctorwho/300x250/index.html That particular example uses canvas elements which I'm not familiar with so is there a way to go about achieving the same effect using Greensock TimelineMax? I know some transform origins may have to come into play but I'd like to achieve a seamless transition as in the example provided. Thanks!
  25. NoRabbit

    Jittery scale on Chrome (see codepen)

    Hi all I'm encountering some jittery animation on chrome while animating the scale of a div using TweenMax (as well as other tween engines). In the codepen, the div with the image is encapsulated inside other divs in order to reproduce the conditions of the project I'm working on. I also put a css animation counterpart that doesn't have that jittery effect. I'm wondering why it is only happening with js tweening engines... I'm only seeing it on chrome (win & mac), it works nice on ff and safari (haven't tried edge yet). Except on ff mac, I get the jittery effect when i'm hovering the div. Do you also have that problem ? Is there a workaround ? I tried the "z" attribute and also put a translate3d on the parent. Thanks. Thomas.