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. Hi all! So I have an SVG image that is basically an outline of a Chinese letter: https://imgur.com/a/WxcxIgr and I would like to fill this in with brush strokes when the SVG image is hovered, while making sure that the strokes are confined within the outline. Kind of like this: https://imgur.com/a/AdoPnkx The brush strokes will not fill the SVG all at once, but basically as the cursor is moved over it. Can I use GSAP for this? Still pretty new to this so any pointers to the right direction would be highly appreciated!
  2. violet

    Animate SVG line

    Hello everyone, this is my first post so sorry if I'm wrong in something. I'm unable to create a Codepen but I've created a Codesandbox, I hope it's good anyway. What I want to do is very easy: animate an svg line tag. So I created a tweenMax.to animation but it seems not to work. Why? export const AnimatedLine = ({ x1, y1, x2, y2, ...props }) => { const lineRef = useRef(null) useEffect(() => { if (lineRef.current) { TweenMax.to(lineRef.current, 1, { x1: x1, y1: y1, x2: x2, y2: y2 }) } }, [x1, y1, x2, y2]) return <line ref={lineRef} x1={x1} y1={y1} x2={x2} y2={y2} {...props} /> } When I run it, I get:
  3. Hi everyone! Sorry, if the answer is already there, but I couldn't find it. I have 2 SVG tags. 1) Source SVG sprite with 2 <rect> shapes. 2) And the second SVG is pulling elements from the first SVG with <use> tag. The task is to move both shapes from the source SVG to the same point (x, y) using your library. Now they are moving together and to different points. Thanks for your attention, and any help would be greatly appreciated. Thank you!
  4. Hi all, I'm new with GreenSock and quite happy with I've done until now with it! I've to do a animation through a path. All seems right up to here. But it needs to be responsive. I mean, as the path adapts to the width of the screen, the animation should also adapt. Is it possible to do this with GS? Any help will be really apreciated. Thanks!
  5. Hi, I'm creating a simple polygon svg shape, and using it to mask an image using the clip-path:url(#id) method. I'm then trying to animate this using GSAP. This works fine, except in FireFox, where no animation occurs. This can be viewed at this codepen: http://codepen.io/rorytawn/pen/OVeWNB. All I'm trying to animate is simple 2D transforms like x and scale. I know FireFox has some issues with clip-path, so I tried animating the same shape, when it is not used as a mask, and that works fine in FireFox. So the issue is something to do with animating the svg when it is assigned to clip-path. I tried another example using GSAPs AttrPlugin, which does work in all browsers including FireFox. Codepen here: http://codepen.io/rorytawn/pen/MwMbVx. But as far as I'm aware, this won't allow me to animate using css features, rotation, skew etc. If anyone can please point me in the right direction to get the first example to work in FireFox it would be much appreciated! Many thanks!
  6. iman

    draggable over path

    hi guys i want drag element over path and didn't success. anyone can help me ? whats my mistake.......!!!!!!!???
  7. Hi! I am working on an SVG handwriting effect. I've got it to work but I can't figure out how to make it not show the "crossing" points of the letters as shown in the codepen. Also, I need the final SVG animation to have a gradient such as in the image below but can't figure out how to change the color of the stroke which is currently black to a gradient. Hope my questions make sense. Thanks!
  8. Hi, I'm trying to get an effect of a collection of shapes to come together and fit together (though some of the paths need a clean up ?) I have made a few simple ScrollTrigger animations and can arrange the shapes into where they should be / the general animation however.... I'm really stuck on how to get the shapes on the bottom on the vector to act as a mask for the background image the animation is placed upon. I'm able to make a compound path a set the mask but wondered if anyone had any ideas around how I would be able to mask as well as animate the shapes independently (as they are moving on the y-axis at different heights). Any help would be appreciated!
  9. Hello! I am working to reveal this shape/outline via a mask ...specifically the rectangle shape, as it animates via motionPath the shape should reveal. This pen is set up to show the rectangle animating along its path (.path2) successfully, but when I place it within a mask ("theSquare"), motionPath breaks. Commenting in <defs> and <mask> within the linked pen will replicate the error. Can you help me understand why this is happening? Thank You!
  10. 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.
  11. 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
  12. 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...
  13. 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.
  14. 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
  15. 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.
  16. 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?
  17. 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
  18. 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.
  19. 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.
  20. 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
  21. #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 } });
  22. 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
  23. 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!
  24. 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
  25. 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
×
×
  • Create New...