Jump to content

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

Search the Community

Showing results for tags 'svg'.

More search options

  • Search By Tags

    Type tags separated by commas.
  • Search By Author

Content Type


  • GreenSock Forums
    • GSAP
    • Banner Animation
    • Jobs & Freelance
  • Flash / ActionScript Archive
    • GSAP (Flash)
    • Loading (Flash)
    • TransformManager (Flash)

Product Groups

  • Club GreenSock
  • TransformManager
  • Supercharge


There are no results to display.

Find results in...

Find results that contain...

Date Created

  • Start


Last Updated

  • Start


Filter by number of...


  • Start



Personal Website



Company Website



Found 498 results

  1. The circle move along the path with animation in this example. But how to do that with draggable plugin, drag the circle along the path.
  2. Hi there, Loving GSAP and worked with it on a few projects! I'm trying to create an intro animation for one of our apps using SVGs. In the past I was able to make it work without lag before, but for the life of me I can't get it to be smooth on a full screen. I've tried animating x/y properties instead of top, etc. The result is the same. It needs to adapt to screensize that's why I use vh for tweening. Does anyone have tips for me please? I've attempted many things that don't seem to work and I'm just worried i'm going at this all wrong maybe... The reason the SVGs are wider than the screen is that there are horizontal movements between different pages on our web app. PS. should try keep the screen height as big as possible to see the animation properly. Regards
  3. I'm trying to apply a scrub/scrollTrigger to an animation, if I exclude the ScrollTrigger I can get a smooth animation in the tl but applying ST transforms it to on/off with no transistion. It is code borrowed & butchered from the talented and helpful of this forum so apologies for the state of markup, lot of rooting around trying to make sense of things. What i want to achieve is an 'onload' animation - SVG expands - which is then reversed on scroll & scrub, some animation I can get to work thanks to the ST video, which made it look too easy Thanks for any pointers on my mistakes, it is apparently a great education...
  4. Hi! I just started using the MorphSVGPlugin and I was wondering if I can change the transform value of the path. This is because the viewBox normally is not the same. But to use the plugin I thought I needed the paths to be inside the same SVG tag. Is there any way to change the transform value or the viewBox? For your information I am using ReactJs for this project.
  5. BFreakout

    Fill a bottle

    Hello Community, I am currently working on an open source community project. It is a game (www.rxjs-fruits.com) - Here fruit is supposed to fall into a funnel and the liquid is to be poured into a bottle. I have now got the SVG graphic for a bottle from a designer. Somehow I just line up too stupid to have the bottle filled. Does anyone have any idea how I can best solve this? Maybe also how I can drop the fruit more beautifully off the assembly line? As a non-designer, I make it really difficult here. bottle.svg
  6. Hello Everyone I'm struggling with something that I'm not sure if it's trivial, impossible or I'm just doing it wrong. I've checked everything that I could find about .getBoundingClientRect() .getBBox() and I realized that you recently released an suuuuperb update with .convertCoordinates() and a lot of cool stuff. Though I feel a bit silly trying to use it. Or maybe it's way complicated due to 2 different SVGs and their coordinates systems. Please let me know if it's possible to put that blue box over the green one but specifically to #align-line (so the top of the blue box is touching the line) After 6hrs of doing something similar as blue box is doing in the attached CodePen demo and demystifying some awesome @OSUblake demos I would very much appreciate some guidance on this one. Why I have to do this in such way - I have a mask element (a card that comes out of envelope) and it has to be aligned with the envelope - otherwise the animation is a no no - but later I need to position it (card) anywhere on the screen, so the elements must be separated, but in sync - they will also have dynamic sizes and widths depending on the needs and all the stuff wouldn't be much of a problem if not that one sync issue. Hopefully I'm just being silly and it's possible, If not, well I need to rethink the whole thing BTW Thanks for the awesome update! Cheers, Patryk
  7. I'm kind of stuck on how to approach this problem. I have a timeline that is showing a primary SVG image, I'm trying to find a way to swap the SVG for another as a part of the timeline, and then continue the animation.
  8. Ok, so here are 2 almost identical tweens. Both initially set transformOrigin of bars to bottom-center. The first one uses gsap.from() and it works weird, looks like it's some bug (or perhaps I miss something?) The second one is almost the same, but it uses gsap.to() and transformOrigin seems to work fine. What could be the reason for such behaviour?
  9. Hi. Amazing lib, just became a club member and i'm having a lot of fun trying it out. I am trying to recreate this pen on a create-react-app product. I would like to know if there is an analogous function in the motionPathPlugin that would return the array of objects i need (that was provided by MorphSVGPlugin.pathDataToBezier) in the pen attached.
  10. I have this below svg in my web application: and i have two buttons to rotate this element clockwise/anticlockwise 3d through y axis when user click on each button, how can i do that? is it possible to do it with Snapsvg? There is also this question on SO: https://stackoverflow.com/questions/61685984/rotate-svg-element-3d-with-javascript-or-jquery
  11. Hey guys, I am looking to achieve this effect, but it is using anime.js https://tympanus.net/Development/MorphingPageTransition/# I dont want to load to a second a library + i'am in love with GSAP, and i am pretty sure i can achieve this with it. Do you have any tips, leads, to achieve this ? Thank you everyone and have a good day.
  12. I’ve talked about this in other threads, but I think it’s worth making a standalone tip for it so here we go. There are three things that will eliminate coordinate surprises and weird transforms with your SVG exports. A background rectangle A background rectangle A background rectangle Yes, it’s that important. Take this simple 600 x 200 SVG. Nothing but a circle, rectangle and a blobby path. Here’s how it looks in Adobe Illustrator. You’ll see that I also have a background layer with a 600 x 200 white rectangle in it. Exporting that SVG produces this result: <svg xmlns="http://www.w3.org/2000/svg" width="600" height="200" viewBox="0 0 600 200"> <g id="Background"> <rect width="600" height="200" fill="#fff" /> </g> <g id="Children"> <circle cx="100" cy="100" r="75" fill="#75131a" /> <rect x="225" y="25" width="150" height="150" fill="#136036" /> <path d="M575,100c21,5-33.58,90-75,90s-104-82-75-90c39.93-11,33.58-88,75-88S534.71,90.41,575,100Z" fill="#0071bc" /> </g> </svg> Exactly as I’d like. A 600 x 200 viewBox and everything is positioned where I expected it. Now, what if I didn’t use the background rectangle? Here’s the export result after removing it: <svg xmlns="http://www.w3.org/2000/svg" width="554.65" height="178" viewBox="0 0 554.65 178"> <circle cx="75" cy="88" r="75" fill="#75131a" /> <rect x="200" y="13" width="150" height="150" fill="#136036" /> <path d="M575,100c21,5-33.58,90-75,90s-104-82-75-90c39.93-11,33.58-88,75-88S534.71,90.41,575,100Z" transform="translate(-25 -12)" fill="#0071bc" /> </svg> You can see the viewBox has now changed to 554.65 x 178 instead of my artboard size of 600 x 200. The circle and the rectangle no longer have the coordinates I expected, and the blobby path has some weird transform applied to it. This is only three simple elements and it’s a bit difficult to animate with precision. Now think about complex SVGs with multiple paths and how this could cause problems with your animations. Bottom line: use a background rectangle the same size as your SVG, export your code and then delete the rectangle if you don’t need it. Hopefully this info helps with your SVG projects. Happy tweening.
  13. Hello there! How make this hover effect on lines if used GSAP? I created this https://jsfiddle.net/muk0h4o2/ But it wasn't exactly what I wanted. And I like this example https://codepen.io/waaark/pen/ENRvvq But I want created lines and horizintal position. Thanks! 1402696f-1275-4fd9-8a36-462296ee8fd2.mp4
  14. #updating gsap from 2.1.3 to latest version resolved the issue When I try to move an <g> element to desired position, it works as expected within react storybook component. However, when export to an app, it adds css transform which is not what I wanted. TweenLite.set(target, { css: { x: 264, y: 12, opacity: 1 } }); react storybook element; correct behavior <g class="abc" id="abcd" data-svg-origin="315 305" transform="matrix(1,0,0,1,264,12)" style="z-index: 1000; opacity: 1; cursor: pointer; touch-action: none; user-select: none;"> <foreignObject width="1" height="1" x="362" y="331"> <div id="selectableItem-0"> <div style="height: 1px; width: 1px;"></div> </div> </foreignObject> <path cursor="grabbing" stroke="#4C5D65" stroke-width="1" d=" M 350, 340 m -35, 0 a 35,35 0 1,0 70,0 a 35,35 0 1,0 -70,0" fill="#00B6F1"></path> </g> exported component in an App; incorrect behavior <g class="abc" id="abcd" data-svg-origin="315 305" transform="matrix(1,0,0,1,264,12)" style="z-index: 1001; transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 284.979, 7.31769, 0, 1); opacity: 1; cursor: pointer; touch-action: none; user-select: none;"> <foreignObject width="1" height="1" x="362" y="331"> <div id="selectableItem-0"> <div style="height: 1px; width: 1px;"></div> </div> </foreignObject> <path cursor="grabbing" stroke="#4C5D65" stroke-width="1" d=" M 350, 340 m -35, 0 a 35,35 0 1,0 70,0 a 35,35 0 1,0 -70,0" fill="#00B6F1"></path> </g> the difference is inside style attr transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 284.979, 7.31769, 0, 1) no idea, what causes this. will appreciate if you can give me some hints these do not help either TweenLite.to(target, 0,{ x: 264, y: 12, opacity: 1 }); TweenLite.set(target, { css: { transform: `matrix(1, 0, 0, 1, ${moveToX}, ${moveToY})`, opacity: 1 } });
  15. Hi, I have a SVG I have created. You can see it by following the link to the codpen url. I want to create an animation to repeat the DNA pattern indefinitely at 45 degrees while keeping it inside the circle. I go no clue where to start :D
  16. Hey, First time posting so hope i'm making myself clear and not breaking any rules :). But i have no idea what i could be doing wrong (yet). Been working on a banner ad in which masked svg elements are animated: No trouble with Chrome or Firefox. But when i rotate a div element with an masked svg inside it, the mask takes a bigger size in Safari. I've added an event listener to not have to refresh every time to see my precious yoghurt rotate ;) Can anyone point me in the right direction what could be a solution? Not sure if this is Greensock related, if not, i'll show myself out :). Thanks anyway!
  17. Hi, I'm trying to scale the mask in the centre of an SVG to scale up to reveal text below, but the end result doesn't keep the mask in the middle. https://codepen.io/jimijbob/pen/Jjdermj Credit to @Sheilab67 for the original codepen. Any help would be very much appreciated. This is my first attempt at TweenMax so please be gentle. Many thanks in advance J
  18. Hi. I need some basic help with gsap.timeline() in a react environment. See my code below: import React, { useRef, useEffect } from 'react' import gsap, { TweenMax, Linear } from 'gsap'; import { ReactComponent as Twitter } from '../assets/svg/social/twitter.svg' const NavBar = () => { let twitterIcon = useRef(null); const tl = gsap.timeline() // this is the hover effect, making it glow green (all attributes are correct) const glowAnimation = (icon) => { tl.to(icon, 0.3, {attr: {style: "fill: rgb(48,223,171)"}, ease: Linear}) } // This just sets the initial colour of the black svg to white useEffect(() => { TweenMax.set(twitterIcon, {attr: {"style": "fill: rgb(255,255,255)"}}) }) return ( <div className="navbar"> <a title="Twitter" target="_blank" rel="noopener noreferrer" // onMouseEnter={ glowAnimation({twitterIcon}) } // onMouseLeave={ something? reverse of tl } href="redacted"> <Twitter // This is an SVG imported as ReactComponent className="navbar__icon" title="Twitter" ref={el => {twitterIcon = el}} /> </a> </div> ) } export default NavBar The basic premise of this is that it is part of my header. It has only one twitter icon (svg) right now. I want to be able to add more icons in the future (e.g. facebook, github) hence why I want to be able to pass in some reference to an icon into a single gsap timeline to describe the hover animation (defined as glowAnimation function) when mouse over an icon, and reverse that timeline when mouse leaves that icon. So I created a function with that timeline. But I'm unsure how to pass the twitterIcon reference (made using useRef) into the onMouseEnter attribute. What am I doing wrong? And also, what can I put in the onMouseLeave attribute to reverse the glowAnimation function? Sorry if this is stupid
  19. 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).
  20. GreenSock


    DrawSVGPlugin allows you to progressively reveal (or hide) the stroke of an SVG <path>, <line>, <polyline>, <polygon>, <rect>, or <ellipse> and you can even animate outward from the center of the stroke (or any position/segment). It does this by controlling the stroke-dashoffset and stroke-dasharray CSS properties. Watch the video The video below illustrates the many ways DrawSVGPlugin can be used and will get you up and running fast. Note that it uses GSAP 2 formatting. Demo Click through the demo below to see the various ways you can provide values to DrawSVGPlugin. See the Pen DrawSVGPlugin Values: carl click next by GreenSock (@GreenSock) on CodePen. More details For more detailed usage notes please consult the DrawSVGPlugin API documentation. The docs are loaded with tons of info that will help you get the most out of DrawSVGPlugin. Get your hands on DrawSVGPlugin DrawSVGPlugin is a bonus plugin for all Club GreenSock members. It's our way of saying "Thank you" to those that are fueling innovation at GreenSock. To download DrawSVGPlugin, just log into your account dashboard and grab the latest version of GSAP. Try DrawSVGPlugin for free on CodePen! There's a special [fully-functional] version of DrawSVGPlugin that we link to in our DrawSVGPlugin CodePens, so feel free to fork any of them, add your own SVG graphics, and take DrawSVGPlugin for a spin. CodePen is a fantastic way to experiment. We highly recommend it. Note: the special version of the plugin will only work on the CodePen domain. To find out more about the many benefits of being a Club GreenSock member swing on by the club page and be sure to check out the other premium plugins.
  21. 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?
  22. 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?
  23. 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.
  24. 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.
  25. Hello everybody. Our team is currently working on one beautiful landing page for our partner. Our goal is to create a stunning website which will attract new clients. Please reach me out and we will discuss the details. The project is not so hard I believe for you guys. With Regards, Aram.