Jump to content
GreenSock

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

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

  • 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

Found 98 results

  1. Thank you for creating such an amazing tool for animation and supporting community. I have a question about way how Gsap is creating an order of properties for transform while tween/set. As i understand based on documentation, skew properties come after scale properties (this is exactly what i need), but when im trying on a practice i see the opposite result where skew is coming before scale properties. Can you please help me to understand why this happen and how can i change this? I have attached codepen comparing two results: first one i've set up using css and pick the order by myself, second order was created using gsap set. Im working on complex animation, part of this animation using scale and skew properties, but im getting wrong result when skew coming before scale. Thank you so much.
  2. Hi there Been using GSAP for years, love the library and use it almost daily! It's awesomecakes. This is my very first forum post I believe For a project I'm working on I'm using my own quite simple Ken Burns implementation, which works without using timeline. There's probably a much better and more efficient way to code this effect so I'm open to suggestions. I've successfully used this approach in the past (at least in a very similar fashion) and didn't experience the issues I'm having now (see here: https://mikebravo.ch/). The reason it was working then eludes me. Could be because I was doing something different (CSS maybe? unsure) or it could possibly be an issue with the latest version of GSAP – I was using TweenMax 1.19.1 then. I've experienced these issues in two different browsers, latest Firefox and Safari versions, which leads me to believe that they aren't related to a specific browser. Anyway, as for what the issues actually are, I'm having two (or maybe three) different but possibly related problems. You'll probably have to watch the animation in the Codepen for a moment to see the issues appear (usually happens within a few seconds though, max. 30 Seconds) : sometimes, usually within the first few animation cycles, the image being animated is being scaled from 0 up, even though that should never actually occur because the value being scaled from/to should always be higher than 1; the scale values I'm using reflect this fact if printed to console. sometimes the animation simlpy ends or pauses for 1 or more cycle/s. When it does end it just seems to die completely. I'm not sure whether it would resume if I waited long enough, but I don't think it ever would. sometimes the image disappears and same as before, the animation ends/hangs up and usually refuses to continue. I've tried a couple of things: using fromTo() in place of to() adding a timeout before the cycle restarts added killTweensOf($el) applied the animation to the parent Div, but the same issues occur (which excludes the image itself as the culprit, I think) tried using parseTransform: true after reading about that on these boards Any ideas what the issue might be? Am I missing something obvious? Thanks a lot for any help!
  3. Hi, I'm trying to scale the mask in the centre of an SVG to scale up to reveal text below, but the end result doesn't keep the mask in the middle. https://codepen.io/jimijbob/pen/Jjdermj Credit to @Sheilab67 for the original codepen. Any help would be very much appreciated. This is my first attempt at TweenMax so please be gentle. Many thanks in advance J
  4. 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
  5. Hello GreenSockers, You guys are so awesome and thank you for providing this platform. Today, I saw this beautiful accordion animation https://uimovement.com/design/beaches-app/ and I want to create the same effect using GS. Is it possible to create this effect using in GS? Thanks in advance.
  6. What am I doing wrong here. On mouse hover it should enlarge the text hovered. On mouseleave it should scale back.
  7. 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!
  8. 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)
  9. 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
  10. 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?
  11. 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
  12. 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
  13. 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.
  14. 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:
  15. 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.
  16. 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
  17. 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 ...
  18. 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!
  19. 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
  20. 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?
  21. 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.
  22. 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!
  23. 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!
  24. 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.
  25. 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.
×