Skip to content
Submitted about 2 years ago

React, Framer-motion

Anthony Mbeka•370
@mbeka02
Preview site (opens in new tab)View code (opens in new tab)
This is a solution for...Rock, Paper, Scissors game
  • HTML
  • CSS
  • JS
4advanced

Design comparison

SolutionDesign

Solution retrospective

How do I make multiple ripple effects appear at the same time instead of just one.

Community feedback

  • Bruno dos Santos•130
    @BrunoYottabytePosted about 2 years ago

    Hello @mbeka02, for this purpose I used 3 divs inside the circle, and created a @keyframe pulse where the animation started with opacity 0.2 and scale 1 and goes to opacity 0 and scale 2.5.

    For the second and third div I applied a delay on the animation.

    Take a look at the result: https://rocker-paper-scissors.vercel.app/

    I'm Brazilian, ignore the confusing language. Hugs!

    Marked as helpful
    1

Please log in to post a comment

Log in with GitHub

Join our Discord community

Join thousands of Frontend Mentor community members taking the challenges, sharing resources, helping each other, and chatting about all things front-end!

Join our Discord