Search the Community
Showing results for tags 'stroke'.
Found 8 results
-
Hi, GSAP is awesome! I have made an animated 'P' but mainly using SVG <animate> so far I using the SVG to animate strokedash-offset, dash-opacity and fill. I'm aware that I should probably use Draw for the stroke stuff but I can't afford it, I've been out of work for 10 years+ and recently I've decided to become a webdev so I've been designing my portfolio so money is tight. I was wondering how would I animate these 3 attributes as I have tried using .to() and putting {strokeOpacity: 0} as it is set to 100% initaly but this does not work. How come? I have also had the same problem with strokeDashOffset and Fill. Hoe can I animate these properties with GSap like I have with SVG below? https://stackblitz.com/edit/paulscv-2qssl8?file=src%2Fbg-components%2FletterP.js Ultimatly my goale is to animates these things with scrollMagic. But for now it would b e nice just to animate them. Is this possible? Thanks
-
Hello, I found an animation that, when scrolling, fills a strip of a circle. I decided to do the same on scrolltrigger. I found this animation on this site https://digital.vtb.ru/digest/2021-apr/ I also uploaded a photo of how it looks Probably this is done as something with svg, or with a blue background at the back? I do not know how to implement this on scrolltrigger. I hope for your help. Thanks in advance
-
Hi guys! I'm trying to make a simple weather app on Codepen and I have a hard time to make one animation with dotted strokes. I want to make these strokes to move like rain drops. I tried drawSVG first but, I found an article about a line animation using stroke-dashoffset on CSS Tricks and it kind of works. There are still dots on the sides and look not good... Here is the article: https://css-tricks.com/svg-line-animation-works/ Is there any solution for this? Thank you
-
Wondering how to create onScroll stroke svg like in example: http://brightmedia.pl. Tried to create it with svg path but did not realized how to make it responsible. This is my site http://mylinks.rocks/trackbox/testing2.html.
-
Hi there, first post on the forums. Excited to be using Greensock, it's been great so far. I'm trying to accomplish 2 drawSVG staggered animations on an SVG path using Timeline: 1) Draw the stroke 2) Draw the fill If I combine them into one Tweenmax.from() call, it works great. However, when I stagger them, the 2nd from() call where I'm passing fill is trying to redraw the stroke as well. Is it possible to let the call know to ignore the stroke in the 2nd from() call? Thanks!
-
DrawSVG doubles stroke of my path – Handwriting Effect : please help
colleenshaw posted a topic in GSAP
I want the SVG animation that I found on the left to have the same effect on the right element. What am I doing wrong?!!?!!?! This is driving me crazy -- why is there a double stroke effect? How can I fix this. Any assistance would be greatly appreciated. Thanks! -
Hi, I'm trying to reveal a dashed line with drawsvg using a mask but the mask position seems to be off. I can increase the stroke-width for lines that don't overlap but when they do overlap in the codepen example, I need a more precise line. Anybody encounter this and know whats up? Thanks!
-
Hello, I'm mystified as to why the stroke on the red bar in my pen doesn't animate like the stroke on the white bar. The only difference I can see are the coordinates of the lines. Thanks
.thumb.jpg.73c8d381b3dccb457d6b4a4cdec2b078.jpg)
