1

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?

Zsolt Meszaros
  • 21,961
  • 19
  • 54
  • 57
prashant
  • 210
  • 2
  • 11

2 Answers2

1

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 .

prashant
  • 210
  • 2
  • 11
0

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

Andres Campuzano Garzon
  • 240
  • 2
  • 5
  • that will remove the problem or auto-typing infinitely but what about clicking automatically and hovering and displaying the list automatically seems like a video but not a video @andresCampuzanoGarzon – prashant Jan 13 '21 at 05:04
  • You catch me with it, I suggest to make a gift (not a video) and it won't make it harder to develop. greetings – Andres Campuzano Garzon Jan 15 '21 at 00:15
  • I found some library in react like react-typing-animations but getting problems in implementing that. I am giving a start delay to successive sections but on finish how to reset them . They will again take the time delay and it will go smooth for 2-3 iterations but then next 3-4 animations are rough and then smooth and continues . Any idea to improve it @andres – prashant Jan 24 '21 at 00:56