Jump to content

Search the Community

Showing results for tags 'zoom'.



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 20 results

  1. Hi there, I can't put any demo for example but i will try to explain as much as possible. I'm working on a "map" in SVG where i will have some interactive elements. In my interface, i make a button to zoom up and another to zoom down. I have limited the maximum and minimum zoom possible. Here my function that is making the zoom : TweenMax.fromTo(element, 0.3, { scale:previousScale }, { scale:currentScale, immediateRender:false, ease:ExpoScaleEase.config(previousScale, currentScale, Power0.easeNone), onUpdate:update}); This is in a function that determine the "previousScale" and "currentScale" to do the work. The update variable in my onUpdate paramater is : var update = function () { elementToMove[0].update(true); }; Where "elementToMove" is my draggable object that i have created. My problem : I'm not sure if it's because i have a lot of layers on my SVG, but when i'm zooming, it's lagging a lot. Anyway to keep my big SVG and zoom normaly, without lagging?
  2. Seb-AS

    Draggable + zoom out

    Hi, It's my first time using gsap with react(used a lot in as3), and I've a lot of questions if someone can show me an example o guide me in the right direction. I need to make a map like "google maps", the map it's a div with a background-image and inside svg with point. The issue I'm having it's if I drag the map the +/- buttons scale the map but in the wrong position, my idea it's if I scale up the the map then drag then scale down it should come back and animate to the starting position. Now I'm forcing to move to the starting position if the scale it's equal to 1 window.TweenLite.set(this.map, {force3D: true, ease: ease, scale: minScale, transformOrigin: "center center", x: 0, y: 0, z: .001}); Hope it's something easy to fix. Thanks
  3. Dear GSAP Magicans, you were right: My mind was blown when I saw your ExpoScaleEase Demo today (Link: https://codepen.io/GreenSock/pen/NyXBbV?editors=1010 ). Can you please share some more hints how to create/prepare the asset/image fragments for this kind of animations?! E.g. coming from Photoshop or Illustrator. That what be super awesome. Thanks in advance and keep up the amazing work! --Simon
  4. 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
  5. Hi all, I'm wondering if some of you had the time to work out some code for a magnify effect with greensock. Something like this codepen: http://codepen.io/fernandofas/pen/beqGrM Thanks in advance. Fernando Fas
  6. I don't have a CodePen url as I don't think it's necessary to explain the issue but you'll be able to see what I mean on our website www.britishwebsites.co.uk With a large draggable area, now that ios10 does not allow a developer to easily override the ability to pinch and zoom, it becomes necessary that the pinch-zoom functionality on a draggable area works. If you zoom into a large draggable area (our big map/island) you can not then zoom out again. You would have to zoom in on another part of the website then scroll into the map view, but it is possible to get completely stuck. Are there any plans to make it so the draggable plugin can allow multiple touches to perform the default behaviour (i.e. zooming)? I know I can disable pinch zooming through javascript still, but I suppose it is a good thing to allow users to zoom in on websites which is why Apple have decided to ignore user-scalable=no now.
  7. 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
  8. 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.
  9. 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!
  10. 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?
  11. 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.
  12. Hi, I'm really glad to use GSAP everyday right now, lonly or with Edge Animate. That's pretty fun. But, actually, I try to find a JS class to make multitouch gestures, like Pinch & zoom, rotate, swipes, with multi point events. Are there something like this in GSAP ? Where ? Thanks for your answer. Arzhur
  13. 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!
  14. Hi all, Wonder if you could give me a workaround on this issue: On Homepage, have created cards that use Tweenmax to animate when user clicks on the cards, The cards overlay other cards when clicked. It all works fine, but when we test in browser (chrome, firefox, etc) with zoom activated ( ctrl + mouse wheel scroll ) which activates the browser zoom it breaks apart the animation. When the cards are clicked the cards which are meant to overlay the other cards dont show anymore. Sorry hope this makes sense. Would appreciate any help. Cheers
  15. Hi, Noticed something when zooming in (ctrl + +) in browser the transform origin doesn't scale properly. Is this a bug or am I doing something wrong here? thanks! example: http://codepen.io/skorpa/pen/tcnld
  16. I am trying to make an interactive map with the draggable plugin that zooms in and out. I have made my image an SVG so it can scale well, and my location dots are css. But i have been running into two issues. 1. Since my map is longer than the view port, i can't seem to see the bottom of the map. it keeps scrolling back to the middle if i drag upwards. 2. All the zooming solutions I have found have only been for images. I need to zoom all the elements in the entire div. I started to create my own zoom, which zooms the whole div and the elements in side it. But this presents a couple of issues. First, it zooms in and out at the same spot, I would like it to zoom into the current mouse location. And second if I zoom out at the edge, the div goes out of the visible boundaries so i can't drag it around. As per your requests I created a codepen, http://codepen.io/jermbo/full/LktfB , and I realize this is a very specific situation. Any direction would be greatly appreciated. I just need a push in the right direction and I got the rest of the map functionality. Thanks in advance!! *Plugin Request : Zoomable. If this were a greensock plugin like Draggable I would be the happiest developer in the world!
  17. 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
  18. Hey, when I zoom in it zooms to the top left. I can scroll back to where I was centered, but is there a way to change the registration point? When I zoom in to a specific spot by moving top:-x, left:-x it crops off the top left. Would a better way, than changing the registration point, be appending the bounding box? I tried a couple suggestions with adding draggable, but in all the demos it required something for only paid members. Any ideas would be greatly appreciated. Thanks!
  19. Hello, I have to say that the transform manager is wonderful plugin that meets my expectations and needs except for one thing. In my application people will be given the ability to move, scale and rotate images, but they should also be able to zoom in or out the images without affecting the width and height of the selected item. Also, I need to store this information in a database. How can I do this with the Transform Manager? Thank you.
  20. Hello, I´m trying to make a simple pinch zoom image scroll app in Adobe Air Mobile for Android and ios. I always having the same issue when I try to pinch the image zoom in and I activate the blitmask. I don´t have problems making this part. But when I pinch to zoom out, the image moves to different x and y coordinates, and sometimes the image disappears. IThe image upon zoom out moves off-center and doesn´t return to position zero. I know there is something in the blitmask that changes these values, but I´m not sure what exactly is going wrong. I always use blitmask.update() and enable or disable bitmapMode. Does anyone have an example for Flash with pinch zoom gestures with ThrowProps + blitMask? Thanks.