Search the Community

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...

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.

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.

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?

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

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

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.

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

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.

#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 } });

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.

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

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

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!

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

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

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).

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?

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?

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.

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.

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.

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

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 !

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?