Jump to content
GreenSock

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

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

Categories

  • FAQ Landing Page

Categories

  • Examples
  • Showcase

Categories

  • Products
  • Plugins

Categories

  • Learning Center
  • Blog

Categories

  • ScrollTrigger Demos

Categories

  • CodePen Challenges

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. 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.
  2. 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
  3. 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.
  4. 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?
  5. 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.
  6. 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.
  7. 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:
  8. I am animating svg elements onto the screen with a simple opacity tween, however the elements look like they jump left 1px at the end of the tween, is there some properties I need to set to allow the SVG elements to tween on smoothly and without this weird jump? thanks in advance
  9. 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)
  10. 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.
  11. 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.
  12. 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.
  13. Is there a way to use the GSAP TextPlugin to animate SVG Text so that different words within one text element have different colors?
  14. Unable to animate. Please help me with this.
  15. 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.
  16. 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.
  17. 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!
  18. Hi, I want to animate some paths svg like below (see images, please). Has anybody any idea? Thanks!
  19. I'm on making the bar animation, dropping from top and will be bounced. But during bouncing, I want the bar will be inflated only width from the center, like the image I attached. <rect class="nemo-bar" x="0" y="291.7" width="107" /> Sample RECT And I've done as below, var $nemo_curr = $('.nemo-bar'), tl = new TimelineLite(); tl.to($nemo_curr, 1.5, {height:bar_height,y:bar_space, transformOrigin:"0 100%", ease:Bounce.easeOut}); but the problem is when the transformation being made, also want this Rect will be inflated as the image, naturally. Please help me how can I get this effect.
  20. Hello great almighty GSAP forum, here I am with another question I'm having. Goal create some sort of traveling trail emitter that follows the object and being manipulated by scroll event. Also everything is responsive, relative to the SVG size.Progress/ attempts Got most parts working, however there're a few visual things I just can't figure out. I've tried manipulating x,yPercent, transformOrigin, svgOrigin on the <image> tag inside the <svg> Help needed I'd like to know how to make the image's transform origin to the tip or tail of the arrow how to properly adjust the emit position so it sync with the arrow tail.. Actual travelling route doesn't have to follow the predefined path strictly, it's more important getting the emitter right. I don't know how autoRotate works under the hood, by the look of the relationship between particle and the arrow position, seems like a "invisible bounding box" is created, and the arrow rotate inside the box, and the box takes on the bezier curve data. Question outside of this topic Why isn't <image> tag visible on Safari, let alone IE?? The emitted particle shows on Safari but seems the percentage position is way off? Seems like line 48-51 behave differently on Safari. Added on 19th of April To answer my own question for peoples reference. <image> tag needs an inline width and height attribute in browsers other than Chrome, somehow other browser can't take the CSS and apply it to <image> tag within svg; Thanks a lot!
  21. 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
  22. https://staging.thebirdthebear.com/ I'm working on this particular animation, and having some issues. It's a four-branch frilly thing that is supposed to reveal each branch. Triggered with Scrollmagic. You can see it working properly on the first iteration in the section "OUR CRAFT." Each branch is being revealed by removing the respective mask. My issue however, is that the animation is not animating on the second iteration, "BRYAN & CARYN." The masks in the SVG are called out as IDs, but the paths inside the masks are Classes (they're what are being called here in the code below). I'm not sure if that's the issue or what... Thoughts? const branchDraw = function() { const layerOneMask = document.querySelectorAll(".layeronemask") const layerTwoMask = document.querySelectorAll(".layertwomask") const layerThreeMask = document.querySelectorAll(".layerthreemask") const layerFourMask = document.querySelectorAll(".layerfourmask") const tl = new TimelineMax() for ( var i = 0; i < layerOneMask.length; i++ ){ tl .from(layerOneMask[i], 0.5, { drawSVG: 1, ease: Power2.easeOut }) .from(layerTwoMask[i], 0.75, { drawSVG: 1, ease: Power2.easeOut }, "-=.25") .from(layerThreeMask[i], 0.75, { drawSVG: 1, ease: Power2.easeOut }, "-=.25") .from(layerFourMask[i], 0.75, { drawSVG: 1, ease: Power2.easeOut }, "-=.25"); const scene = new ScrollMagic.Scene({ triggerElement: layerOneMask[i], offset: -300 }) .addTo(controller) .setTween(tl) } } branchDraw()
  23. I'm trying to create a specific button effect when you hover over it. See Image Attached Basically once you open hover on the button it opens on the right and the arrow slides out right. Is there a way to open both ends at the same time on hover for the SVG?
  24. Hi, I'm having to use an SVG mask (so it works on Explorer) I wondered how I would animate the containing image, without moving the mask? See demo
  25. Hello, All I am trying to do is morph one shape (#step0) into (#fullFace0) after a 0.42s delay for 1s and then into (#fullFace0). I've done this before and I'm not sure what I am doing differently causing it to not work. The paths are all siblings with the destination morphs having display:none. I was getting a weird log in the console, but I looked that up and it was because the Morph plugin wasn't being added properly. That is resolved now, but I'm not sure why this morph isn't taking place. Thank you!
×