Jump to content
GreenSock

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

Search the Community

Showing results for tags 'svg'.



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

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

  1. I'm a complete newbie to GreenSock. I'm encouraged by what I've seen here (really, really amazing stuff). I'm trying to render in code and images/vectors a version of something I've already done in video. I've deployed this little site and was asked to animate some images behind their logo (using the logo as a mask). The site is located at https://momentovillasdelmar.com. The image of the logo is done as a video -- with the commiserate file size and limitations of video. I'm seeking a solution that uses an SVG to mask the 4 or 5 images that are sliding around and cross-fading behind the mask. Is this something that can be done (I know it has to be)? I would very much appreciate any insight you all might be able to provide. -- Doug
  2. GreenSock

    MorphSVGPlugin

    MorphSVGPlugin morphs SVG paths by animating the data inside the "d" attribute. The video explains more... It has never been easier to morph between SVG shapes. First, let's cover what this new plugin can do: Morph <path> data even if the number (and type) of points is completely different between the start and end shapes! Most other SVG shape morphing tools require that the number of points matches. Morph a <polyline> or <polygon> to a different set of points There's a utility function, MorphSVGPlugin.convertToPath() that can convert primitive shapes like <circle>, <rect>, <ellipse>, <polygon>, <polyline>, and <line> directly into the equivalent <path> that looks identical to the original and is swapped right into the DOM. Draw the resulting shape to <canvas> (via a render function or set a MorphSVGPlugin.defaultRender) Use either linear interpolation (the default) or a newer "rotational" type to get more natural looking morphs Optionally define a "shapeIndex" that controls how the points get mapped. This affects what the inbetween state looks like during animation. Instead of passing in raw path data as text, you can simply feed in selector text or an element and the plugin will grab the data it needs from there, making workflow easier. How does it work? MorphSVGPlugin does a ton of heavy lifting so that you don't have to. You can morph a circle into a hippo with a single line of code: TweenLite.to("#circle", 1, {morphSVG:"#hippo"}); See the Pen MorphSVG : Docs Basic Usage by GreenSock (@GreenSock) on CodePen. API MorphSVGPlugin needs to know what shape to morph to (and optionally which shapeIndex to use). When only specifying a shape, MorphSVGPlugin can take a wide range of values. Selector string TweenLite.to("#circle", 1, {morphSVG:"#hippo"}); An SVG element var endShape = document.getElementById("hippo"); TweenLite.to("#circle", 1, {morphSVG:endShape}); Points for <polyline> or <polygon> elements: TweenLite.to(“#polygon”, 2, {morphSVG:"240,220 240,70 70,70 70,220"}); Strings for <path> elements TweenLite.to(“#path”, 2, {morphSVG:"M10 315 L 110 215 A 30 50 0 0 1 162.55 162.45 L 172.55 152.45 A 30 50 -45 0 1 215.1 109.9 L 315 10"}); *Note: if the shape you pass in is a <rect>, <circle>, <ellipse> (or similar), MorphSVGPlugin will internally create path data from those shapes. shapeIndex The shapeIndex property allows you to adjust how the points in the start shape are mapped. In order to prevent points from drifting wildly during the animation MorphSVGPlugin needs to find a point in the start path that is in close proximity to the first point in the end path. Once that point is found it will map the next point in the start path to the second point in the end path (and so on and so on). Due to the complexity of vector art there will be times that you may want to change which point in the start path gets mapped to the first point in the end path. This is where shapeIndex comes in. In order to specify the shapeIndex you need to use an object {} with shape and shapeIndex properties. The following code will map the third point in the square to the first point in the star. TweenLite.to("#square", 1, {morphSVG:{shape:"#star", shapeIndex:3}}); findShapeIndex() utility Experimenting with shapeIndex can be a bit of a guessing game. To make things easier we have created a stand-alone utility function called findShapeIndex(). This function provides an interactive user interface to help you visualize where the start point is, change it and preview the animation. You can load findShapeIndex() from: https://s3-us-west-2.amazonaws.com/s.cdpn.io/16327/findShapeIndex.js Once its loaded you simply tell it which shapes to use. findShapeIndex("#square", "#star"); Or pass in raw data: findShapeIndex("#square", "M10 315 L 110 215 A 30 50 0 0 1 162.55 162.45 L 172.55 152.45 A 30 50 -45 0 1 215.1 109.9 L 315 10"); See the Pen findShapeIndex() Docs by GreenSock (@GreenSock) on CodePen. The best way to get started is to drop your SVG into the pen above and alter the IDs to match your svg. Be sure to watch the video above which clearly illustrates how shapeIndex and findShapeIndex() work. Additional Notes shapeIndex only works on closed paths. if you supply a negative shapeIndex the start path will be completely reversed (which can be quite useful). Converting SVG shapes to paths Technically it’s only feasible to morph <path> elements or <polyline>/<polygon> elements, but what if you want to morph a <circle> or <rect> or <ellipse> or <line>? No problem - just tap into the utility method and have the plugin do the conversion for you: MorphSVGPlugin.convertToPath("#elementID"); You can pass in an element or selector text, so you could also have it convert ALL of those elements with one line: MorphSVGPlugin.convertToPath("circle, rect, ellipse, line, polygon, polyline"); This literally swaps in a for each one directly in the DOM, and it should look absolutely identical. It’ll keep the attributes, like the “id” attribute. So after the conversion, you should be able to target the elements pretty easily, just as you would before. <!-- An svg Like this: --> <rect id="endShape" width="100" height="100" fill="red"/> <!-- becomes --> <path id="endShape" fill="red" d="M100,0 v100 h-100 v-100 h100z"></path> Rotational Morphs? Canvas? Documentation View the official docs here for a full breakdown of the API. MorphSVGPlugin Examples Official MorphSVGPlugin Demo (at the top of this page) by Jack Doyle SVG Pencil Download by Chris Gannon "!?" to GreenSock Logo by Chris Gannon Send Email Success/Failure by Chris Gannon Father & Son by Diaco Count Down & Count Up by Chris Gannon Life is Short by Chris Gannon Bow & Arrow by Chris Gannon Simple Polyline Morphing by Jack Happy/Sad Face (click the face) by Chris Gannon Bad Hair Day (click the face) by Chris Gannon Flame by Sarah Drasner Interchangeable Hipster by Sarah Drasner Floating Duckie by Brad Larson Power of GSAP (lightening) by Diaco Animal Shapes by Carl Schooff Get your hands on MorphSVGPlugin MorphSVGPlugin is a bonus plugin for Club GreenSock members ("Shockingly Green" and "Business Green" levels). It's our way of showing our gratitude to those who are fueling innovation at GreenSock. To download MorphSVGPlugin, just log into your account dashboard and grab the latest version of GSAP. Try MorphSVGPlugin for free on Codepen! There's a special [fully-functional] version of MorphSVGPlugin that we link to in our demos in our MorphSVGPlugin Collection on CodePen, so feel free to fork any of them, add your own SVG graphics, and take MorphSVGPlugin for a spin. Codepen is a fantastic way to experiment. We highly recommend it. Note: the special version of the plugin will only work on the Codepen domain. To find out more about the many benefits of being a Club GreenSock member swing on by the club page and be sure to check out the other premium plugins.
  3. I have an SVG path styled to look like a dotted line. I want the path to look like it's drawing in. I created a mask and tried to animate the mask path but it refuses to draw. In the Codepen example, I found that the mask animation worked if I modified the SVG and gave the path a few bends. Does the straight line confuse DrawSVG because it doesn't know what the start/end points are? How can I get the straight line's mask to animate? edit: Fix appears to be adding maskUnits="userSpaceOnUse" to the mask definition in the SVG. Stack Overflow link
  4. GreenSock

    DrawSVGPlugin

    DrawSVGPlugin allows you to progressively reveal (or hide) the stroke of an SVG <path>, <line>, <polyline>, <polygon>, <rect>, or <ellipse> and you can even animate outward from the center of the stroke (or any position/segment). It does this by controlling the stroke-dashoffset and stroke-dasharray CSS properties. Watch the video The video below illustrates the many ways DrawSVGPlugin can be used and will get you up and running fast. Demo Click through the demo below to see the various ways you can provide values to DrawSVGPlugin. See the Pen DrawSVGPlugin Values: carl click next by GreenSock (@GreenSock) on CodePen. More details For more detailed usage notes please consult the DrawSVGPlugin API documentation. The docs are loaded with tons of info that will help you get the most out of DrawSVGPlugin. Get your hands on DrawSVGPlugin DrawSVGPlugin is a bonus plugin for all Club GreenSock members. It's our way of saying "Thank you" to those that are fueling innovation at GreenSock. To download DrawSVGPlugin, just log into your account dashboard and grab the latest version of GSAP. Try DrawSVGPlugin for free on Codepen! There's a special [fully-functional] version of DrawSVGPlugin that we link to in our DrawSVGPlugin Codepens, so feel free to fork any of them, add your own SVG graphics, and take DrawSVGPlugin for a spin. Codepen is a fantastic way to experiment. We highly recommend it. Note: the special version of the plugin will only work on the Codepen domain. To find out more about the many benefits of being a Club GreenSock member swing on by the club page and be sure to check out the other premium plugins.
  5. Hello, I've adapted an existant codepen to a jquery plugin in order to animate a svg into a random wave effect. I managed to use tweenMax in order to smooth the animation but i dont know if i've done that properly or if something can be improved or re-writed in a more clever way. Feel free to copy the jquery plugin if you need it Best regards,
  6. MorphSVG's default settings typically deliver beautiful results but sometimes you may need to tweak things to get a certain effect or avoid weird transitional states or kinks. This video explains advanced features of MorphSVGPlugin that give you plenty of flexibility. Watch the video For more information and plenty of interactive demos, check out the MorphSVG docs. Happy tweening!
  7. GreenSock

    Slice SVG Text

    See the Pen Quick Tip: Slice SVG Text in a Pattern by Craig Roblewsky (@PointC) on CodePen. This example comes from our forums' moderator Craig Roblewsky. For a little backstory on this approach read: https://greensock.com/forums/topic/19229-svg-quick-tip-sliced-text/
  8. Did you know that you can use Draggable on SVG elements? In fact, Draggable normalizes behavior for typical DOM elements and SVG elements across all browsers. Watch how easy it is to make multiple SVG elements draggable, implement hit-testing for a drop area, and animate them with only a few lines of code! Demo See the Pen Draggable SVG Icons (video) by GreenSock (@GreenSock) on CodePen. Watch the video Feature Summary Touch-enabled - works great on tablets, phones, and desktop browsers. Incredibly smooth - GPU-accelerated and requestAnimationFrame-driven for ultimate performance. Compared to other options out there, Draggable just feels far more natural and fluid, particularly when imposing bounds and momentum. Momentum-based animation - if you have ThrowPropsPlugin loaded, you can simply set throwProps:true in the config object and it'll automatically apply natural, momentum-based movement after the mouse/touch is released, causing the object to glide gracefully to a stop. You can even control the amount of resistance, maximum or minimum duration, etc. Impose bounds - tell a draggable element to stay within a container element as in bounds:"#container" or define bounds as coordinates like bounds:{top:100, left:0, width:1000, height:800} or specific maximum/minimum values like bounds:{minRotation:0, maxRotation:270}. Complex snapping made easy - snap to points within a certain radius (see example), or feed in an array of values and it'll select the closest one, or implement your own custom logic in a function. Ultimate flexibility. You can have things live-snap (while dragging) or only on release (even with momentum applied, thanks to ThrowPropsPlugin)! Sense overlaps with hitTest() - see if one element is overlapping another and even set a tolerance threshold (like at least 20 pixels or 25% of either element's total surface area) using the super-flexible Draggable.hitTest() method. Feed it a mouse event and it'll tell you if the mouse is over the element. See a simple example. Define a trigger element - maybe you want only a certain area to trigger the dragging (like the top bar of a window) - it's as simple as trigger:"#topBar". Drag position, rotation, or scroll - lots of drag types to choose from: "x,y" | "top,left" | "rotation" | "scroll" | "x" | "y" | "top" | "left" | "scrollTop" | "scrollLeft" Lock movement along a certain axis - set lockAxis:true and Draggable will watch the direction the user starts to drag and then restrict it to that axis. Or if you only want to allow vertical or horizontal movement, that's easy too using the type ("top", "y" or "scrollTop" only allow vertical movement; "x", "left", or "scrollLeft" only allow horizontal movement). Rotation honors transform origin - by default, spinnable elements will rotate around their center, but you can set transformOrigin to something else to make the pivot point be elsewhere. For example, if you call TweenLite.set(yourElement, {transformOrigin:"top left"}) before dragging, it will rotate around its top left corner. Or use % or px. Whatever is set in the element's css will be honored. Rich callback system and event dispatching - onPress, onDragStart, onDrag, onDragEnd, onRelease,, onLockAxis, and onClick. Inside the callbacks, "this" refers to the Draggable instance itself, so you can easily access its "target". Even works in transformed containers! Got a Draggable inside a rotated/scaled container? No problem. No other tool handles this properly that we've seen. Auto-scrolling, even in multiple containers! - set autoScroll:1 for normal-speed auto scrolling, or autoScroll:2 scrolls twice as fast, etc. The closer you move toward the edge, the faster scrolling gets. See a demo here Sense clicks when the element moves less than 3 pixels - a common challenge is discerning if a user intends to click/tap an object rather than drag it, so if the mouse/touch moves less than 3 pixels from its starting position, it will be interpreted as a "click" without actually moving the element. You can define a different threshold using minimumMovement config property. All major browsers are supported. View Draggable Docs Codepen Collection
  9. Hi, first of all i want to thank you for GSAP being awesome. Creating my site, i noticed strange behavior. I have complex animation, wchich goes forward/backward depending on wether element is clicked even or odd times. Everythings works pretty well exept for one part. I have svg stars empty inside with clipped rect to animate 'loading' the stars. While rest of animation works back and forth without any issues, here works well for the first time, then each consecutive time looks like there is one more animation interfering with the rest. It,s hard to explain it precisely, due to my limited english, however it's clear in the example i attached . Just click a few time and observe the effect. For demostration purposed, I removed all well-functioning parts of animation.
  10. 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?
  11. Hi there, I've been enjoying making some animations with GreenSock today and I've run into a problem. I have a feeling that the solution is simple and that I am just missing it through sheer obliviousness. Perhaps you could point me in the right direction. I'm working with a compound path that I made in Illustrator and saved as SVG. My two paths are described using the d attribute, with one shown and the other {visibility: hidden}. I'm attempting to use the morphSVG plugin with TweenLite. I've tried: using the id name as a string "#hamburger" saving the element in a JavaScript variable and passing that in passing in the path string from the d attribute. None of these options is working for me! From the docs vs my code: TweenLite.to("#circle", 1, {morphSVG:"#hippo"}); // GSAP Docs TweenLite.to(hamburger, 1, {morphSVG: "#hamburger"}); // My Code When I try using a JavaScript variable, the console error is: invalid morphSVG tween value: [object SVGPathElement] When I use the id string, the console error is: invalid morphSVG tween value: #close When I use the path string, there's no console output. However, watching the containing div's classname, I can see that the code is being run. I thought the case might be because I was using compound paths instead of simple paths. I made a circle and star path in Illustrator and tried to use those instead. Same problem as far as I can tell. Well, if you could give it a try on the CodePen and offer a suggestion as to how I can address this I'd appreciate it. Thanks!
  12. Hello, I have implemented an animation with text shadows for my text using CSS, and would like to achieve the same effect on my SVG file. Basically what I need are two shadows with different colors moving away from eachother. I tried using SVG animations but then I found out about GSAP, which seems like a very good thing to know how to work with. But since I'm new to all of this I'm giving up after trying about 10 different things. You can pretty much see all the things I've tried commented out. Sorry if it's too much text but I wanted to make sure there'd be enough context. Thanks in advance.
  13. Hi, I have created a minimalistic code pen to replicate the scenario CodePen. What I want to achieve is: Child (the cyan rows) should also be dragged along with the parent (greyed area) Child (the cyan rows) should be independently draggable within that grey area This works fine in Microsoft Edge and FireFox desktop browsers but doesn't work in Google Chrome
  14. Hi. I created a simple SVG witch is nothing more than a black rectangle that covers the screen and a transparent circle in the middle. Its purpose is to give the appearance of zooming in/out on the image behind it, thereby blocking out the image except for what is seen through the transparent circle. The above code works fine when I am scaling up, then down, in one motion. However, when I am only wanting to scale down, to draw the circle to the center of the screen, the code behaves in a hap-hazard way. The black rectangle scales improperly. I have tried different approaches, like using opacity zero when scaling-up, then switching to opacity 1 to show the effect, but the result is always the same. If you uncomment the line of js code, you'll see what I am getting. Please have a look at my pen (my first, owing to the demo you provided :0) Note: the pen that is embedded is not running correctly. But does so when I paste the url into the browser. https://codepen.io/don199/pen/wbdgQv
  15. Hi, there's a strange bug I've been coming across and not sure how to fix, it only happens very occasionally, but does always happen eventually if you keep refreshing. Seems like it's something to do with a wrong 'xPercent' calculation? I'm animating every svg elements y position from bottom to top, fine Then I am animating some elements to 'wiggle' their x and y positions. Sometimes the x axis seems to be wrong and they move much too far I originally thought the problem was because I was trying to animate the wiggle from the start, at the same time as moving everythings 'y' position. But I delayed any 'y' position animations until the first 'move up' animation was finished Funnily enough I can't seem to get the codepen to reproduce this bug... Making me think maybe it's network related, something trying to calculate before the svg is fully loaded...? Anyone seen something similar before, any idea what's going on? Is there a less troublesome way to achieve the same effect? I tried using 'x' instead of 'xPercent' but this made a jump in the animation and also xPercent is preferable as the image resizes a quite lot Thanks 🙃
  16. Hey all, I saw a lot of chatter on here that SVG G isn't necessarily supported but figured I would check -- I'm getting a really odd matrix transform for rotation on a SVG G elements. Seems like it's getting a translateX + translateY movement as well and swinging the animation strangely. Works perfectly for just SVG and I could rewrite to break out the g elements to separate SVGs (processor GULP!) but figured I'd check before I consider. The browsers we're supporting take in transform: rotate(90deg) correctly on SVG G and I could probably rewrite for CSS tweens as well but they're always a pain. Anyway, let me know eitherway! Thanks --- I didn't fork the broken codepen and now it's working as intended with the updates below.
  17. In the attached pen, the moving elements do not stay centered on the blue line. The triangle and balloon don't stay attached at their center origins at the "top" half of the blue circular line. They do align as intended on the bottom part of the line. Removing the xPercent/yPercent via the TweenLite.set does make them stay positioned closer to the blue line, but we want them to be centered the whole way around. Or, if you change the xPercent/yPercent to positive 50 instead of negative, it reverses the problem: the shapes attach correctly on the top half of the line, but not the bottom half. Any idea what is happening?
  18. Let me start by saying that I know this is a Chrome/Chromium issue. The CodePen works as expected in Firefox. Also, I know Blake has warned about using foreignObjects but I'm stuck with using them because, in my app, I have to use foreignObjects to render image layers to canvas creating a stack of PNG sequences inside a master SVG. I'm also forced to be able to support Chrome/Chromium. Here's the deal. I've run into a stacking context issue which I thought I had resolved before by doing something subtle to the SVG container using TweenMax to force the browser to do a redraw. Here, though, the issue is a little different. I have to allow my users to shift the order of each foreignObject which I accomplish using a javascript insertBefore. But, as you can see in the CodePen, if you shift the animated element to the back of the stack and then re-run the animation the browser is rendering it on TOP of the stack for as long as the animation is running. Then, once the animation is completed, the browser renders the element to the back of the stack where it belongs. Forcing a redraw like I've done in the past is not working. Any help would be greatly appreciated.
  19. So I've been getting to know the morphsvg and drawsvg plugins the last day or so, and my goal has ultimately been a curved arrow that animates as you see in the attached codepen. The issue I'm having now is that the line for this arrow should be dashed and I'm not sure what the problem is. There's a stroke-dasharray setting on the svg to begin with, but the drawsvg animation seems to override that. So I tried adding a strokeDasharray property to the tween itself but that seems to have no impact (first time using that and honestly not sure if I'm using it properly; couldn't find any documentation on it and only a couple codepen examples of it being used). I have a few, more drastic solutions in mind that seem very hacky to me so I'm hoping there's a clear approach here that I'm just unaware of. Also, if you disable the js and run the pen that will show what I am trying to get the line to look like.
  20. I'm trying my hand at animating SVGs with gsap and having a very rocky start. My ultimate goal is to be able to just animate an arrow to follow a specific path and to autorotate along the path (so that the tip of the arrow is always centered on the line). I figured an easy start to understanding this would be to take the gsap demo code and just make minor changes to it. In this case, I simply replaced the balloon path with an arrow tip and made sure the ids were matching in the js. The problem is that the arrow seems to be all over the place in regard to the line it's supposed to be following. I've tried some minor changes in the code (adding transforOrigin properties, changing the x and y percentages on the set method) but I feel like I'm sort of throwing darts here and not seeing any real progress. If anyone could clue me in as to what I'm missing here, that would be fantastic (hopefully this exposes a fundamental misunderstanding I have of SVGs and animating them).
  21. Dear GSAP comrades, Why do I get for some HOSTED DrawSVG animations from codepen 1 FPS when using CHROME on Mobile? They work fully FINE ON FF but just not on CHROME! How can this be? Only on Codepen it runs also well on mobile. Can someone solve me the riddle? Thanks for any suggestions, Mat
  22. Alright Guys, I have a little challenge / question for you. I really want to be able to get SVG path d attribute data into a format that BezierPlugin can use. So given this string M0,0c0,0,14,184,157,184V86h173c0,0,105-3,105,93, I'd want either an array of all the x/y values of all the anchor and control points like [0,0,0,0,14,184,157,184,157,184,157,86,157,86,157,86,330,86,330,86,330,86,435,83,435,179] or an array of point objects (which ultimately would get passed to BezierPlugin) [{x:0, y:0},{x:0, y:0},{x:14, y:184},{x:157, y:184},{x:157, y:184},{x:157, y:86},{x:157, y:86},{x:157, y:86},{x:330, y:86},{x:330, y:86},{x:330, y:86},{x:435, y:83},{x:435, y:179}] The end goal is draw a continuous path in Illustrator, smack svg output into an html page, use the svg path for a Bezier tween. This video explains all this in glorious detail: Does raphael, or snapSVG or any other library offer a convenient conversion method? It seems that since the same curves can be represented each way it should be easy to convert 1 format to the other, right? I'm not looking to have a robust tool built that analyzes svgs and builds animations automatically, just a function that I can do convertPath(dPath) { ... //turn dPath string into an Array of anchor and control points return BezierPointData } //usage var bezierAnchorAndControlPoints = convertPath("M0,0c0,0,14,184,157,184V86h173c0,0,105-3,105,93"); Any help is greatly appreciated. Carl p.s: This mission was greatly inspired by Chris Gannon's DrawScript converter: http://gannon.tv/drawscript-to-gsap/ and I'd like to publicly thank Rodrigo for helping me get a good leap into Raphael.
  23. 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:
×