Jump to content
Search Community

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
  • Supercharge

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


Personal Website


Twitter


CodePen


Company Website


Location


Interests

Found 604 results

  1. Hello All, I'm new here, and to web-animations. I am attempting to morph an svg as a user scrolls through a page. I have the svg paths set up and they morph correctly on their own in this code. (Sorry I dont know how to link external js links, so the libraries wont work...) But I am struggling with setting up a Tween to accomplish the morph, as the function cannot be used inside of a Tween (I have discovered). With some guidance on the forms I found this line: new TweenMax.to("#blob1",3,{attr:{d:"M463.43,364.65c62.09,32.87,85.73,29,96,20,17.85-15.66-4.09-49,13-99,10.37-30.38,36-69.54,63-69,27.89.56,28.38,42.76,68,58,44.81,17.24,79.87-23,110-2,24.55,17.14,16.7,54.65,34,58,14.81,2.87,22.31-24.27,57-47,28.13-18.43,67.7-29.75,79-17,11.91,13.44-16.6,43.47-4,62,15.47,22.75,73.9.23,80,14,7.9,17.83-84.2,69-76,88,4.52,10.5,33.39-3.12,70,14,4.89,2.29,38.51,18.62,50,54,1.28,3.94,11.26,34.65-2,46-15.64,13.39-49.69-12.11-58-2-7.61,9.26,19.81,32,24,74,2,20.32-1,48.89-12,52-15.05,4.26-27.76-44.2-78-70-21.94-11.27-48-16.66-52-10-7.23,12.16,65.1,54.71,56,78-5.47,14-39.57,19.08-67,10-48.84-16.16-64.32-73.16-81-68-12.19,3.77-2.73,33.84-24,56-18.26,19-52.25,25-64,13-11.42-11.69,7.09-31.34-1-64-7-28.22-31.21-55.56-50-53-4.49.61-12.52,3.06-35,46-27.73,53-27,61.37-38,66-22.53,9.46-54.15-13.65-82-34-33-24.13-31.31-33.89-52-42-41.89-16.41-81.3,10.91-88,0-8.51-13.85,58.88-51.54,52-86-7.36-36.84-90.83-26.07-114-76-15.27-32.91-3.33-90,36-105C402.08,318.72,440,332.11,463.43,364.65Z"}}); It successfully changes the svg path at the end of the trigger section, but will not animate from the smaller shape, up. Wondering if there is a better way to transition to a path inside of a Tween (I just dont know the extent of what you can do with them yet...). Would appreciate any insight, sorry for the lack of functionality in the links. (If anyone knows how to link external files... lemme know).
  2. Hi, I have a problem with a loop animation that causes an high CPU/GPU rate with Chome and a jerky effect with Safari. Here's my demo: https://www.dudemag.it/test/. Here's my code: import React from 'react'; import gsap from 'gsap'; class App extends React.Component { componentDidMount() { var a = 0; var b = 0; for (var i = 1; i <= 18; i++) { a = i*90; b = i*90+360; gsap.timeline({ repeat: -1 }) .set(this['menu_blob_' + i], { rotation: ('-' + a), xPercent: 200, yPercent: 0.01, rotation: a }) .to(this['menu_blob_' + i], 5, { rotation: ('-' + b), xPercent: 200, yPercent: 0.01, rotation: b, ease: "none" }); } } render() { return ( <div> <svg className="blob_cont" ref={element => this.blob_cont = element}> <image xlinkHref="img/background.png" mask="url(#mask)" width="100%" height="100%" preserveAspectRatio="xMidYMid slice" /> <defs> <filter id="gooey" height="130%"> <feGaussianBlur in="SourceGraphic" stdDeviation="15" result="blur" /> <feColorMatrix in="blur" mode="matrix" values="1 0 0 0 0 0 1 0 0 0 0 0 1 0 0 0 0 0 18 -7" result="goo" /> </filter> </defs> <mask id="mask" x="0" y="0"> <g style={{ filter: 'url(#gooey)' }}> <circle ref={element => this.menu_blob_1 = element} className="blob" cx="10%" cy="10%" r="80" /> <circle ref={element => this.menu_blob_2 = element} className="blob" cx="50%" cy="10%" r="40" /> <circle ref={element => this.menu_blob_3 = element} className="blob" cx="17%" cy="15%" r="70" /> <circle ref={element => this.menu_blob_4 = element} className="blob" cx="90%" cy="20%" r="120" /> <circle ref={element => this.menu_blob_5 = element} className="blob" cx="30%" cy="25%" r="30" /> <circle ref={element => this.menu_blob_6 = element} className="blob" cx="50%" cy="60%" r="80" /> <circle ref={element => this.menu_blob_7 = element} className="blob" cx="70%" cy="90%" r="10" /> <circle ref={element => this.menu_blob_8 = element} className="blob" cx="90%" cy="60%" r="90" /> <circle ref={element => this.menu_blob_9 = element} className="blob" cx="30%" cy="90%" r="80" /> <circle ref={element => this.menu_blob_10 = element} className="blob" cx="10%" cy="10%" r="80" /> <circle ref={element => this.menu_blob_11 = element} className="blob" cx="50%" cy="10%" r="20" /> <circle ref={element => this.menu_blob_12 = element} className="blob" cx="17%" cy="15%" r="70" /> <circle ref={element => this.menu_blob_13 = element} className="blob" cx="40%" cy="20%" r="120" /> <circle ref={element => this.menu_blob_14 = element} className="blob" cx="30%" cy="25%" r="30" /> <circle ref={element => this.menu_blob_15 = element} className="blob" cx="80%" cy="60%" r="80" /> <circle ref={element => this.menu_blob_16 = element} className="blob" cx="17%" cy="10%" r="100" /> <circle ref={element => this.menu_blob_17 = element} className="blob" cx="40%" cy="60%" r="90" /> <circle ref={element => this.menu_blob_18 = element} className="blob" cx="10%" cy="50%" r="80" /> </g> </mask> </svg> </div> ); } } export default App; What's the problem? How can i solve this?
  3. so I have this piece of SVG, the lines seem to be fine, but for some reason when I try to drawSVG them they start with dashed lines and then in the end of duration just jump to 100%, instead of animating. When I just drop it on Vivus Instant (https://maxwellito.github.io/vivus-instant/) it works just fine. Can anyone please point me what might be the cause?
  4. Hi, I have a text Logo SVG containing HTML Paths. when the user scrolls down (> 10 px) the paths of the Logo will be hidden except two paths (.path-d, .path-m). the second path will animate next to the first one. This work and happens correctly. When the User scrolls up to the top of the page the position of the second path should be animated back to the initial position. This doesnt work for any reason. I dont get it. const logo = document.querySelector('.logo'); const logoSvg = document.querySelector('#logo'); const paths = logoSvg.querySelectorAll('path'); const pathM = document.querySelector('.path-m'); const tl = gsap.timeline(); const filterPaths = Array.from(paths).filter(path => !path.classList.contains('path-d') && !path.classList.contains('path-m')); // e.target is the event from scrolling container if (e.target.scrollTop >= 10) { console.log('here'); tl.to(logo, { duration: .2, left: '2%' }) .to(filterPaths, { duration: .1, opacity: 0 }) .to(pathM, { duration: .4, x: '-75' }); } else { console.log('and here'); tl.to(pathM, { duration: .4, x: '0' }); } I tried it now with timeline and simple 'gsap.to(...)' but both with the same result. When the User scrolls to top, the second Path (.path-m) moves a millisecond to the right and goes back to the position where it have to be when the user scrolls down. That doesnt makes sense to me. In HTML the property which ist on the Path is 'matrix(1,0,0,1,-75,0)' which is definitely wrong. What do I forget? What do I wrong? Thanks in Advance.
  5. I am trying to have the arrow group move along the X while fading in and have the inner svg paths stagger fade in, but it seems the group move and fade won't work with the stagger of paths.
  6. Hi there! This might be more of an SVG composition question than an MorphSVGPlugin question, but hoping someone might be able to lend some tips on achieving the right effect for this: https://codepen.io/nolan330/pen/qBdZxJO In the pen, you might notice that the morph "primarily" expands the pentagon into the dodecagon, with the triangle and square sort of collapsing ("merhhhh...") into single points respectively. I'm wondering how I might be able to refine the morph, perhaps using shapeIndex or tweaking the SVG itself, so that the 3 independent shapes more "equally" contribute to the final dodecagon. (I apologize I don't have a more precise vocabulary for this!) The idea was that 3 + 4 + 5 = 12 (points), and 2 * 2 * 2 = 8 (stroke, who knew stroke grew exponentially!?), so the 3 original closed shapes might sort of compose smoothly into the final dodecagon. I think it could look pretty neat if configured correctly, but it seems like it will depend on a more clever path for the 3 independent shapes. So far, I've tried kind of a "cheat", where the shapes are just one continuous line, but I think it could still be improved: https://codepen.io/nolan330/pen/LYVNQmp I also tried changing the shapeIndex on the continuous line, but it doesn't seem to significantly impact the outcome: https://codepen.io/nolan330/pen/oNXxEyb In any case, any tips or feedback welcome! And I apologize if this is more of a SVG fundamentals question/unfit for the forum. -nolan
  7. Hello again! I've managed to make some items orbit infinitely ? There are a few things I'm slightly struggling with: 1: I have tried using 'progress' and 'totalProgress' to make the animation start in 'full orbit' (i.e. without the beginning part). I've tried setting it all the places that seem correct (see commented out js in codepen). I must be missing something as nothing I've tried works..? 2: If you check the console, there are lots of errors like '"Invalid property" "start" "set to" 0.5714285714285714 "Missing plugin? gsap.registerPlugin()"'. I'm working in Magento2 ? so thought this was some kind of require.js error, but it also happens in the codepen demo. In the past I have seen this if there is a null target, but there are no null targets here. Why are these errors happening? 3: Also, in this simplified demo, the items seem to not follow the path exactly..? (offset and seems slightly wonky too). I assume this is something to do with the svg path itself? The 'items' are too small to need an offset? Magneto2 sidenote: I couldn't get MotionPathHelper to work, I really tried! I loaded it in the correct method via requirejs-config.js. Just mentioning this in case anyone has had the same issue and worked it out. I used the minified js files. Look forward to your response, thanks!! P.s. Loving version 3 !
  8. szsoma

    Lucky wheel

    Hi! I would like to make a lucky wheel (something like this) and I am in trouble with the indicator at the topright corner. I've 12 sectors on the wheel and the indicator sholuld move when the little sticks are under it. The problem is the wheels easing and the triggering. Can someone help me?
  9. 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>
  10. hello! i'm new to GSAP, and honestly i have limited JS knowledge. i coded an SVG animation that works perfectly on most browsers, but we need it to work on MS Edge as well, so i'm trying to achieve it using GSAP: i manage to get the first iteration right, but then it goes out of sync. SMIL: https://codepen.io/urx/pen/XWJNgLB GSAP: https://codepen.io/urx/pen/QWwGMbq help?
  11. Hello, Im trying to create click points on image/svg, that will animate line and point to another element point. As on image example if line is on building 1 and some one click building 2 or 3, line will go to clicked building. Best wil be if it could move just ending point from one to another position, transforming whole line That's my pen https://codepen.io/isuke01/pen/yLyyeyb but nothing exacting so far, I just create clicking area with callback, but I have no idea how to make this to work as it should. Thanks for any help
  12. 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
  13. Hey folks. ? Having a bit of trouble with how to approach this. A client's asked for some x-mas baubles to "drop in all dangly" from the top of the screen, I've made a rough SVG of the structure of the bauble. The 'string' is made of circles (and other shapes, like little ribbons and bells and stuff) instead of a path. I was looking at the physics plugin, (in the attached codepen) But it kinda needs a bit of a bounce ease? And you can't mix physics and eases... Has anyone done anything like this? Any ideas of a good approach?
  14. 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.
  15. GreenSock

    RaphaelPlugin

    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. Enables TweenLite and TweenMax to animate properties of Raphael JavaScript objects (see http://www.raphaeljs.com/). Raphael is a JavaScript framework that simplifies work with vector graphics on the web. For example: // creates canvas 550 × 400 at 10, 50 var paper = Raphael(10, 50, 550, 400); // creates rectangle at x = 50, y = 40, with a width of 200 and height of 100 var rect = paper.rect(50, 40, 200, 100); // sets the fill attribute of the rectangle to red (#f00) rect.attr("fill", "#f00"); // tween the fill to blue (#00f) and x to 100, y to 100, width to 100 and height to 50 over the course of 3 seconds using an ease of Power1.easeInOut TweenLite.to(rect, 3, {raphael:{fill:"#00f", x:100, y:100, width:100, height:50}, ease:Power1.easeInOut}); You can tween any of the properties that you would normally set using raphael's attr() method as well as the following transformation properties: rotation, scaleX, scaleY, skewX, skewY, tx and ty and even shortRotation which will rotate in the shortest direction to the destination value. tx and ty refer to the translation x and y properties (e and f from the element's matrix). This gives you a lot of control, even beyond what's easily accomplished through Raphael's own methods. Learn more in the RaphaelPlugin documentation.
  16. I'm trying to get proper control of these balloons, and I'm close, but not. quite. there yet. The green one is for reference, and demonstrates that gsap's default behavior is to use "left top" as the origin. The red one is the one whose attributes I'm tweaking, trying to accomplish this one, surprisingly-challenging goal: start horizontally centered, then animate till it's scaled 2x and centered on the crosshairs. Questions I have about the attached pen: Why doesn't the red balloon start already-centered? Why does the red balloon end up slightly below-left of the crosshairs? (I put a subtle box around the red balloon to make this easier to see.) What can I do to resolve these 2 issues before moving on to learning to animate these suckers along a curve?? ?
  17. Hey everyone! So, this is my first time posting in the GSAP forums, as well as my first time posting in any coding forum at all, so I apologise if this is the wrong place for this kind of question. I am also veeeery new to GSAP. So basically, I'm trying the get a blob SVG to change shape every time the user clicks a button. The animation mostly works, however there seem to be a couple points that won't adhere to the animation rules I set, and change their position immediately instead of waiting to move with the rest of it. I am using arrays containing the new SVG path coordinates to pass values into the animation cycle, and perhaps my code is a very roundabout way of creating what I want, but for the most part that doesn't seem to be the issue. I have tried using a .fromTo() in case it was a problem with the initial point positions, and I have tried creating new SVGs making sure that I keep the same points to create the shapes, neither of which worked. If anyone can let me know what the issue is I would really appreciate the help! html: <button onclick="bubbleSVG()"> Blob </button> <svg width="50%" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 1920 900"> <defs> <style> .cls-1{fill:url(#lg1);}.cls-2{fill:url(#lg2);}.cls-3{fill:url(#lg3);}.cls-4{fill:url(#lg4);} </style> <linearGradient id="lg1" x1="1728.025" y1="658.409" x2="1364.199" y2="294.583" gradientUnits="userSpaceOnUse"> <stop offset="0" id="color1" stop-color="#55cdff"/> <stop offset="1" id="color2" stop-color="#6aff6f"/> </linearGradient> <linearGradient id="lg2" x1="1304.47" y1="310.036" x2="1197.59" y2="203.155" xlink:href="#lg1"/> <linearGradient id="lg3" x1="1652.485" y1="179.608" x2="1520.717" y2="47.839" xlink:href="#lg1"/> <linearGradient id="lg4" x1="1381.572" y1="117.848" x2="1339.908" y2="76.184" xlink:href="#lg1"/> </defs> <g id="Bubbles1"> <path id="b1" class="cls-1" d="M1259,418c52.4-92.8,234-260,422-250,165.841,8.821,168,384,13,524-148.573,134.2-347,79-415-3S1211,503,1259,418Z"/> <path id="b2" class="cls-2" d="M1165,309c21.061,54.758,84,32,124,9s78-72,61-103-49-50-88-50S1140,244,1165,309Z"/> <path id="b3" class="cls-3" d="M1583,49c100.579-15.646,155-1,145,51-5.1,26.532-59,13-126,33-70.6,21.076-91,57-145,32S1493,63,1583,49Z"/> <path id="b4" class="cls-4" d="M1353,73c-35.308,7.305-29,38-5,46s39-1,43-15S1382,67,1353,73Z"/> </g> </svg> javascript: var BlobColor1 = ["#f28500","#030087","#0079ce","#ce49ff"]; var BlobColor2 = ["#ffb300","#001eb3","#00d9f9","#f971ff"]; var Blob1 = ["M1259,418c52.4-92.8,234-260,422-250,165.841,8.821,168,384,13,524-148.573,134.2-347,79-415-3S1211,503,1259,418Z","M1309,230c52.4-92.8,246.729-119.071,363,29,117,149,199.915,385.763-7,460-131,47-138.669-35.119-192-220C1428,343,1261,315,1309,230Z","M1305,216c115.142-183.181,489-137,348,89-100.279,160.73,241.217,149.425,82,301-125,119-347,146-455,29C1169.874,515.7,1195,391,1305,216Z","M1180,389c27.432-214.617,89.781-84.552,345-218,306-160,398,335,282,547-82.843,151.4-303-9-411-126C1285.874,472.7,1163,522,1180,389Z"]; var Blob2 = ["M1165,309c21.061,54.758,84,32,124,9s78-72,61-103-49-50-88-50S1140,244,1165,309Z","M1309,581c21.061,54.758,88,64,128,41s-9-94-26-125-49-50-88-50S1284,516,1309,581Z","M1561,794c21.061,54.758,149,18,240-34,104.838-59.908,58.919-85.024,25-95-51-15-87.395.807-165,36C1575,740,1536,729,1561,794Z","M1755,164c34,23,73.208,32.127,100-12,17-28-11.162-57.01-34-84-22-26-67.2-39.09-90,0C1703,116,1731.986,148.432,1755,164Z"]; var Blob3 = ["M1583,49c100.579-15.646,155-1,145,51-5.1,26.532-59,13-126,33-70.6,21.076-91,57-145,32S1493,63,1583,49Z","M1767,163c81,69,127.446,142.778,45,149-53,4-46-21-97-82-26.694-31.928-118.783-64.3-109-123C1615,53,1697.664,103.936,1767,163Z","M1814,286c13,58,46.62,92.25,27,116-19,23-65,66-116,5-26.694-31.928-38.441-62.305-15-117C1737,227,1805.241,246.92,1814,286Z","M1495,97c-5.635,59.171-68.738,39.864-130,95-50,45-111,44-120-6-9.771-54.282,87.559-15.305,111-70C1383,53,1501,34,1495,97Z"]; var Blob4 = ["M1353,73c-35.308,7.305-29,38-5,46s39-1,43-15S1382,67,1353,73Z","M1249,346c-35.308,7.305-33.51,53.684-12,67,21,13,72,2,76-12S1278,340,1249,346Z","M1239,95c-35.308,7.305-15.51,71.684,6,85,21,13,80-7,84-39C1333.246,107.03,1268,89,1239,95Z","M1252,571c-35.308,7.3-15.51,71.684,6,85,21,13,80-7,84-39C1346.246,583.03,1281,565,1252,571Z"]; var counter = 1; function bubbleSVG() { console.log(counter); TweenMax.to("#color1", 1, { stopColor: BlobColor1[counter], ease: Expo.easeOut, }) TweenMax.to("#color2", 1, { stopColor: BlobColor2[counter], ease: Expo.easeOut, }) TweenMax.to("#b1", 1, { attr: {d: Blob1[counter]}, ease: Elastic.easeInOut, }) TweenMax.to("#b2", 1, { attr: {d: Blob2[counter]}, ease: Elastic.easeInOut, }) TweenMax.to("#b3", 1, { attr: {d: Blob3[counter]}, ease: Elastic.easeInOut, }) TweenMax.to("#b4", 1, { attr: {d: Blob4[counter]}, ease: Elastic.easeInOut, }) counter += 1; if (counter > 3) { counter = 0; } };
  18. Hello everyone! I need help with animation performance on RETINA display I have a swiper slider and on slideTranasitionStart I'm animating a mask (covering the whole slider). The animation is very smooth in all browsers. I'm using an external monitor for work but as soon as I drag the browser window to my retina display (MacBook Pro -Retina, 13-inch, Early 2015, macOS Mojave) the animation looks very laggy (lowest fps is around 5-6!) ! I tried 2 main options to do the animation: Adding classes to transform the mask (and only using the most performant css properties transform and opacity on the animated elements). For this option I tried adding will-change property on the animated elements, I replaced translateX with translate3d, I only added transition on the transform property. Using morphSVG plugin to achieve the transforming of the mask (in the codepen demo I'm using this option as it's way less code) Unfortunately both options are still laggy on retina display. Nothing seems to improve the performance on the retina display and I'm running out of options. I'd be very grateful if someone can help out! Thank you
  19. Hi there, What I want is for the polygons that make up the top-right triangle and the bottom-left triangle to 'expand' when hovered. This is done via a TimelineMax modifying the polygons' points. I had this working using TweenLite to move everything when hovered over and then a bunch more TweenLites to move everything back, but because the actual situation I need this for is much more complicated, that became a huge pain really quickly. So I'm trying to convert as many things as possible to Timelines so I can just reverse them. The problem I'm experiencing here is: If you roll over one triangle, mouse-out of the SVG area, and then hover over the second triangle, it works as expected. However, if after page load you roll over one triangle, then immediately roll over the other, the first triangle will stay 'expanded'. I'm guessing the problem is something to do with the original triangle's points being overwritten somehow but I haven't been able to figure it out. I tried using TweenLite.set() but nothing changed. Thanks, EK
  20. I'm an experienced developer but new to GSAP, delighted to be here, looks amazing. Can I ask an SVG timing question before posting a codepen? I've read everything in the forum on SVG, in particular the Gotchas post, thanks for that, it was illuminating. I'm putting together my first GSAP SVG animation, ambient background thing based on a client logo, private project at the moment so I'd rather not do the codepen thing unless I have to... I'll adapt if there's no other way. Really simple design... bug from the logo, simple polyline shape, blown up to 1/3 to 2/3 screen size, low opacity, e.g. 0.1, slowly fades in from nothing, floats up the screen, fades back to nothing. many of these spawn, at different scales and speeds, each whole life takes 7 to 12 seconds, and the whole screen is full of ephemeral floaty transparent bugs, overlapping and creating cool effects. max 9 layers (I might increase that if I can solve this issue). basically working perfectly on 1st attempt, except for one issue... many if not most of the bugs disappear before their timeline is finished. still looks cool, but I'd like to isolate why this is happening. It behaves exactly the same in all browsers on all platforms I've tested (which is a credit to GSAP!). So the way I have it working is no master timeline... for each new layer a new TimelineLite, then motion and fadein-fadeout tweens added to that timeline. A function creates new layers, each on a new timeline, onComplete: new layer. (hope garbage collection clears out the dead ones, seems to be working.) I guess my question is... am I running into gotchas trying to animate 9 layers of full-screen scaled SVGs of varying opacities? It burns a bit of CPU on Safari and Chrome, but Firefox handles it easily full-screen. I'd love to get tips on how to get the TimelineLites to complete, i.e. fade to 0 before disappearing. All thoughts much appreciated.
  21. Dears, i have created an svg rect inside a group and i have make this svg group to have "transformOrigin:'center center' " explicitly then draw a little blue circle at this group returned position my question is when i am trying to rotate the svg group then resize it the return location is wrong and it's not at the center of this group, how i can keep my reference point at the center of this group all the time with all different transformation? https://codepen.io/Shouha85/pen/MWgxNwP?editors=1010
  22. Hey all, after adding SVG support for elCanvas I wanted to also add the ability to draw an svg outline In the code pen I attached( which i used the public examples version of drawsvg on) I am attempting this 1) Draw a svg on the document with the same paths as the one in the canvas 2) Animate the svg outlines with drawSVG 3) On update match strokeDasharray to setLineDash and lineDashOffset so the canvas shape gets updated As you see it works! However every time I would need to draw an svg into the canvas I would first need to put one on the document, I wanted to ask is there a way around this? Is there a way to get the lineDash/DashArray data without having to draw an svg visually? When I put some animations with this effect into our game the devs might get upset I'm drawing all these elements just for reference I guess this is mainly a question to you awesome devs that made the lib in the first place @GreenSock but also to anyone else who might know. I had another consideration where I could make modifications to the plugin itself, but I really didn't wanna touch that, trying to do this without needing to modify Gsap code Thanks in advance!
  23. Hi, I'm curious about whether something I'm doing in svg will be possible in PIXI. I'm building complex svg diagrams that animate, but also with aspects of them that I want to be able to animate zoom on, (almost) infinitely (think Mandelbrot set like zoom but data-visualization related). Currently I'm using svg for that infinite scaling capability, but I know that for some of my data sets, svg isn't going to cut it eventually. It'll just become too much weight on the DOM / CPU at some point as there will simply be too many things on the screen to render, forget animate. I could look into things like tiling, but that has a pretty huge performance / usability penalty for my use-case. Also, the complexity and detail of what I need to visualize isn't so great as that of a map either. Also, I'd still need to animate aspects of the visualization, which isn't usually necessary with tiled maps. I'd like to switch to leverage a gpu based solution like PIXI down the line. The only problem is that PIXI doesn't really preserve the scalability aspect of svgs (not at all a PIXI expert, have only built some simple circle animations to test with). I'm pretty confident that minus the zoom functionality, PIXI+GSAP will be a good solution for every other aspect of the rendering / animation, but do you know if there is a way to leverage all the GPU powered goodness of PIXI but still preserve the sharpness of images and text as a user "infinitely" zooms in? (10x, 100x, 1000x scale of original)?
  24. Hi! I am trying to transform or build this css animation into a GSAP timeline because with CSS is consuming too much CPU. The #bar-- is a g element of an svg that contains 80 bars @for $i from 80 through 1 { #wave-g__top--#{80 - $i} { animation-name: barOpacity; animation-iteration-count: infinite; animation-duration: 5s; animation-delay: $i * 0.065 + 0.25s; } } @keyframes barOpacity { from { opacity: 1; } to { opacity: 0.2; } } This is animation I am getting with CSS https://i.gyazo.com/fec064c25c2456ce2c3e34e932a5607e.mp4 and I thought this could be the similar in GSAP but is just not working, I am very new with this actually. const bars = document.querySelectorAll('#wave-g__top g') let tl = new TimelineMax({ repeat: -1 }) bars.forEach((b, index) => { const delay = index * 0.065 + 0.25 tl.to(b, 0.1, { opacity: 0.2 }, `-=${delay}`) })
  25. 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
×
×
  • Create New...