NextJs Animated Lovely Cards
Answered
West African Lion posted this in #help-forum
West African LionOP
Greetings! I am a front-end developer. I LOVE NextJs animated cards. Specifically the central one. I would like to now how the animation was implemented (such as what library, if any, was used) Where should I ask this? Thanks in advance.
Answered by B33fb0n3
it looks like nextjs is using just a path animation. So they created the path once and just animate this path now (see attached). For that you need to somehow create the svg and you somehow need to animate the path:
- Create the svg -> do it yourself, download one, let other people do it
- Animate the svg -> For my animations I like to use framer motion. One example for a path animation is this: https://codesandbox.io/p/sandbox/paths-rutrh?module=%2Fsrc%2FExample.tsx
- Create the svg -> do it yourself, download one, let other people do it
- Animate the svg -> For my animations I like to use framer motion. One example for a path animation is this: https://codesandbox.io/p/sandbox/paths-rutrh?module=%2Fsrc%2FExample.tsx
3 Replies
@West African Lion Greetings! I am a front-end developer. I LOVE NextJs animated cards. Specifically the central one. I would like to now how the animation was implemented (such as what library, if any, was used) Where should I ask this? Thanks in advance.
it looks like nextjs is using just a path animation. So they created the path once and just animate this path now (see attached). For that you need to somehow create the svg and you somehow need to animate the path:
- Create the svg -> do it yourself, download one, let other people do it
- Animate the svg -> For my animations I like to use framer motion. One example for a path animation is this: https://codesandbox.io/p/sandbox/paths-rutrh?module=%2Fsrc%2FExample.tsx
- Create the svg -> do it yourself, download one, let other people do it
- Animate the svg -> For my animations I like to use framer motion. One example for a path animation is this: https://codesandbox.io/p/sandbox/paths-rutrh?module=%2Fsrc%2FExample.tsx
Answer
West African LionOP
@B33fb0n3 Thanks so much! I just forked the code sample. 🙂 👍🏻
happy to help