All Questions
1,668
questions
0
votes
0
answers
48
views
How do I replicate the exact animation done on flecto.io hero section
I came across https://flecto.io(use a vpn if the site doesn't open) and the site caught my attention. I want to replicate the animation in the hero section. To be more precise, that is the part where ...
- 302
4
votes
0
answers
43
views
SVG Mask Reveal Animation Not Working on iOS 16 and macOS Safari
I've created a reveal animation using an SVG mask to reveal the content of the page. The animation works perfectly on Chrome and other browsers. However, on iPhone iOS 16 and macOS Safari, the SVG is ...
- 41
-1
votes
0
answers
30
views
How to customize animation of svg in react? [closed]
I am pretty curious how brilliant creates a page like this:
The animation of svg is compeletely interactive to the programming block in the toolbox.
I want to make a page similar to this in react. Is ...
- 17
2
votes
2
answers
53
views
SVG animation in Blazor is inconsistent
I am trying to include some SVG animation in a Blazor page and it seems that it does different things each time I run it.
I would like to know if there is something I am missing to make this work ...
- 23
0
votes
0
answers
21
views
My svg animation isn't responding properly to js transformations (translation)
I coded this animation with an svg text that's supposed to move like this: first the text "Times New Roman" enters from the right side of the screen, right after that "ce" reaches ...
- 1
0
votes
1
answer
81
views
How can I scroll to move SVG centered in the window along the path with SVG resized?
I followed this post how to resize SVG and successfully kept the red square always on the path when resizing the SVG. However, a new issue arises: when scrolling down, the red square is not move ...
- 21
0
votes
1
answer
88
views
How can i scroll down the pathIcon move center of screen follow along the path-svg when i resize screen?
New update and new issues below
Currently, my pathIcon move follow the path-svg with center screen.
My issues: When I resize the screen, path-svg (notes: I set witdh and height of svg is vw unit to ...
- 15
1
vote
1
answer
256
views
svg animation using framer motion
I need to create this base shape and those curved gray lines, those gray lines should always be there as they are static and on top of those gray lines should infinitely flow the blue colored balls, ...
0
votes
1
answer
224
views
Animate gradient pulse along SVG path
I want to animate a small line segment across a SVG path, with a gradient across the line segment. Similar to the "pulsing" effects on this site: https://www.authkit.com/
In my case, I want ...
- 99
0
votes
1
answer
38
views
SVG dashed path animation
How can I change the line to dashed line and still have the animation? I tried so many things but I couldn't figure it out:
svg {
width: 100%;
height: auto;
}
.path {
fill: none;
stroke: #...
- 69
0
votes
1
answer
226
views
SVG Framer motion - how to specify direction?
I'm using framer motion to animate an SVG, although I can't control the direction of the animation paths.
Some are left to right some are right to left, how can i control direction?
I tried ...
0
votes
0
answers
43
views
How do I stop a true/false onClick animation from playing on page load
I have a react site with an animated SVG like button. Once the page loads, everything works as it should, i.e. the liked icon animates back and forth onClick. However, when loading the page, all of ...
- 11
1
vote
0
answers
78
views
How to animate this "infinity" svg path to fade in using gsap or any similar animation tool/library that will work in react.js?
Here is the infinity svg path that I am referring to:
<svg xmlns="http://www.w3.org/2000/svg">
<path d="M367.5 0.5C434.971 0.5 490 55.529 490 123C490 190.539 435.039 245.5 ...
- 11
1
vote
1
answer
68
views
SVG CSS Animation issue
I am trying to recreate this gif animation, but on a SVG. The SVG is the same icon as the gif. I am unsure how it's done with CSS.
This is the gif
svg {
width: 200px;
}
svg [data-name="right-...
- 59
1
vote
0
answers
79
views
Why does Framer Motion Animation does not work in Next.js
I 'm trying to rotate a part of a SVG using framer motion library i my Next.js project.(https://www.framer.com/motion/). But it doesn't animate in that project. I created a react project and and ...
