Jump to content
GreenSock

Search the Community

Showing results for tags 'svg'.

  • 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

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

  1. mikel

    ImmediateRender

    Hi, For a recurring animation I wanted to tween a fromTo-Progress and ran into the 'trap' immediateRender. So here's an example: when multiple fromTo () - based tweens are animating the same proprets of the same object. And applied here in a thoroughly funny cartoon for a serious cause: Kind regards Mikel
  2. Hello! My first post here and I'm very new to GreenSock and SVGs in general but I'm hoping I can still get some help on this very basic problem. I've done some searching but can't find what I'm looking for. I have several SVG files and I'd like to change the fill color over time but I want to start from a specific point and fill from the bottom to the top rather than just filling the entire shape at once. Any suggestions?
  3. Hi everyone, Im trying to load an external svg and setting new width, position and rotation with GSAP using TweenMax.set. Is it possible? Done many tests and no succes so i am wondering if its possible to set initial transforms to and external SVG with GSAP. Any help super appreciated. here is the code: var squares= s.select("#squares"); var tl = new TimelineMax(); tl.set(squares,{transformOrigin:"50% 50%", rotation:45, x:200, width:30}); And the SVG <?xml version="1.0" encoding="utf-8"?> <svg version="1.1" id="squares" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="100px" height="100px" viewBox="0 0 100 100" xml:space="preserve"> <rect id="orange" x="0.018" y="-0.115" style="fill:#E7B142;" width="100" height="100"/> <g id="grupo"> <rect id="red" x="10.018" y="9.885" style="fill:#C7362F;" width="80" height="80"/> <rect id="green" x="25.018" y="24.885" style="fill:#6AA842;" width="50" height="50"/> </g> </svg> Thanks very much in advance!
  4. leydar

    Janky SVG on iOS

    I'm loading an SVG I created in Inkscape and using it as a control in an Ionic hybrid app with help from GSAP. When a user clicks on the L/R it spins about and disappears to reveal other options. Using it in the browser and on Android works great. On iOS however it's occasionally spotty. This mostly occurs after a reboot. Subsequent interactions are at the desired speed. This might be difficult to reproduce as it's possibly specific to the device I'm using. Having said that, I'm open to completely redesigning how the thing disappears. I just need it to hide and show itself in some aesthetically pleasing manner. Incidentally, I tried using autoAlpha: 0 and it didn't change the opacity or hide the elements. I've isolated the control in an otherwise blank project to better illustrate the issue (github). The video attached shows the control running on an iPhone SE, iOS 11.4, 64-bit A9 SoC processor (two 1.8GHz cores), 2GB RAM, PowerVR GT7600 (six-core graphics). addEventHandlers () { const yingyang: any = document.getElementById("select-side"); yingyang.addEventListener("load", function() { const content = yingyang.contentDocument; const ying = content.getElementById("ying"); ying.addEventListener('click', function() { TweenMax.to(ying, 0.4, { scale: 2, x: "+100%", y: "-50%", transformOrigin:"100% 0%", opacity: 0, force3D:false, autoRound: false }); this.animateSelectSide(yingyang); }.bind(this)); }.bind(this)); }; animateSelectSide(yingyang: HTMLElement) { TweenMax.to(yingyang, 0.7, { rotation: -270, opacity: 0, force3D:false, autoRound: false, onComplete: function() { yingyang.style.left = '-500px'; } }); }; speedkills.MP4 yingyang.svg
  5. Hey I am using this codepen, which uses TweenMax to do the wave animation. 1. I was wondering, the draw function creates a new TweenMax object in each interval. Wouldn't it have some performance issues? 2. I am trying to set the pause and resume functions to work with those waves. But since, the draw function is creating each new object, how can I go about it? Setting a var tween = new TweenMax(); results in uncaught exception: Cannot tween a null target.
  6. Recently was trying to replicate the above codepen in a react component with gsap and the animation completely fails, it doesn't even start or trigger. Can someone help me look for bugs? The codesandbox link is here : https://codesandbox.io/s/402ov4lyr7 Please Help.
  7. Hello, I'm very new to GSAP and also very new to coding. I recently became a Club Greensock member, because I wanted to use the MorphSVGPlugin in Adobe Animate. However, after reading through the forums a bit I learned that MorphSVG doesn't work with Canvas (or something like that)? So now I'm trying to see if it's possible to use MorphSVG directly with Adobe Captivate (I usually build things in Animate then add them into Captivate as a web object). I can't, however, seem to get MorphSVG to work this way either. I've created an external javascript file called 'My.js' and I've loaded that, along with TweenMax, MorphSVGPlugin, and findShapeIndex.js, into my Captivate project on the first few slides. This is the code I use to load the files - function addScript(src){ var s = document.createElement ('script'); s.setAttribute('src', src); document.body.appendChild(s); } addScript('https://s3-us-west-2.amazonaws.com/s.cdpn.io/16327/findShapeIndex.js'); (I did this on a separate slide for each file to load, loading MorphSVGPlugin.min.js first, then TweenMax.min.js, then My.js, then findShapeIndex.js). Then, on the 5th slide of my Captivate project I added two SVG icons that I made in Adobe Illustrator. In Captivate I named them 'back' and 'next'. In my external 'My.js' file I gave them variables and created a function to tween them. I call the function on the 'on enter' action of the 5th slide of my Captivate project where the SVG icons are - var next = window.cpAPIInterface.getVariableValue("next"); var back = window.cpAPIInterface.getVariableValue("back"); MorphSVGPlugin.convertToPath("#nextc"); MorphSVGPlugin.convertToPath("#backc"); function myMorph(){ TweenMax.to("#nextc", 1, {morphSVG:"#backc"}); } I used the identifier "#nextc" and "#backc" because when I inspect the published html file, their div id's are nextc and backc. When I try it this way, I get this error: WARNING: cannot morph a <DIV> SVG element. Use MorphSVGPlugin.convertToPath(elementOrSelectorText) to convert to a path before morphing. So then I have also tried to just use their variable names I gave them - MorphSVGPlugin.convertToPath(next); MorphSVGPlugin.convertToPath(back); function myMorph(){ TweenMax.to(next, 1, {morphSVG:back}); } but with this method I get an error that it 'Cannot tween a null target' I've added alerts to the beginning of each of the js files (besides from findShapeIndex) so I know they are all loading. Needless to say, I'm pretty confused and not sure what to try at this point. I wasn't sure if this post was better suited for the GSAP forums or the Captivate forums. Any help or advice would be very much appreciated! Thanks.
  8. I'm learning both vue.js and greensock and looking to understand how to use these two wonderful tools in tandem. The position: as I understand it, the point of using vue.js is that you don't need to manually update the dom. Instead, you bind data properties and vue then handles dom updates for you. All you do is change the data property. I have explored using TweenLite and passing in as the first argument something from the reactive data properties of a vue component, e.g. <template> <svg width="20rem" height="20rem" viewBox="0 0 100 100"> <rect :x="rect1.x" :y="rect1.y" :width="rect1.w" :height="rect1.h" :fill="rect1.f" /> <circle id="circle1" class="fill-dark-blue" cx="60" cy="60" r="10" /> </svg> </template> <script> export default { data() { return { // below are not dom elements, but are bound to dom elements by vue rect1: { x: 14.696, y: 13.414, w: 47.574, h: 30.602, f: '#ebebeb' }, // ... }, }, // } // e.g. in mounted(): TweenLite.to(this.rect1, 1.0, { w: 10, h: 50, f: '#ffd700', ease:Power4.easeOut }); What this is doing is tweening the data property which vue then reactively updates each time the data property is changed by TweenLite. i.e. we're tweening a vue data property, which is then reactively updated on each change. It all works fine, which is very cool. However, I cannot use, e.g. { className: 'light-yellow' } in the TweenLite vars, the reason being that to accomplish that animation, gsap will attempt to do it by first sniffing the css properties, then adding a style tag (as seen in action on the excellent intro to greensock short video on this site). That does not work because (my guess) the selector passed to gsap is not actually a dom selector but the vue data property. Hence, gsap doesn't seem to be able to get the dom hook so can't apply the style tag. At least, that's my diagnosis of why it is not working. In contrast, I can get the className animation working by doing this: TweenLite.to('#circle1', 1.0, { className: 'fill-light-blue' }); What the above is doing is going into the dom directly via an id tag and so bypassing vue's data binding. The problem is that in this case, if I have a complex svg, I can no longer benefit from vue's ability to bind into anywhere in the dom simply by updating a data property. I'll have to get into dom navigation. This seems wrong. What does all this mean? Does it mean quite simply that if I want to tween vue data properties (for the benefit of not having to navigate the dom) that the feature set I am going to have available to me from gsap is going to be necessarily limited? I'm not entirely sure at this point how much of TweenLite & Max's power is going to be curtailed by this pattern, as I'm still learning. At this point I really want to grab a couple of good patterns for vue & gsap and get plenty of practice. Just need to settle on a limited set of patterns to practice with. The goal I have in mind here is, say, making a fairly complex svg and animating its component parts with greensock, via vue. Am I doing this right ? Thank you very much for discussion.
  9. Hey there, I've got this SVG map of some counties. in it, I have some markers, that serve a purpose on a live site, however I can't seem to get the little markers to line up properly in Safari only. I pasted it into a codepen with minimal code, and see that it is indeed the case on my Safari, but not on either Firefox or Chrome. Can anyone help me get those lined up for Safari users?
  10. Hey guys. Another Safari issue here. This probably refers to svg gradients more than the actual Tweenmax, but in case someone had this issue before and knows a workaround? I'm trying to animate the stop-color of the gradient to create transparency effect, but in Safari the color is just white with no alpha, and sometimes it doesn't animate at all. I'm not quite sure what is happening.. Any input would help! Thanks a bunch.
  11. aksirob

    Line stroke svg

    Wondering how to create onScroll stroke svg like in example: http://brightmedia.pl. Tried to create it with svg path but did not realized how to make it responsible. This is my site http://mylinks.rocks/trackbox/testing2.html.
  12. I'm trying to create a function that would morph through a series of paths to reach destination. The codepen below tries to do that, but does not move. I did a function with just one intermediary (no group) and it works:
  13. I'm messing around with morphSVG in Code Pen and I'm getting some strange morphs on this after the label "C to D". The first two morphs work really well - and I'm using exactly the same process for the third but the polygons are flipping over instead of morphing in the usual way. I'm not sure whats going on.
  14. I'm trying get the white circle to tween to the center of this green square after it has been dragged and dropped onto it. Can't quite seem to get it going - feels like something I should know at this point.
  15. I'm trying to rotate this robot arm around its shoulder. Id like to have the purple circle stay in one place and for the arm to rotate around its center, but I cant get it to work.
  16. Is there a way to use the GSAP TextPlugin to animate SVG Text so that different words within one text element have different colors?
  17. Unable to animate. Please help me with this.
  18. 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.
  19. I've been having some fun with the Bezier Plugin and am starting with a set of path options for the user to choose from. I've been looking for a way to change a given path's points to fill any stage size by either height or width. I set up a starting point in the codepen with a select menu to resize and an example path. I wondered if there might be a hidden gem in GSAP's amazing arsenal that would be able to do this conversion of points. Fingers crossed!
  20. I am working on implementation of another developer. I am not familiar with this library yet. So, this issue might be a configuration issue or something like this. It's only on iphones (tested on 4S & 6S) the svg animations are shown only when the page is scrolling! I was expecting the opposite behavior really. I have placed console messages and I figured out that the animations are applied correctly but are not rendered on the screen. When we scroll the screen even a little bit, we get the current position of the animated objects. Since we have lost some frames the animation looks like it jumps. So this means that the animations are working behind the scene. I have also placed console messages and I saw that everything is working fine and simply the dom is not updated. When I scroll the screen slowly the animations are running normally. It looks like the svg changes are blocked for performance issues??? I don't know. This happens only on iphones!!! It tested and it works on: - mac desktop (safari, ff) - win desktop (ie11!!, edge, ff, chrome) - android (chrome) is not working on: - iPhone 4s, 6s (safari and chrome!) - ipad (safari)
  21. Hi, First post here so sorry if I'm asking something that has been answered, but I did a search and didn't find what I needed. Here's my project and what I'd like to do: Create a large infographic with lots of groups in Illustrator. Export the large infographic as ONE large SVG. Copy the inline SVG code and paste it into the body of an HTML page. Animate the individual elements of the ONE large SVG. I've attached a JPG of an example infographic. It contains ten sections. I'd like to be able to access individual SVG elements (e.g. <rect>, <g>, etc.) in each section and animate them using Greensock. Also, I attached a Codepen with a much simpler SVG with only two sections. I have tried to simply move the white rectangle in the top section but have been unable to. I set the id of the white rectangle to "logo." I'm just using the simple code from the first Jump Start tutorial. I'd like to be able to animate each of these elements on hover, clicking, etc. For example, in the codepen, I'd like to be able to rotate the wheel by clicking the "click me" button. Thanks.
  22. Hi, I want to animate some paths svg like below (see images, please). Has anybody any idea? Thanks!
  23. Note: This page was created for GSAP version 2. We have since released GSAP 3 with many improvements. While it is backward compatible with most GSAP 2 features, some parts may need to be updated to work properly. Please see the GSAP 3 release notes for details. 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
  24. Hello everyone, This one is making my head hurt for few days, there's a lot of similar topics but I just still don't get it, or maybe the thing I'm trying to do isn't possible for shapes. (Here the stroke is just large enough to reveal the shape almost instantly, but it still runs half animation in the back animating stroke-dashoffset till the end, that produces some timing issues) I'm still lacking the skill to reveal complex SVG shapes, not sure how to bite it (drawSVG solves this problem for a path) - any suggestions will be a huge help! Trying to do the same thing like @PointC did here - that looks just marvelous. Tried to deconstruct it in Illustrator, made dozens of forks, read about masks/clipping but I still feel like I miss something important. Have a lovely day and happy tweening
  25. Hello, I want to start by saying i'm a noob to programming in general, as to javascript and green sock. As soon as I learned some html and css I dived into SVGs. I have an illustration background so this seamed appealing and most fun to me... I quickly realised that greensock is the way to go... So, I want to animate my logo appearing in a sci-fi kind of way, where there is a bunch of stuff happening. This isn't the logo animation but a test. I want to learn what I can and can't do... I am trying to use a single svg and make it appear a bunch of times using the staggerfrom. The plan was to create a symbol and then call on it as many times as I need. Then make them stagger on to the screen. The problem is I dont know how to call on those symbols with Tween... I tried giving my <use>es Ids, classes and even putting every <use> element inside of a div. The first two just don't make the animation work. When I put it inside of a div then the animation works but the called <use> symbols are just not visible. Am I doing something wrong or is it not possible? Is there a workaround? I know there must be but my general knowledge is limited at best. romb.svg
×