Search the Community
Showing results for tags 'viewbox'.
Found 7 results
-
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 -- effectively spinning around a fixed point on the page. So... the outer Group element ('street' in my codepen example) needs to behave like a parent-filler rather than a child-wrapper, with the origin offsets relative to the parents offset and dimensions. Note: The content items can be arbitrary i.e. multiple houses, cars etc. (set by a user), and the content may also exceed the bounds of the purple view box. None of these factors should affect the pre-defined rotation origin of the 'street'. (start) (desired @ 90 deg)
-
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 view same code pen full screen. -> this I'm sorry if the codepen is messy, I tried clearing it out as much as I could. It is imperative for me to have the viewbox set, for resizing and centering the whole SVG. I feel like I need to tell Greensock that the view box has changed with Snap or something like that. Help? What did I miss? Thanks One below is working as expected, only this was removed on load ////remove below var svg = Snap('#svg'); svg.attr({ viewBox: "0 0 1280 720", width: "100%", height: "100%" }); //////////remove to here This one setting the initial position of the slider wrong:
-
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 extreme left position of the draggable the viewBoxes start at (foreground:0, middle:1500, background:3000). At the extreme right position of the draggable the viewBoxes end at (foreground:12000, middle: 10500, background: 9000). The math in the drag handler will be determined by your SVG size and the draggable min/max. If you want to try this, it’s best to plan how far you’ll be allowing each layer viewBox to travel while creating your artwork so you can line things up correctly. In my demo, the artwork on the foreground at x:0 will line up with the artwork at middle x:1500 and background x:3000. Adding guides in your vector software for those boundaries makes setup a breeze. Of course, you can make this work with any size SVG and the effect can be extreme or subtle depending on your needs. Happy tweening everyone.
-
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), wd = parseInt($(this).width()), ht = parseInt($(this).height()), stageTween, wordTween; stageTween = TweenMax.to(stage,1,{ attr:{ viewBox: `${x} ${y} ${wd} ${ht}` } }); wordTween = TweenMax.to($(this),1,{opacity: 1}); tl.add(stageTween,time); tl.add(wordTween,time); time += 1.5; }); } I set the opacity of each word to 0 initially and then tween the viewBox to fill the screen with each word. I just used a time variable as a counter and am doing tl.add for the viewBox tween and the fade starting at the same time then waiting a half second to start the next viewBox/word tween combo. I've tried lots of ways to time this but it gets wonky on me real fast. Was trying to tween over to the next word and then fade the word in, leave it there for a half second (really want the time it stays to be variable ultimately) and then move to the next one. Probably just having a bit of a brain-f... er, uh, brain-cramp but it seems like the opacity tween always starts before the viewBox tween causing the timing to get off. Also seeing a flash of the un-zoomed text. One thing to note is that if you set opacity to 1 in the stylesheet and comment out the opacity tween, everything runs smoothly. It's like adding the opacity tween forces the viewBox tween to wait for it to finish. (Also, this is being created in Electron so I'm not worried about this not working in Firefox.) Any idea what's going on? By the way, the codepen I started with (and am currently working on with a form element and dynamically created content) is here. http://codepen.io/swampthang/pen/PbQNXz - It's more involved so I created the one listed as the codepen for this post as a much simpler, pared down version.
-
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
-
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 section. It’s all one big SVG with 45 animations and fully ready to zoom with the viewBox controls. I’ve added a variety of icon choices and color schemes as well. Hopefully you get some use out of it or at least a reminder of how some of the eases look. Special thanks to @greensock, @sarah_edo (Sarah Drasner), @vlh (Val Head) and @snorklTV (Carl Schooff) for the tweets/retweets this morning. It helped push my pen to the top of CodePen for a while which was pretty cool.
-
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!
