CODEWITHSUNDEEP
reactjswidgetnext.jscss-animationsreact-animations
prashant
prashant

Reputation: 250

How to make widgets in NextJS

I have recently seen the Stripe site and there is a section with a card image that is filling the details automatically and then scrolling to the next tab and again it shows. Refer to this section of the site https://stripe.com/en-in/payments

See this section of above link to stripe site:

enter image description here

I think these are widgets. I am new to animations. Can anyone suggest how to make these and embed in our webpage with Next.js/React.js?

Upvotes: 1

Views: 1427

Answers (2)

prashant
prashant

Reputation: 250

Upon search I got there are many typing effect packages which we can use . I will list of them 1)https://www.npmjs.com/package/react-typing-animation

2)https://www.npmjs.com/package/react-typical

We can use these packages to create the typing effect . Note - If you have multiple places where you have to show this animation then can sync them using your javascript methods.

Another simple way of using can be done by simply inserting a GIF for that animation , if you dont want to mess around the code🙂

Feel free to share if there are other ways to do this .

Upvotes: 1

Andres Campuzano Garzon
Andres Campuzano Garzon

Reputation: 336

Interesting, I'd do it simulating an auto text (https://youtu.be/t7ePHIsKnnI) and then changing the component using setTimeOut or UseEffect

Upvotes: 0

Related Questions