Jump to content
GreenSock

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

Search the Community

Showing results for tags 'viewbox'.

  • 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

  • FAQ Landing Page

Categories

  • Examples
  • Showcase

Categories

  • Products
  • Plugins

Categories

  • Learning Center
  • Blog

Categories

  • ScrollTrigger Demos

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

  1. Hi. I am starting to go mad trying to resolve this, so I thought I would post a question here instead. I am try to implement a rotation such that everything on the page view box (the outermost group -- depicted by the purple outline) rotates about its pre-defined origin point (shown by the cross - located at 50% 50% of view port in this case, but could be anywhere). At present the resultant rotation is relative to the compound contents of the Group (i.e. all the House elements) -- spinning around itself , whereas I need it to be relative to the parent view box -- effect
  2. Hi, I have an interesting(for me) issue I couldn't figure out. The code performs as I expect it to, setting the slider initial position depending on value of "current_value" variable, but only if I don't set the SVG Viewbox with Snap, on document ready. On the Code pen, you can remove that part at the beginning of $(document).ready and the slider sets the initial position correct. If the ViewBox is set, then the slider sets itself on some weird position I couldn't figure out. Mostly it goes out of bounds on the right, depending on the screen size. Try to vi
  3. Here’s another handy little SVG technique for the GS community. I was creating some infographics for a landscaping client and needed an interesting effect for a slider so I went with parallax viewBoxes. I hooked mine to a draggable, but you could tween on button clicks too. The trick is that you’re always showing the same size viewBox for each SVG, but the start point is offset for each one. In my demo, the SVG is 12,000 x 1,000 and the viewBox for each one is 2000 x 1000. The starting viewBox for each is (5000 0 2000 1000). That centers each one on the SVGs. At the extrem
  4. I'm working on a tool that will build kinetic type and really struggling with the timing of things. Trying to emulate this kind of thing - http://aescripts.com/typemonkey/ I'm using a foreignobject in a main SVG with div's containing a span wrapping each word. I'm looping through each word snagging the left, top, width and height and using those variables to fill the main SVG's viewBox attribute using this function: function buildTweens() { var time = 0; $('.word').each(function(){ var x = parseInt($(this).position().left), y = parseInt($(this).position().top),
  5. Hi Greensocks, after reading tons of topics on the subject of animating svg I did not find an answer that works properly for my goal. Now I desperately need your help: Elements inside my svg are scaled to 2.8 by click. After that I need them to be centered inside the viewbox. Scaling works fine, centering does not. Do you have any suggestions? Cheers Gregor
  6. Hey everyone, Warning: self-promotion to follow, but it may help other forum members so here we go. As you already know, easing is an important part of creating a great animation. If you’re at all like me, you like to experiment with a variety of eases and get a feel for how they work in your project. With that in mind, I’ve created a new GreenSock Easing Playground. Yes – we have the Ease Visualizer which is great and I highly recommend it. I wanted to create something a bit different though. My new CodePen offers position, scale and rotation options with 15 ease types in each se
  7. 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, viewB
×