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

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. Hey all! My first time with a problem that I couldn't solve via the docs or forums on my own. I'm taking a stab at drawSVG and morphSVG. I've had success animating more simply SVG's that were created as icons. When I take a svg logo for a company, I can't seem to figure out how to draw it out or morph. I'm wondering is someone can help me create a simple draw animation for a logo and show me how to build out paths if possible. I haven't been able to find any examples of complex SVG's being animated. If you have any examples that would be great to see as well! Here is the svg code for one of the logos. <svg version="1.1" id="image1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 201 72" style="enable-background:new 0 0 201 72;" xml:space="preserve"> <style type="text/css"> .st0{fill:#FFFFFF;} .st1{fill:#005DAA;} .st2{fill:#E31837;} </style> <path class="st0" d="M192.9,20.8c-3.2-3.9-8.8-6.1-15.5-6.1c-7,0-13.3,2.4-17.7,6.3l0.7-4.5l-1.9-0.6c-2.7-0.8-5.7-1.2-8.6-1.2 c-5.1,0-9.9,1.6-13.9,4.2l1.1-3.7h-30.4l-0.4,1.2c-2.7-1.1-5.7-1.6-9-1.6c-6.3,0-13,2.4-16.5,7.1c-0.2-0.3-0.5-0.7-0.7-1 c-3.2-3.9-8.8-6.1-15.5-6.1c-6.8,0-13,2.2-17.3,5.9l1.7-10.3l-1.9-0.6c-3.3-1-6.9-1.5-10.6-1.5c-13.3,0-25.4,8.5-27.6,19.3 c-0.9,4.6,0.2,9,3,12.5c2.4,3,6,5.1,10.3,6.2H9.2v16.9h67.2l0.1-0.2l0,0.2h8.1l1.1-1.8l-0.3,1.8h18.3l0.3-1.4c1.6,1,3.7,1.6,6.1,1.6 c2.1,0,4.1-0.4,5.9-1.2l-0.2,1h10.9h3.6h11.1l0-0.2c1.2,0.3,2.4,0.4,3.6,0.4c0.7,0,1.5-0.1,2.2-0.2h9.8l0.7-1.5h0.7l0.2,1.5h4.5h6 h4.9h3.6h11.1l1.5-7.9h-0.5l0.2-1.1h0.4l1.5-7.9h-0.8c0.7-0.6,1.2-1.4,1.3-2.3c0.2-1.1-0.1-2.2-0.8-3c-0.2-0.2-0.4-0.4-0.6-0.6 c2.4-2.5,4-5.4,4.7-8.8C196.3,27.5,195.4,23.8,192.9,20.8z M175.5,54.6h-0.9l1.4-7.3c0.3,0,0.6-0.1,0.9-0.1L175.5,54.6z M153.9,30.8 c-0.1,0.5-0.2,1-0.2,1.5c-2,1.4-3.9,2-6,2c-1.4,0-2.6-0.5-3.2-1.2c-0.4-0.4-0.5-0.9-0.4-1.5c0.4-1.9,2.9-3.5,5.5-3.5 c1.6,0,3.1,0.6,4.5,1.7C154.1,30.1,154,30.4,153.9,30.8z M156,46.2l-1,1.6l-0.8-0.5c-0.5-0.3-1.1-0.5-1.7-0.7 c0.4-0.1,0.9-0.2,1.2-0.4l1.2-0.4l1.1-5c0.2,0.2,0.3,0.4,0.5,0.6c1.7,2.1,4.2,3.7,7.2,4.7L156,46.2L156,46.2z M166.1,46.9l-0.4,2.1 l-0.5-2.3C165.4,46.8,165.7,46.9,166.1,46.9z M175.7,28.2c1.2,0,2.2,0.3,2.7,0.9c0.5,0.5,0.4,1.3,0.3,1.7c-0.4,2-2.5,3.5-5.1,3.5 c-1.3,0-2.3-0.3-2.7-0.9c-0.3-0.4-0.4-1-0.3-1.7C171,30,172.8,28.2,175.7,28.2z M118.5,47.8c-0.4-0.2-0.7-0.5-1.1-0.6h1.3 L118.5,47.8z M111.6,54.6c-0.2,0.1-0.4,0.2-0.7,0.3C111,54.8,111.2,54.6,111.6,54.6z M109.6,28.4l-1.5,5c-0.1-1.3-0.5-2.5-1.2-3.6 c-0.3-0.4-0.7-0.8-1-1.2L109.6,28.4z M66.1,30.9c-0.4,2-2.5,3.5-5.1,3.5c-1.3,0-2.3-0.3-2.7-0.9c-0.3-0.4-0.4-1-0.3-1.7 c0.3-1.8,2.2-3.5,5.1-3.5c1.2,0,2.2,0.3,2.7,0.9C66.2,29.7,66.2,30.4,66.1,30.9z M83.5,47l0,0.1L83.5,47C83.4,47,83.5,47,83.5,47z M105.9,40.4l-1.8,5.8h-6.8C100.9,45.1,104,43.2,105.9,40.4z M106.7,47.1h0.4c-0.1,0.1-0.3,0.1-0.4,0.2L106.7,47.1z M33.9,31.9 c-1.9,0-3.6-0.6-4.5-1.7c-0.5-0.6-0.7-1.3-0.5-2.1c0.5-2.5,3.9-4.7,7.4-4.7c2.4,0,4.5,0.9,6.7,2.7c-0.6,1-1,2.1-1.3,3.3 C39,31.1,36.5,31.9,33.9,31.9z M73.7,43.8l2.2,1c1.2,0.5,2.6,1,4,1.4h-4.1l-0.4,0.9l-0.1-0.9h-7.1C70.2,45.6,72,44.8,73.7,43.8z M127.2,54.6l1.6-8.4h-7.7l5.4-17.9l1.7,0.1c-0.3,0.8-0.6,1.6-0.7,2.5c-0.8,4,0.2,7.8,2.6,10.8c1.6,2,3.9,3.5,6.5,4.5h-6.8l-1.6,8.4 L127.2,54.6L127.2,54.6z M41.1,45.6l1.2-0.4l1-4.3c0.2,0.2,0.3,0.5,0.5,0.7c1.7,2.1,4.2,3.7,7.2,4.7H38.6 C39.5,46.1,40.4,45.9,41.1,45.6z M180.9,46.2c1-0.3,2-0.7,2.9-1.1c0.1,0.3,0.3,0.6,0.5,0.9c0,0.1,0.1,0.1,0.2,0.2H180.9z"/> <g> <path class="st1" d="M73.1,48.5l0.5,7.4h0.1c0.2-0.8,0.5-1.5,0.9-2.3l2.5-5.1h4.1l0.6,7.4H82c0.2-0.7,0.5-1.5,0.8-2.2l2.5-5.2h5.6 l-7.6,12.3h-4.7l-0.4-6.7H78c-0.2,0.6-0.3,1.3-0.6,1.9L75,60.8h-4.6l-2.8-12.3H73.1z"/> <path class="st1" d="M90.5,48.5h5.2l-0.8,4.2h3.3l0.8-4.2h5.2l-2.3,12.3h-5.2l0.8-4.3h-3.3l-0.8,4.3h-5.2L90.5,48.5z"/> <path class="st1" d="M119.4,54.7c-0.8,4-4.9,6.3-9.4,6.3c-4.5,0-7.7-2.4-7-6.3c0.7-3.9,4.9-6.4,9.4-6.4S120.1,50.8,119.4,54.7z M108.4,54.8c-0.3,1.4,0.7,2.4,2.3,2.4c1.6,0,3-1,3.2-2.4c0.2-1.3-0.6-2.4-2.3-2.4C109.9,52.4,108.6,53.5,108.4,54.8z"/> <path class="st1" d="M120.6,48.5h5.4l-1.6,8.4h4.5l-0.8,4h-9.9L120.6,48.5z"/> <path class="st1" d="M141.6,56.4l0.2,0.2c0.8,0.6,1.9,1.1,3.1,1.1c0.5,0,1.4-0.2,1.5-0.7s-0.6-0.6-1.1-0.7l-1.1-0.2 c-2-0.3-3.6-1.3-3.2-3.3c0.6-2.9,4.1-4.6,7.3-4.6c1.7,0,3.2,0.3,4.5,1.1l-2.1,3.2c-0.8-0.5-1.8-0.9-2.9-0.9c-0.5,0-1.2,0.1-1.3,0.7 c-0.1,0.5,0.6,0.5,1,0.6l1.2,0.2c2.2,0.4,3.7,1.4,3.3,3.5c-0.6,2.9-4.1,4.4-7.3,4.4c-1.9,0-3.9-0.4-5.5-1.1L141.6,56.4z"/> <path class="st1" d="M160.1,56.4l-0.2-2.2c-0.1-0.5-0.1-1.1-0.1-1.6h-0.2l-1.7,3.8H160.1z M155.4,60.8h-5.7l7.5-12.3h6l2.9,12.3 h-5.7l-0.2-1.5h-4.1L155.4,60.8z"/> <path class="st1" d="M168,48.5h5.4l-1.6,8.4h4.5l-0.8,4h-9.9L168,48.5z"/> <path class="st1" d="M178.9,48.5h10l-0.6,3.4h-4.5l-0.2,1.2h4.1l-0.6,3.2h-4.1l-0.2,1.2h4.7l-0.6,3.4h-10.1L178.9,48.5z"/> <g> <path class="st2" d="M105.8,26.3l6.8-0.3l-5.7,18.8h12.2l5.7-18.8l6.6,0.3l2.7-8.9h-25.6L105.8,26.3z"/> <path class="st2" d="M80.6,31.2C78.9,40,69.5,45.3,59.3,45.3c-10.2,0-17.5-5.3-15.8-14.1c1.7-8.6,11.1-14.2,21.3-14.2 C75,16.9,82.3,22.6,80.6,31.2z M55.7,31.3c-0.6,3.1,1.6,5.3,5.3,5.3c3.7,0,6.7-2.1,7.3-5.3c0.6-2.9-1.4-5.4-5.2-5.4 C59.2,26,56.3,28.4,55.7,31.3z"/> <path class="st2" d="M76.8,42.8c3.5,1.6,8.2,2.5,12.4,2.5c7.3,0,15.2-3.2,16.5-9.8c0.9-4.7-2.4-6.9-7.4-7.9l-2.7-0.5 c-0.9-0.2-2.4-0.3-2.2-1.3c0.2-1.1,1.8-1.5,2.9-1.5c2.6,0,4.8,0.9,6.7,2.1l4.7-7c-3-1.6-6.3-2.4-10.2-2.4 c-7.3,0-15.3,3.6-16.5,10.2c-0.8,4.3,2.7,6.6,7.4,7.3l2.4,0.4c1.1,0.2,2.7,0.3,2.4,1.5s-2.2,1.6-3.4,1.6c-2.8,0-5.2-1.1-7.1-2.5 L82,35L76.8,42.8z"/> <path class="st2" d="M157.9,18.1c-2.4-0.7-5.2-1.1-8-1.1c-9.8,0-18.8,6.4-20.3,14.4c-1.5,7.8,4.8,13.9,14.4,13.9 c2.2,0,6.8-0.3,8.9-1.1l2.3-10.3c-2.3,1.6-4.7,2.5-7.5,2.5c-3.6,0-6.4-2.3-5.8-5.4c0.6-3,4-5.4,7.7-5.4c2.8,0,5,1.3,6.6,2.8 L157.9,18.1z"/> <path class="st2" d="M177.5,16.9c-10.2,0-19.6,5.6-21.3,14.2c-1.7,8.8,5.6,14.1,15.8,14.1c10.2,0,19.6-5.3,21.3-14.1 C195,22.6,187.7,16.9,177.5,16.9z M175.7,26c3.9,0,5.8,2.4,5.2,5.4c-0.6,3.1-3.6,5.3-7.3,5.3s-5.9-2.1-5.3-5.3 C169,28.4,171.9,26,175.7,26z"/> <path class="st2" d="M46.6,11.9c-3-0.9-6.5-1.4-9.9-1.4c-12.3,0-23.4,7.8-25.4,17.4c-1.9,9.5,6,16.8,17.9,16.8 c2.7,0,8.5-0.4,11.1-1.3l2.9-12.4c-2.8,1.9-5.8,3.1-9.3,3.1c-4.6,0-7.9-2.8-7.2-6.5c0.7-3.6,5-6.5,9.6-6.5c3.4,0,6.2,1.5,8.3,3.3 L46.6,11.9z"/> <path class="st2" d="M185.8,43.5c0.2-1,1.3-1.7,2.4-1.7c1.2,0,1.9,0.8,1.8,1.7c-0.2,1-1.3,1.7-2.4,1.7 C186.4,45.3,185.6,44.5,185.8,43.5z M189.4,43.5c0.1-0.8-0.4-1.3-1.3-1.3c-0.9,0-1.6,0.5-1.8,1.3c-0.1,0.8,0.4,1.3,1.3,1.3 C188.5,44.8,189.3,44.3,189.4,43.5z M188.7,44.4h-0.5l-0.3-0.8h-0.4l-0.1,0.8h-0.5l0.3-1.8h1.1c0.5,0,0.7,0.1,0.6,0.6 c-0.1,0.3-0.3,0.5-0.6,0.5L188.7,44.4z M188,43.3c0.2,0,0.4,0,0.5-0.2c0-0.2-0.2-0.2-0.4-0.2h-0.5l-0.1,0.4H188z"/> </g> <polygon class="st1" points="12.2,60.9 69.3,60.9 69.2,60.8 69.2,60.8 68.5,57.7 12.2,57.7 "/> <polygon class="st1" points="12.2,56.4 68.2,56.4 67.4,53.2 12.2,53.2 "/> <polygon class="st1" points="12.2,51.9 67.1,51.9 66.9,50.7 66.4,48.5 12.2,48.5 "/> <path class="st1" d="M131.5,48.5h10l-0.6,3.4h-4.5l-0.2,1.2h4.1l-0.6,3.2h-4.1l-0.2,1.2h4.7l-0.6,3.4h-10.1L131.5,48.5z"/> </g> </svg>
  2. Hi there, (newly registered, but long time user) I have a problem with SVG transitions. If I have a SVG object with a CSS transform and try to tween it, the tween will set an (ignored) DOM transform attribute and nothing happens. Using force3D has no effect, as it still only sets the DOM attribute and not the CSS property. Something is clearly wrong here. When is this an issue? When using Draggable, as Draggable sets the CSS property. Once a Draggable has been updating the value, I can no longer tween it - even if I kill the Draggable. Regards, Morten
  3. Hi all, Currently I'm testing a website on which I use some GSAP animations. One of this animations causes a error in Firefox (v51 run a Macbook Pro retina). This is the code that causes the error: this.tl .set(this.modalBackground, { display: "block", className: "+=" + this.modalBackgroundModClass }) The classname line causes the following error in Firefox: TypeError: this.ownerSVGElement is null This code does work on all other devices and browsers on which I've tested on. I also can make it work by adding the class like this: this.tl .set(this.modalBackground, { display: "block", onComplete: function () { this.modalBackground.classList.add(this.modalBackgroundModClass); }.bind(this) }) But I would like to use the className way. Any idea on what is going wrong? Thanks in advance.
  4. Hey folks, I am using GSAP to get around the Firefox transform origin issues with SVGs and SVG child elements. I am applying animations to groups within an SVG. I have two SVGs, one that is for desktop sizes, and one for mobile. Each one calculates the 50% 50% transform origin on page load. However, on resize, when swapping to the alternate SVG for the different screen size, all the calculations are shifted and messed up for the one that was previously hidden. CodePen Demo Resize the window to see the issue. The SVG groups should be animating the same way. Is there a way to force GSAP to recalculate the transform origin on resize? This is the code I'm using: TweenMax.fromTo( elem, 0.75, { rotation: -10, transformOrigin: '50% 50%' }, { transformOrigin: '50% 50%', rotation: 20, ease: Sine.easeInOut, repeat: -1, yoyo: true } );
  5. I am working on a reveal effect to show a frame over another one using clip-path either an inline SVG with <clipPath> or with a CSS shape and basically animating the reveal. On the Codepen: * Left side uses SVG clipPath * Right side uses CSS shape Basically, on Desktop Chrome v56, I have great performance and it works as it should for both strategies. On Desktop Firefox, I can only get it to work with SVG clipPath. However, on the first rendering, the animation is jerky. On subsequent renderings, it is smooth. On Desktop Safari, I can only get it to work with a CSS shape. Safari can't seem to be able to animate the attributes of the SVG shape inside the <clipPath> component. If I resize the window, the final SVG clipPath is rendered, so it seems that Safari cannot render the graphics without being resized. For IE / Edge, I haven't tested, but I likely won't be able to support those browsers. Trying to see if others had suggestions on how to improve the performance of this reveal effect on Firefox and/or Safari.
  6. Hello, I am having a couple of issues, the first being a slight flicker on load of the homepage, before the animation kicks in, it flickers a preview of the page: http://2017.hypemarketing.uk. My second issue is more serious, on my mobile, Android - Chrome V. 56.0.2924.87 the animation seems to lag incredibly, and almost stops my mobile browser working, could someone help me figure out how to make this smooth. Any and all assistance would be greatly appreciated, my code is below. jQuery(document).ready(function($) { // Scroll Magic Controller var frontPageAnim_Controller = new ScrollMagic.Controller(); //Scroll Magic Controller // Animation vars var htmlContainer = $('html'), body = $('body'), viewPort = $(window).height(), // Height of viewport heroSection = $('.hero-section'), panelClickthroughs = $('.panel-clickthroughs'), portfolioPanels = $('.portfolio-panel'), portfolioSection = $('.portfolio-section'), socialSection = $('.social-section'), scrollDown = $('.scroll-down'), scrollDownArrow = $('.scroll-down i') header = $('header'), heroContent = $('.hero-content'), logoContainer = $('.logo-container'), logo = $('#hype-logo'), letter = $('.letter'), letterFill = $('.letter_fill'), logoBorderBottom = CSSRulePlugin.getRule(".logo-container:after"), overlayMenu = $("#overlay-menu"), listItemsOverlay = $("#overlay-menu #primaryMenu ul li"), heroBackground = CSSRulePlugin.getRule(".hero-panel:before"); var fadeSlogan = function () { TweenMax.to(header, 1, { y: 0, autoAlpha: 1 }); TweenMax.to(heroContent, 1, { y: 0, autoAlpha: 1 }); TweenMax.to(scrollDown, 1, { y: 0, autoAlpha: 1 }); }; function urlChecker() { if( window.location.href =="http://2017.hypemarketing.uk/" ) { var otherAnimations = new TimelineMax({ immediateRender: true }); // Start New timeline for all other animations otherAnimations .set(heroBackground, { opacity: 1 }) //has been set in css to remove skip .set(logo, {visibility:"visible"}) .set(letterFill, {visibility:"hidden"}) .set(header, {y: -80, force3D:"auto", autoAlpha: 0, ease: Power2.easeIn }) .set(heroContent, {y: -15, force3D:"auto", autoAlpha: 0, ease: Power2.easeIn }) .set(scrollDown, {y: 30, force3D:"auto", autoAlpha: 0, ease: Power2.easeIn }); } else { //Do nothing } } urlChecker(); // TweenMax Timelines var timelineHero = new TimelineMax({ immediateRender: true }); // Start New timeline for Hero Section & Portfolio var entranceAnim = new TimelineMax({ immediateRender: true }); // Start New timeline for Entrance Anim timelineHero .set(heroSection, { top: 0, position: 'absolute', force3D:"auto" }) .to(heroSection, 0.4, { top: -viewPort, opacity: 0, ease: Power2.easeInOut }); // Animation for timelineHero entranceAnim .set(logoBorderBottom, { ease: Power2.easeOut, force3D:"auto" }) .set(letter, {fill:"none", force3D:"auto", stroke: "00ffbc", strokeWidth: "4", strokeLinecap: "round", strokeLinejoin: "round"}) .fromTo(letter, 3, {drawSVG:0}, {drawSVG:"102%"}, 0) //now animate the logo strokes (note we use "102% as FireFox 34 miscalculates the length of a few strokes) .fromTo(logoBorderBottom, 3, { width: 0 }, { width: 100 + "%" }, 0) //draw out the load under hype .to(letterFill, 1, {autoAlpha:1, ease:Linear.easeNone}) //fade in the real logo and the rest of the text .to(letter, 1, { stroke: "ffffff;", ease:Linear.easeNone }) //fade the stroke to white .to(heroBackground, 3, { opacity: 0.9, ease: Power1.easeIn, onComplete: fadeSlogan }, 0.3); //fade the background // Scroll Magic Scenes var heroAnimation = new ScrollMagic.Scene({ triggerElement: heroSection, triggerHook: 0, duration: 1 }).setPin(heroSection).setTween(timelineHero).addTo(frontPageAnim_Controller); // ScrollMagic Scene for Hero Section var portfolioSectionAnimation = new ScrollMagic.Scene({ duration: viewPort/2 }).setPin('.portfolio-section', { pushFollowers: true }).addTo(frontPageAnim_Controller); // ScrollMagic Scene for Portfolio Section // Scroll Down Button Begin TweenMax.set(scrollDownArrow, { transform: 'translateY(0)' }); TweenMax.to(scrollDownArrow, 1, { autoAlpha: 0, repeat: -1, transform: 'translateY(10px)' }); scrollDown.click(function(){ TweenLite.to(window, 0, {scrollTo:1}); // Scrolls 1px on scroll to initiate the Hero Section sliding out }); // Scroll Down Button End });
  7. Hey I have small issue with figuring out how to use the pathDataToBezier plugin, I've read a lot of similar topics, and probably I could do this with just some pure js or even pure css. But I wonder is there some simple way to animate few objects on the same path? I used some very simple example - right now, only the red 'planet' sticks to it's orbit, but it also ends in the different point it should - this should be just perfect closed orbit for all objects on it. I'm probably missing something very basic here Any suggestion on how to bite this would be a huge help ! There will be a lot of objects on that orbits, and I would love to have a lot of control there. http://codepen.io/Dikus/pen/VpwdNx?editors=1010 Thanks!
  8. I am working on this map (not sure why the animation itself is not working on the Codepen). I made it on a 27in monitor and on a big screen it works fine. However, when I started working on the stylesheet for smaller screens I realised that this map on a typical 13in Mac laptop (1280x800) I realised that I have a bit of a white border at the bottom because the monitor is of different proportions to my image. Is there a way of stretching the SVG to cover the full height of the DIV? I tried adjusting many different parameters but none of them seem to do anything. I also noticed that adjusting padding-bottom on <div class="svg-container" style="padding-bottom: 58%;"> does not do anything to the size of the image!?
  9. 335

    Draw Svg polygon

    Hello! I am trying to make an animated SVG of a complex map. I have over 120 elements in my animation. Most of these are paths but some of them are also polygons (circular). Here's a CodePen: http://codepen.io/i76/pen/vgwKKX I am a JavaScript novice. I searched this forum and found a script (in Carl's post) which allows me to draw a path- var orig1 = document.querySelector('#lineAB'); var obj1 = {length:0, pathLength:orig1.getTotalLength()}; orig1.style.stroke = '#f60'; var t1 = TweenMax.to(obj1, 10, {length:obj1.pathLength, onUpdate:drawLine1, ease:Linear.easeNone}) function drawLine1() { orig1.style.strokeDasharray = [obj1.length,obj1.pathLength].join(' '); } However, this does not work with polygons. My guess is that there is not built-in polygon.Length object in JS. I have found this function on another forum that would measure the length of a polygon but I am not sure how to implement it- getPolygonLength:function(el){ var points = el.attr('points'); points = points.split(" "); var x1 = null, x2, y1 = null, y2 , lineLength = 0, x3, y3; for(var i = 0; i < points.length; i++){ var coords = points[i].split(","); if(x1 == null && y1 == null){ if(/(\r\n|\n|\r)/gm.test(coords[0])){ coords[0] = coords[0].replace(/(\r\n|\n|\r)/gm,""); coords[0] = coords[0].replace(/\s+/g,""); } if(/(\r\n|\n|\r)/gm.test(coords[1])){ coords[0] = coords[1].replace(/(\r\n|\n|\r)/gm,""); coords[0] = coords[1].replace(/\s+/g,""); } x1 = coords[0]; y1 = coords[1]; x3 = coords[0]; y3 = coords[1]; }else{ if(coords[0] != "" && coords[1] != ""){ if(/(\r\n|\n|\r)/gm.test(coords[0])){ coords[0] = coords[0].replace(/(\r\n|\n|\r)/gm,""); coords[0] = coords[0].replace(/\s+/g,""); } if(/(\r\n|\n|\r)/gm.test(coords[1])){ coords[0] = coords[1].replace(/(\r\n|\n|\r)/gm,""); coords[0] = coords[1].replace(/\s+/g,""); } x2 = coords[0]; y2 = coords[1]; lineLength += Math.sqrt(Math.pow((x2-x1), 2)+Math.pow((y2-y1),2)); x1 = x2; y1 = y2; if(i == points.length-2){ lineLength += Math.sqrt(Math.pow((x3-x1), 2)+Math.pow((y3-y1),2)); } } } } return lineLength; } If it doesn't take very long would anyone be able to include the above function into the snippet above so I have a way of animating the polygons as well? Many thanks in advance!
  10. Hello, I have 9 svgs takes fullpage at each, each svg contains several elements, runs about 6 seconds to complete. On computer everything works great, but on mobile it starts to slow down , even on iPad pro 12.9. (so slow). My site has 9 svgs, each takes fullpage, you can scroll to see different animation. Here is my site: https://rockmandash.github.io/InteractiveInfographic/ If you open the url on computer, it will load pc version svg and code, otherwise it will load mobile version svg and code XD. Here is a svg animation code look like: tlScene02.from($svg02topLine, 0.6, topLineParameter, 0.5) .from($svg02bottomLine, 0.6, bottomLineParameter, 0.5) .from($svg02Heading, 0.3, HeadingParameter, 0.7) .from($svg02subHeading, 0.4, subHeadingParameter, 0.8) .from($svg02Bg, 0.4, { y: -100, opacity: 0 }, 0.9) .from($svg02Door, 0.4, { y: -100, opacity: 0 }, 1) //---------------------------港澳 .to($svg02PeopleHongKongAndMacao, 0.7, { y: 190, opacity: 1, ease: Power1.easeIn }, 1.4) .to($svg02PeopleHongKongAndMacao, 0.7, { x: -90, ease: Power1.easeOut }, 2.1) .from($svg02BubbleHongKongAndMacao, 0.6, { scale: 0, transformOrigin: '50% 50%', ease: Back.easeOut.config(1.7) }, 2.8) .from($svg02LineHongKongAndMacao, 0.1, { y: 3, opacity: 0 }, 2.9) .from($svg02TextHongKongAndMacao, 0.4, { scale: 0, transformOrigin: '50% 50%' }, 3) .from($svg02FlagHongKong, 0.4, { scale: 0, transformOrigin: '50% 50%', ease: Back.easeOut.config(1.7) }, 3.1) .from($svg02FlagMacao, 0.4, { scale: 0, transformOrigin: '50% 50%', ease: Back.easeOut.config(1.7) }, 3.2) .call(animateNumberIncreasing, [$svg02NumberHongKongAndMacao, 14.5, 1, 'percent']) //14.5 % .from($svg02NumberHongKongAndMacao, 0.4, { scale: 0, transformOrigin: '50% 50%' }, 3.5) //---------------------------中國 .to($svg02PeopleChina, 0.7, { y: 70, opacity: 1, ease: Power1.easeIn }, 1.9) .to($svg02PeopleChina, 0.7, { x: -140, ease: Power1.easeOut }, 2.6) .from($svg02BubbleChina, 0.6, { scale: 0, transformOrigin: '50% 50%', ease: Back.easeOut.config(1.7) }, 3.3) .from($svg02LineChina, 0.1, { y: 3, opacity: 0 }, 3.4) .from($svg02TextChina, 0.4, { scale: 0, transformOrigin: '50% 50%' }, 3.5) .from($svg02FlagChina, 0.4, { scale: 0, transformOrigin: '50% 50%', ease: Back.easeOut.config(1.7) }, 3.6) .call(animateNumberIncreasing, [$svg02NumberChina, 40.1, 1, 'percent']) //40.1 % .from($svg02NumberChina, 0.4, { scale: 0, transformOrigin: '50% 50%' }, 3.9) //---------------------------日本 .to($svg02PeopleJapan, 0.7, { y: 80, opacity: 1, ease: Power1.easeIn }, 2.4) .to($svg02PeopleJapan, 0.7, { x: 130, ease: Power1.easeOut }, 3.1) .from($svg02BubbleJapan, 0.6, { scale: 0, transformOrigin: '50% 50%', ease: Back.easeOut.config(1.7) }, 3.8) .from($svg02LineJapan, 0.1, { y: 3, opacity: 0 }, 3.9) .from($svg02TextJapan, 0.4, { scale: 0, transformOrigin: '50% 50%' }, 4) .from($svg02FlagJapan, 0.4, { scale: 0, transformOrigin: '50% 50%', ease: Back.easeOut.config(1.7) }, 4.1) .call(animateNumberIncreasing, [$svg02NumberJapan, 15.6, 1, 'percent']) //15.6 % .from($svg02NumberJapan, 0.4, { scale: 0, transformOrigin: '50% 50%' }, 4.4) //---------------------------東南亞 .to($svg02PeopleSoutheastAsia, 0.7, { y: 200, opacity: 1, ease: Power1.easeIn }, 2.9) .to($svg02PeopleSoutheastAsia, 0.7, { x: 115, ease: Power1.easeOut }, 3.6) .from($svg02BubbleSoutheastAsia, 0.6, { scale: 0, transformOrigin: '50% 50%', ease: Back.easeOut.config(1.7) }, 4.3) .from($svg02LineSoutheastAsia, 0.1, { y: 3, opacity: 0 }, 4.4) .from($svg02TextSoutheastAsia, 0.4, { scale: 0, transformOrigin: '50% 50%' }, 4.5) .from($svg02FlagSingapore, 0.4, { scale: 0, transformOrigin: '50% 50%', ease: Back.easeOut.config(1.7) }, 4.6) .from($svg02FlagThai, 0.4, { scale: 0, transformOrigin: '50% 50%', ease: Back.easeOut.config(1.7) }, 4.7) .from($svg02FlagMalaysia, 0.4, { scale: 0, transformOrigin: '50% 50%', ease: Back.easeOut.config(1.7) }, 4.8) .from($svg02FlagPhilippines, 0.4, { scale: 0, transformOrigin: '50% 50%', ease: Back.easeOut.config(1.7) }, 4.9) .from($svg02FlagVietnam, 0.4, { scale: 0, transformOrigin: '50% 50%', ease: Back.easeOut.config(1.7) }, 5) .call(animateNumberIncreasing, [$svg02NumberSoutheastAsia, 13.7, 1, 'percent']) //13.7 % .from($svg02NumberSoutheastAsia, 0.4, { scale: 0, transformOrigin: '50% 50%' }, 5.3) .from($svg02BottomText, 0.4, BottomTextParameter, 5.2); You can see my site is almost complete, but I really don't like the low speed on mobile. All the animation done inside svg so I think I probably can not cache them as png or wrap them as div? So I was thinking moving to canvas will get better? I haven't try it yet. Please help, thank you! update: I think canvas is much more worse, so my problem stick to svg mobile performance issues.
  11. Dear Greensock Community, my task is simple and clear: I want to rotate a svg group <g id="rotationFrame>. I have written the following TweenMax to achieve this: TweenMax.to("#rotationFrame", .5, { rotation:rotationDeg, transformOrigin:"50% 50%" }); This does work quite good using safari. But as soon as I switch to Chrome the code does some crazy stuff: Demo: https://vid.me/9EJU How can I solve this? To me it seems like Greensock is creating some wired css code, like transform-origin: 0px 0px 0px; transform: matrix(-0.86602, 0.49999, -0.49999, -0.86602, 957.167, 575.015); As soon as I change this manually to something more straight forward, it does work in chrome: transform-origin: 50% 50% transform: rotate(90deg);
  12. I've seen this amazing website and I noticed a nice effect when mouving the mouse around the right or left sides of the page. They are animating an SVG path as if it was a liquid. In a wavy way. Any tips to achieve this? I'm totally lost. I have the path but I have no idea how to "guess" which values should I apply to it to create the wave effect: https://jsfiddle.net/9o3f8vm4/ Thanks!
  13. Hello, I'm trying to make rotationX/rotationY transforms on SVG shapes with the last version, GSAP 1.19.1, but it does not work. This is working only with rotation or rotationZ properties. Here you can see that nothing happens on mouseover event: http://codepen.io/classikd/pen/rjPxKr But if i am using GSAP 1.19.0 or lower version everything is working well : http://codepen.io/classikd/pen/NdorKo Is there a bug or do some properties have changed, i have found nothing about it ? Thanks for your help.
  14. Hey guys, I'm trying to figure out how to make this fish vector appear to make a flopping in-air animation. At first I was thinking that MorphSVG would be the ideal tool for this, but then diving deeper I'm noticing that there's so many paths I believe I would have to find an ideal shapeIndex for each to get a fluid motion. Transform gives off the whole 2D vibe since I'm using scale -1 to give the appearance of a reflection during the flopping animation. This is a link to a primitive attempt to use MorphSVG http://codepen.io/dylan9o4/pen/bgQLyP And this is a link to a primitive attempt using regular transforms http://codepen.io/dylan9o4/pen/dNQdxe Any help would be greatly appreciated!
  15. Hi there, I've got an SVG circle that I'm drawing using the DrawSVGPlugin. Say I want to draw from 12 o'clock to 9 o'clock, I would use `drawSVG: '0 75%'`. However, when I do this, for some reason my drawing is always starting at 3 o'clock. So `drawSVG: '0 75%'` ends up animating from 3 o'clock to 12 o'clock. My questions are, why is my animation always starting at 3 o'clock? And how do I get it to start at 12 o'clock? Maybe this is more of an issue with my SVG? I'm a rookie at SVGs so I'm not sure. I've attached a codepen which will hopefully illustrate the problem. Thanks
  16. I bet there's a good explanation for this and probably a much better way to accomplish a background crossfade but I'm seeing some strange behavior. In the codepen, I have an SVG with 2 foreignObjects each containing a div with a background image as a base64 image URL. Overlaying that is a group element with a text>tspan with some text in it. I've got a simple autoAlpha tween on the top-most background div from 1 to 0 over 3 seconds and at the same time, the lower-most BG goes from 0 to 1. The crossfade is a little wonky but what's weird is the text is affected by the fade in Chrome. Firefox seems to handle it fine but I need it to work in Chrome. I can set either of the backgrounds to zero opacity and the text looks fine. I'm wondering if it has something to do with positioning because if I add any kind of position setting to the div's with the backgrounds I lose the text behind the background divs. Any idea why this might be happening?
  17. I set the draggable to horizontal move (type: 'x') for a svg slider button. Sometimes while mouse was moving, the button kept staying at the same location. The vertical drag(type: 'y') worked just fine. You could see the test in Codepen link. Does anybody have any ideas about that?
  18. Dear community, I got to code a one-page website. It got quite a lot of sections and SVG elements with a lot of elements. As I want to animate them, I thought I got to include them into my html document. Doing so creates a massive file with way to many lines to work productive inside the document. Googling I found the `<use>` tag to reference groups or shapes, but it seems like its not suitable to reference a whole external .svg file. So thats my question: - How do you handle HTML files with a lot of SVG code? - Can I somehow use the external SVG files for internal use? As a tweak, I know that SVG for Everybody https://github.com/jonathantneal/svg4everybody creates a polyfill by adding external SVG files into the DOM for IE9+. Can I somehow "always enable" this, even if I know that its not the most appropriate way? To keep it simple: Its a "big thoughts low budget" project, so it does not need to a the professional solution at all and only has to support the newest browser (while IE9+ would be good). Thanks in advance for any suggestions and let me know if you got any questions, Marian.
  19. First off let me say that I love GSAP! This is a great plugin and I'm having a lot of fun with it. Now onto my issue I'm having an issue when I try to morph multiple paths that are separated by groups. The morph seems to be working ok, but the scale of the resulting image is very small. I'm thinking it has something to do with the svg itself but for the life of me I can't find the issue. Any help would be greatly appreciated. Thanks! http://codepen.io/rmarquardt/pen/JbOVWM
  20. Hi there, I've spent an hour or two looking at the documentation and the forum and I'm excited by what I'm seeing. I'm a designer who would like to develop an efficient workflow for working with Wordpress and Illustrator. in time, I would like to use to use CC Animate. In my ideal world, my workflow would be something like: Develop my SVGs in Illustrator in separate artboards, using a combination of symbols and non symbols Export them using the new export screens feature Import the SVGs onto a server via FTP (not using Wordpress media import feature) Be able to manipulate SVGs using Jquery, GSAP, and CSS I'm pretty good about learning technical processes, but I'm more of a designer than a developer. The SVG gotchas post was helpful but I'm hoping for a less high maintenance revision process. I understand that this workflow is probably not realisitic at this point, but I'm hoping people can give me some ideas on resources I can use to develop something that works. Thanks in advance for your help,
  21. Hi, I'm fairly new to this SVG animation and getting by mostly by copying someones work and modifying it. (Still learning alot). For that codepen link that I've provided - it works smoothly in almost all browsers except IE and IE Edge. Its basically moving the pattern from SVG horizontally and repeating it. It seems like IE cannot recognize attr:{x} for some reason. advance thanks!
  22. Hi everyone, do you want feel magic of GSAP's morphSVG? Or if you think about buy membership, but not sure, i sure, after see it you buy it in anyway. http://codepen.io/dalisoft/full/yVmLVO/ If you like it, please Like it. Thanks to @GreenSock for amazing library and all of helpers for fast reply
  23. Ran into an interesting bug the other week. I was using DrawSVG to make an element follow an SVG path (technically a polyline), and Morph SVG's pathDataToBezier feature to grab and convert the polyline to path data. I found that if I named my polyline with a specific naming convention, MorphSVG broke. The ID name I used was path_1_1_1 and for some reason the specific sequence of a repeated underscore and a number broke the plugin. The console log reports "ERROR: malformed path data" but the path is fine; it's the _#_#_# name that breaks things. Please see attached Codepen for a demo. Changing my ID name fixed everything but it took a few hours of QA (and baffled coworkers) to resolve. Since I didn't see any online reports of this issue, I figured I'd post here to bring attention to it.
  24. Hello all, Have been searching the forum, but can't find an answer to something that can't be complicated, I'm sure. (Can't get it figured out, though.) Check the Pen: I'm trying to 'shoot' small circles on a larger circle. All the elements are inline SVG (part of a larger drawing), using SVG 'transform: rotate()' on the small circles. If you comment out the 'staggerFrom' you'll see what it's supposed to look like. With the tween active the transforms on the small circles are somehow skipped. Any idea anybody? Thanks, Ruud.
  25. After Reading through some topics in the forum and on codepen, I try to do a "filter:drop-shadow(...)" animation on a CSS filter that is supposed to take effect on the SVG, using the onupdate() and TweenMax.set() methods. Unfortunately unsuccessfully so far. The included codepen shows the basic animation: 1. first an animation over opacity and scale, then 2. the "onUpdate -> set" animation, which is, where the magic should happen. There are 2 debug helper functions that throw out some values to the console. And they seem to proof that the values for the shadow distance and the color opacity ( in var logoFilterAmount) are calculated correctly over the course of the animation, but the final result (using getComputedStyle to check) shows strange numbers that I can't explain to myself how they were created. Any insight here would be most welcome! Thank you!
×