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
  • 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. 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!
  2. 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.
  3. 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.
  4. 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!
  5. 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!
  6. 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.
  7. 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!
  8. 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.
  9. Hello, I'm using GSAP to build scroll controlled animation using a timeline. 1) I have a container with a list of images, one next to the other, and when I scroll normally (so, vertically), I make the images slide to the left. 2) Sometimes I need to stop the sliding and animate something else (make something to appear and so on), before proceeding again with the sliding. This needs to happen at a specific moment, or position: usually I want one of these images to stop precisely in the middle. 3) the whole thing needs to be responsive I managed to do almost everything, but the point 3. In order to make it responsive, I set a fixed maximum size to the container div and on window loading I check if the window is smaller than this size, in which case I scale everything. So, the scaling works pretty well, but it messes with the calculations I made for the animation. In the pen I created I'm trying to stop the animation exactly when the left border of the third rectangle reaches the black line. At row 32 I'm calling the resize function to set the initial size. If you comment this call out you can see that it works fine, if you leave it, the rectangle will be always slightly off. Why is this the case?
  10. Hi there! I've tried to find a solution in this forum but I couldn't find the same problem. It makes me even more confused! I want to animate a inline SVG made of path elements only. Safari, Firefox and Chrome don't really react the same way but I could eventually fix that by applying transformOrigin or svgOrigin depending on the browser. I also had to set transform-origin:50% 50% 0px !important; BUT! Safari looks like ignoring this setting as soon as I scale a path. It makes the path to scale from the top left of the SVG element to their original position (scale 1). The GSAP version is 1.19.0 I'm struggling for more than 4h hours especially because this animation is a spinner I use on 3 different location on the website and it doesn't work properly only on one location. Does anyone has an idea? Here is the CSS : path{ fill:#fff; opacity:0; -webkit-transform-origin:50% 50% 0px !important; transform-origin:50% 50% 0px !important; } Here is the JS for one path (every path bug the same) this._elementOrigin = ( this._forceTransformOrigin ? 'transformOrigin' : 'svgOrigin'); var from = {opacity:0, scale: 0.5}; from[this._elementOrigin] = "100% 50%"; this._timelineLeft.fromTo(this._$step1L, hD, from, { opacity:1, scale: 1, force3D: true } ); Here is the SVG <svg version="1.1" xmlns="http://www.w3.org/2000/svg" viewBox="-37.4 94 670.1 653.9" xml:space="preserve"> <path class="component__icon__spinner--7L" d="M214 494.6c-20.7 0-43.6-1.7-62.8-3.4 -2.6-0.2-4.6-0.4-5.9-0.5 -2-0.2-6.1-0.3-11.2-0.5C88.8 488.7 45 485.6 31.3 474 16.5 461.4-1 404.6 0 372.8c0.4-12.2 3.5-20.5 9.1-24.7 16.5-12.3 81.2-12.2 135.6-10.7 2.8 0.1 5.1 0.1 7 0.2 3.6 0.1 8.9 0 15-0.1 44.5-0.7 93 0.2 106 18.7 12 17.2 15.5 72.2 6.7 105.1 -3.8 14.2-9.6 23.3-17.1 26.8C251.9 493 234.1 494.6 214 494.6zM12.1 352.2l3 4c-1.7 1.3-4.7 5.2-5 17 -1 30.7 16.2 83.3 27.8 93.2 12.9 11 73.7 13 96.6 13.8 5.4 0.2 9.3 0.3 11.6 0.5 1.4 0.1 3.4 0.3 6.1 0.5 21 1.9 85.1 7.7 105.8-2.1 4.6-2.2 8.8-9.4 11.7-20.3 3.8-14.4 5.4-34.9 4.2-54.9 -1.2-19.2-4.8-35.2-9.4-41.8 -11-15.8-69.5-14.9-97.6-14.5 -6.2 0.1-11.6 0.2-15.4 0.1 -1.9 0-4.2-0.1-7-0.2 -75.3-2.1-118.9 0.9-129.4 8.7L12.1 352.2z"/> <path class="component__icon__spinner--7R" d="M381.3 494.6c-20.1 0-38-1.6-48.2-6.4 -7.6-3.5-13.3-12.6-17.1-26.8 -8.8-32.9-5.3-87.9 6.7-105.1 13-18.6 61.5-19.4 106-18.7 6.1 0.1 11.4 0.2 15 0.1 1.8 0 4.2-0.1 7-0.2 103.7-2.8 127 4.2 135.6 10.7 5.6 4.2 8.7 12.5 9.1 24.7 1.1 31.8-16.5 88.5-31.3 101.1 -13.6 11.6-57.5 14.7-102.8 16.2 -5.1 0.2-9.1 0.3-11.2 0.5 -1.3 0.1-3.4 0.3-5.9 0.5C424.9 492.9 401.9 494.6 381.3 494.6zM409.8 347.4c-29.9 0-70.1 1.8-79.1 14.6 -4.6 6.6-8.2 22.7-9.4 41.8 -1.2 20 0.4 40.5 4.2 54.9 2.9 11 7.1 18.2 11.7 20.3 20.7 9.7 84.8 4 105.8 2.1 2.6-0.2 4.7-0.4 6.1-0.5 2.2-0.2 6.2-0.3 11.6-0.5 22.9-0.8 83.8-2.9 96.6-13.8 11.6-9.9 28.8-62.5 27.8-93.2 -0.4-11.8-3.3-15.7-5-17 -10.5-7.8-54.1-10.8-129.4-8.7 -2.8 0.1-5.2 0.1-7 0.2 -3.8 0.1-9.2 0-15.4-0.1C423.1 347.5 416.8 347.4 409.8 347.4z"/> <path class="component__icon__spinner--6L" d="M190.8 509.6c-5.2 0-9.4-0.2-12.1-0.4 -2.8-0.2-6.2-0.5-10.1-0.7 -20.8-1.3-52.2-3.3-65.1-13.9 -17.2-14.1-47.9-48.9-53.8-89.6 -2.8-19.5-4.2-34.9-2-46.9 2.1-11.4 7.3-19.8 17.8-29.2 19.2-17.1 44.3-19.2 110.3-17.2 59.9 1.9 69 8.1 81.1 19.8l1.2 1.1c13.2 12.6 24.2 67.6 25.5 92.1 1.6 29.8-3.2 53.1-14 67.5C258.9 506.3 214.6 509.6 190.8 509.6zM140.9 321c-38 0-55.6 3.6-68.7 15.3l0 0c-16.4 14.6-18.6 25.9-12.6 67.2 5.5 37.7 34.1 70.1 50.2 83.4 10.5 8.6 41.1 10.5 59.4 11.7 4 0.2 7.4 0.5 10.3 0.7 20.3 1.7 73.9-2.1 82.1-13 9.4-12.5 13.5-33.6 12-61 -1.8-33.5-14.6-77.9-22.5-85.4l-1.2-1.1c-9.5-9.1-15.7-15.1-74.5-17C162.3 321.3 150.9 321 140.9 321z"/> <path class="component__icon__spinner--6R" d="M404.5 509.6c-23.8 0-68.2-3.2-78.8-17.4 -10.8-14.4-15.6-37.7-14-67.5 1.4-24.5 12.3-79.5 25.5-92.1l1.2-1.1c12.1-11.7 21.3-17.9 81.1-19.8 65.9-2.1 91.1 0.1 110.3 17.2l0 0c20.3 18.1 21.8 34.9 15.8 76.1 -5.9 40.7-36.6 75.5-53.8 89.6 -13 10.7-44.4 12.6-65.1 13.9 -3.9 0.2-7.3 0.5-10.1 0.7C413.9 509.4 409.7 509.6 404.5 509.6zM454.4 321c-10 0-21.4 0.2-34.6 0.7 -58.8 1.9-65.1 7.9-74.5 17l-1.2 1.1c-7.8 7.5-20.6 51.9-22.5 85.4 -1.5 27.4 2.6 48.5 12 61 8.2 10.9 61.8 14.8 82.1 13 2.9-0.2 6.3-0.5 10.3-0.7 18.3-1.1 49-3.1 59.4-11.7 16.1-13.2 44.8-45.6 50.2-83.4 6-41.2 3.8-52.5-12.6-67.2l0 0C510 324.6 492.4 321 454.4 321z"/> <path class="component__icon__spinner--5L" d="M231.6 480.7c-11.4 0-24.1-1.2-36.9-2.7 -3.6-0.4-6.4-0.8-7.9-0.8l-1.8-0.1c-40-1.9-62.2-6.5-69.9-14.4 -9.9-10.2-16.8-32.5-20.1-50.1 -2.1-11.2-5.9-38.3 3.2-47.8 15.7-16.4 53.9-15.4 79.2-14.8 5.1 0.1 9.5 0.2 12.6 0.2h1.7c30.2-0.9 59.9-0.4 72.9 9 9.3 6.7 12.6 30.9 13.6 44.7 1.6 19.8 1.2 56.2-10 67.4C260.9 478.4 247.7 480.7 231.6 480.7zM161.1 359.8c-20.5 0-45.9 1.7-55.7 12 -3.2 3.3-4.4 18.1-0.6 39 3.7 19.9 10.6 38 17.4 44.9 3.2 3.3 15.6 9.1 63.2 11.4l1.8 0.1c1.8 0.1 4.7 0.4 8.6 0.9 15 1.8 54.9 6.4 65.2-3.9 6.2-6.1 9.3-32.3 7.1-59.6 -1.9-23.8-6.7-35.4-9.5-37.4 -12.1-8.7-50.4-7.6-66.8-7.1h-1.7c-3.4 0.1-7.9 0-13.1-0.2C172.5 359.9 167 359.8 161.1 359.8z"/> <path class="component__icon__spinner--5R" d="M363.6 480.7c-16.1 0-29.4-2.3-36.5-9.4 -11.3-11.2-11.6-47.7-10-67.4 1.1-13.8 4.3-38 13.6-44.7 13-9.4 42.7-9.9 72.9-9h1.7c3.1 0.1 7.5 0 12.6-0.2 25.3-0.6 63.5-1.6 79.2 14.8 9.1 9.5 5.3 36.6 3.2 47.8 -3.2 17.5-10.2 39.9-20.1 50.1 -7.7 7.9-29.9 12.5-69.9 14.4l-1.8 0.1c-1.5 0.1-4.3 0.4-7.9 0.8C387.7 479.5 375 480.7 363.6 480.7zM385.2 359.8c-17.9 0-40 1.2-48.6 7.4 -2.8 2-7.6 13.6-9.5 37.4 -2.2 27.3 1 53.4 7.1 59.6 10.4 10.3 50.2 5.6 65.2 3.9 3.9-0.5 6.8-0.8 8.6-0.9l1.8-0.1c47.6-2.3 60.1-8.1 63.2-11.4 6.7-6.9 13.7-25 17.4-44.9 3.8-20.9 2.6-35.7-0.6-39l0 0c-12.6-13.2-51.1-12.2-71.7-11.7 -5.3 0.1-9.8 0.2-13.1 0.2h-1.7C398.7 360 392.3 359.8 385.2 359.8z"/> <path class="component__icon__spinner--4L" d="M207.9 470.8c-18 0-41.6-1.6-47.7-9.8 -8.6-11.4-14.3-52.5-10.4-74.4 1.4-7.5 3.7-12.2 7.1-14.4 8-5.2 33.5-8.6 54.6-9.4 17-0.6 47.1-0.2 58.1 9.8 11 10.1 14.8 36.1 13.6 57.4 -0.4 7.7-2.2 26.3-9.7 31.7 -7 5.1-33.8 8.4-56.7 9C214.1 470.7 211.1 470.8 207.9 470.8zM221.7 368.5c-3.2 0-6.5 0.1-9.9 0.2 -25.5 1-46.2 5.1-51.6 8.5l0 0c-0.9 0.6-3 2.7-4.4 10.4 -3.7 20.4 1.5 59.5 9.3 69.7 3.2 4.2 20.4 8.1 51.7 7.2 27.3-0.8 48.9-4.7 53.3-7.9 3-2.2 6.4-11.4 7.3-27.2 1.1-19.9-2.6-44.3-11.7-52.7C259.6 371.5 243.6 368.5 221.7 368.5z"/> <path class="component__icon__spinner--4R" d="M387.4 470.8c-3.2 0-6.2-0.1-8.9-0.1 -22.9-0.6-49.7-3.9-56.7-9 -7.5-5.5-9.3-24-9.7-31.7 -1.2-21.3 2.6-47.3 13.6-57.4 10.9-10 41.1-10.4 58.1-9.8 21 0.8 46.5 4.3 54.6 9.4l0 0c3.4 2.2 5.8 6.9 7.1 14.4 4 21.9-1.8 63-10.4 74.4C428.9 469.1 405.4 470.8 387.4 470.8zM373.6 368.5c-21.9 0-38 3-43.9 8.4 -9.1 8.3-12.8 32.8-11.7 52.7 0.9 15.8 4.3 25 7.3 27.2 4.4 3.2 26 7.1 53.3 7.9 31.3 0.9 48.5-3 51.7-7.2 7.7-10.3 12.9-49.4 9.3-69.7 -1.4-7.8-3.6-9.9-4.4-10.4 -5.4-3.4-26.1-7.5-51.6-8.5C380.1 368.6 376.8 368.5 373.6 368.5z"/> <path class="component__icon__spinner--3L" d="M215.2 216.3v7c9.5 0 19.7 3.3 28.2 9 7 4.8 16.2 13.6 20.3 28.7 3.5 12.9 5.2 76.5 4.4 170 -0.7 80.6-2.8 150.4-3.9 156.7 -1.3 5.3-4.6 15.3-12.6 24 -10.5 11.3-25.8 17.1-45.6 17.1 -26.3 0-42.5-11.9-51.4-21.9 -10.2-11.5-16.6-27-16.6-40.6 0-30.4 6.2-283.2 10.8-300.1 4.7-17.3 25.4-37 61.3-42.3 1.6-0.2 3.3-0.4 5.1-0.4L215.2 216.3M215.2 216.3c-2.1 0-4.2 0.1-6.1 0.4 -40.5 6-62 28.9-67 47.4s-11 273.9-11 301.9c0 28 24 69.5 75 69.5s62.5-36 65-46.5c2.5-10.5 8.4-296.9-0.6-329.9C262.3 229.4 235.3 216.3 215.2 216.3L215.2 216.3z"/> <path class="component__icon__spinner--3R" d="M380.1 223.3c1.8 0 3.5 0.1 5.1 0.4 35.9 5.3 56.6 25.1 61.3 42.3 4.6 16.9 10.8 269.6 10.8 300.1 0 13.6-6.4 29.1-16.6 40.6 -8.9 10-25.1 21.9-51.4 21.9 -19.7 0-35.1-5.7-45.6-17.1 -8-8.7-11.4-18.7-12.6-24 -1.1-6.2-3.2-76-3.9-156.7 -0.8-93.5 0.9-157.1 4.4-170 4-14.9 13.3-23.8 20.3-28.5C360.3 226.6 370.6 223.3 380.1 223.3M380.1 216.3c-20.1 0-47.1 13-55.3 42.9 -9 33-3.1 319.4-0.6 329.9 2.5 10.5 14 46.5 65 46.5s75-41.5 75-69.5c0-28-6-283.4-11-301.9s-26.5-41.4-67-47.4C384.2 216.5 382.2 216.3 380.1 216.3L380.1 216.3z"/> <path class="component__icon__spinner--2L" d="M224.7 682.4c-2.7 0-4.4-0.2-4.5-0.3 -0.5-0.1-15-2.1-29.3-11.6 -13.4-8.9-29-26.3-27.9-58.4 0.5-13.9 0.9-40.5 1.4-74.1 0.8-52.6 1.8-124.5 4-187.3 2.6-74.9 6-120.6 10.7-139.6l0 0c3.1-12.9 19.8-50 54.9-51.8 15.3-0.8 27.7 8 35.9 25.4 5.7 12.1 7.3 24.2 7.5 25.2 7.4 50.7 9 358.4 0 416.3 -2.8 17.7-10.5 41-31.9 51.2C237.2 681.7 229.4 682.4 224.7 682.4zM188.8 213.5c-10.2 42-12.8 219-14.4 324.6 -0.5 33.7-0.9 60.4-1.4 74.4 -0.8 22 7.1 38.8 23.5 49.7 12.4 8.3 25 10 25.1 10 1.6 0.2 37.8 4.8 45.9-47.3 8.9-57.5 7.4-363.2 0-413.4v-0.1c-0.1-0.4-5.9-43.4-33-42C205 170.9 190.9 204.5 188.8 213.5L188.8 213.5z"/> <path class="component__icon__spinner--2R" d="M370.6 682.4c-4.7 0-12.5-0.7-20.8-4.7 -21.4-10.2-29.2-33.5-31.9-51.2 -9-57.9-7.4-365.7 0-416.4 0.1-1.1 1.8-13.2 7.5-25.2 8.2-17.4 20.6-26.2 35.9-25.5 35 1.8 51.8 38.8 54.9 51.7 10.4 43 13.1 220.8 14.6 326.9 0.5 33.7 0.9 60.2 1.4 74.1 1.2 32.1-14.5 49.4-27.9 58.4 -14.3 9.6-28.7 11.6-29.4 11.6C374.9 682.2 373.2 682.4 370.6 682.4zM359.5 169.4c-26.1 0-31.6 41.6-31.7 42v0.1c-7.4 50.2-8.9 355.9 0 413.4 3.5 22.3 12.3 37 26.3 43.8 10.1 4.8 19.4 3.6 19.5 3.6 2.1-0.3 50.5-7.5 48.7-59.8 -0.5-14-0.9-40.6-1.4-74.3 -1.6-105.8-4.2-282.7-14.4-324.7 -2.2-8.9-16.3-42.5-45.7-44C360.4 169.4 359.9 169.4 359.5 169.4z"/> <path class="component__icon__spinner--1L" d="M240.7 615.2c-16.7 0-37.3-8.2-48-44.1 -4.1-13.7-0.6-121.2 0.6-153.8 2.4-66.2 6.3-141.3 8.9-149.9 6.2-20.6 24-30.1 37.9-30.1 0.1 0 0.1 0 0.2 0 10.4 0 20.5 4.1 27.7 11.2 6.9 6.8 10.6 16 10.6 25.8 0 4.4 0 20-0.1 41.9 -0.1 74.8-0.3 230.4 0.1 254 0.5 29.4-10.1 43.3-34.3 44.9l0 0C243.1 615.1 241.9 615.2 240.7 615.2zM240.3 243.2c-0.1 0-0.1 0-0.2 0 -11.8 0.1-26.8 8.2-32.1 25.9 -2.1 6.9-6 73.5-8.6 148.4 -3 83.9-3.4 143.5-0.9 151.9 8.3 27.9 23.6 41.3 45.4 39.7l0 0c20.8-1.4 29.1-12.7 28.7-38.8 -0.4-23.8-0.2-179.4-0.1-254.1 0-21.9 0.1-37.4 0.1-41.9 0-8.2-3.2-15.8-8.9-21.5C257.6 246.6 249 243.2 240.3 243.2z"/> <path class="component__icon__spinner--1R" d="M354.6 615.2c-1.2 0-2.4 0-3.6-0.1l0 0c-24.2-1.7-34.8-15.5-34.3-44.9 0.4-23.7 0.2-179.3 0.1-254 0-21.9-0.1-37.5-0.1-41.9 0-9.8 3.8-18.9 10.6-25.8 7.2-7.2 17.3-11.2 27.7-11.2 0.1 0 0.1 0 0.2 0 13.9 0.1 31.7 9.5 37.9 30.1 2.6 8.6 6.5 83.7 8.9 149.9 1.2 32.6 4.7 140.1 0.6 153.8C391.9 606.9 371.3 615.2 354.6 615.2zM351.4 609.1c21.9 1.5 37.1-11.9 45.4-39.7 2.5-8.4 2.2-68.1-0.8-151.9 -2.7-74.9-6.6-141.5-8.6-148.4 -5.4-17.7-20.5-25.9-32.2-25.9 -8.9 0-17.5 3.4-23.6 9.5 -5.7 5.7-8.9 13.3-8.9 21.5 0 4.4 0 20 0.1 41.9 0.1 74.8 0.3 230.4-0.1 254.1C322.2 596.4 330.6 607.6 351.4 609.1L351.4 609.1z"/> </svg>
  11. Having problems scaling an element up and then back down to original value, if there is transform="matrix()" applied. The particular case of <use> element with transformation applied loses the transformation in the process of animation. Is there a way to respect original scale values in order to programmatically create this hover effect without the objects flipping? Thanks in advance!
  12. Hi All I forked Carl's solution to a previously answered question incrementing the scale value onclick. (June 2014) http://greensock.com/forums/topic/9759-how-to-get-or-increment-the-scale-value/ Here is my fork: http://codepen.io/nushi/pen/bVOpzM My conundrum: How can I set a maximum value to the zoom in/out functions I have created? In the thread Ilink above there is a post about this very thing but I cannot get this to work,. I think I am still not 100% sure about JS objects, targeting them and making it work in this case. Here is what the post stated as a solution: Can anyone give me a helping hand here? Thanks! Ana (aka Coco) lol
  13. Hello, I am working with SVG object (Map), I have divided it by regions and now trying to append on-click zoom-in and zoom-out function. I have decided to make zooming function via changing Transform's "scale" and "translate" properties. Example is here: https://codepen.io/Creedplay/pen/oLRPjY Just check JS lines, and for test click on red object. I have used TweenMax library for transition change of up mentioned properties. My problem is a visual of transition, the "zoom effect" does not go straight to object, it starts from left and then goes to object. I think reason for it is asynchronous change of "scale" and "translate" properties. but I am not sure how to fix it. Can anyone explain why it does this? and help me to fix? I would like to make "zoom effect" to look like this: https://bl.ocks.org/mbostock/9656675 Thanks in advance.
  14. Hello, I'm trying to scale a div containing an image. The animation is alright and does what I want, but I have a strange blur during the zoom, and after the animation is complete, the image is focused again. I've linked my codepen, I don't know where it comes from, and I try some fixes, but none of them works. Thanks for help, Arthur
  15. When using Chrome the text is blurred during the animation and then at the end the text snaps clear and normal. Does not do that with Firefox or Edge. How do I get rid of the blur when viewing with Chrome. Thank you, Kv2
  16. I am trying to have an element scale on mouseover but the div and the text inside is pixelated. I can't figure out why... http://codepen.io/dchadney/pen/BnlFi
  17. I am using TweenMax to animate the appearance and scaling of a Popup. It works fine in one view, but in another it occasionally does not appear until after the user starts to scroll the page beneath the Popup. The popup is just a div with three lines of text in three p elements. The animation of the popup is done as follows: var clickPos = String(event.detail.x) + 'px ' + String(event.detail.y) + 'px'; that.rootNode.appendChild(that.viewRoot); TweenMax.set(that.viewRoot, { scale: 0 }); TweenMax.to(that.viewRoot, 0.7, { scale: 1, transformOrigin: clickPos, immediateRender: true }); The css for the popup is as follows: #attribution { position: fixed; width: 80%; top: 10%; margin-top: 7%; margin-left: 7%; margin-right: 7%; padding: 3%; text-align: center; z-index: 200; background-color: rgba(255, 246, 233, 0.9); border-radius: 25px; border: solid; border-width: thin; box-shadow: 4px 4px 4px #777; -webkit-box-shadow: 4px 4px 4px #777; } Any ideas what could cause the delay in drawing, which sometimes occurs? When the program first starts, it will work fine, but after a while each popup does not appear unless one starts to scroll. Thanks for any help.
  18. Hi there, GSAPJS does a great job to bring AS posibilities to JS. However there is one thing that seems to be missing - and i might probably be out of scope but i'll go ahead and ask: Is there a convenient way in GSAPJS to easily get values back from the transform property - scaleX, scaleY, RotationX, skewX etc... ? Or do we need to work with the 2D and 3D matrix? Right now I'm using $("selector").data(key, value) to store (set/get) these variable but I was hoping to find a better way of accessing these values in real time. Anyways, here is an example that works fine using $().data() : http://jsfiddle.net/Dqg2n/3/ Thanks for your work, you make coding so conveninent!!
  19. I’m looking for some help, please. I’d like to use the zooming effect like in the quoted Pen, but the viewBox attribute isn't behaving as I expected and I can’t tell what I’m doing differently. Here’s the original Pen with the issue: http://codepen.io/kylegach/pen/jqYaYp (Edit: this is now fixed, but the simplified one still exhibits the issue, for reference) And here’s a simplified test case without GSAP to show that even a static viewBox isn’t behaving the same as PointC’s example: http://codepen.io/kylegach/pen/ONzzaG I’ve also read this (excellent) explanation of the SVG viewport, viewBox, and preserveAspectRatio: https://sarasoueidan.com/blog/svg-coordinate-systems/, but I just cannot determine why mine isn’t working. Any help would be appreciated. Thanks!
  20. Hi everyone ! I got a problem with Firefox. I'm trying to scale dot with transformOrigin set as "center", like in the code below: TweenMax.to(flux, 0.15, {scale: "1", transformOrigin:"center", delay: delayFlux}); In Chrome, I don't get any problem, the dot scale up properly (first gif). But in Firefox, the dot does something weird like in the second gif. I've tried with transformOrigin: "50%" or "50% 50%" without success. Do you have any idea about that problem ?
  21. Hello, i'm new in GSAP and i found a strange bug when try to use {scale: 60} round object Screenshot: https://goo.gl/GgkaLt Edge: https://goo.gl/nm6l5G =D Codepen: http://codepen.io/wildsol/pen/Boryxg Any ideas? PS: If use {width: 300, height: 300} - everithing is good PSS: If i use css animation transform: scale(60) - everighting is good
  22. I tried using svg-pan-zoom to zoom an svg via the mouse wheel. It centers the zoom at the point of the mouse location. But I cannot get it to work with GSAP. (The codepen shown here does not use svg-pan-zoom). Does anyone know of an svg zoom library that zooms with the mouse and integrates with GSAP?
  23. I don't have a live example to show just yet, but here is my problem. I have a button with a shine that runs across it when you roll over. The shine is within a div that has its overflow property set to hidden. This is so the excess shine image is cropped. But when I animate the scale of any other element in my document, it releases the overflow on the button. When I scale an element back to normal size, the overflow property becomes hidden again. Why is the scale property causing that? (ex: TweenLite.to(object, .25, {scaleX:.5, scaleY:.5});
  24. I've created a bunch of divs that contain circle background images on my site. I've set them up to expand/contract on hover/mouseleave. The hover expand works great, but I can't get the transform origin to change. Maybe it's because they are absolutely positioned (which I can't change), but they all seem to expand from different starting points. The ones above expand from the top and the ones below from the bottom. Is there any way to get them all to expand from the center?
  25. Just finished making these two short codepens to demonstrate. This Draggable has a separate drag handle for the drag item, and on release it scales the entire drag item up. If you click on the handle while it's scaled up, I want the item to shrink back to it's normal size only while you are dragging. However, I can't figure out how to make it stay under your mouse where you actually clicked the handle. codepen 1 - instantly scale-down: http://codepen.io/anon/pen/VerJdJ codepen 2 - animate scale-down (this is what i would prefer if possible): http://codepen.io/anon/pen/JGOQYZ I thought maybe while scaling, if I could change the transform origin to where the mouse pointer is that would fix it, but unfortunately there are other coordinates in the application that rely on the transformOrigin being 50%, 50%. Is there a way to do this? Outcome: 1.) The item shrinks but is no longer under your mouse pointer. Even attempting to relocate it manually seems wonky (see codepen and other things I have tried below) Expected Outcome: 1.) the item shrinks and remains attached at the same offset to the mouse (appearing to scale at your mouse point, as if your mouse point were the origin) Things I have tried: 1.) in the onDragPress, I attempted to get the the mouse coordinates within the drag target's container and instantly relocate the item to those coordinates. That results in bazaar behavior. 2.) I've attempted calling myDraggable.update() before and during setting the scalethe scale animation, and onDragMove Any help is appreciated, thanks a lot in advance! Also, let me say: TimelineLite and TweenLite are some of the most incredible libraries I've used. Pushing my company to purchase a member license.
×