CODEWITHSUNDEEP
javascriptcssreactjsecmascript-6styled-components
invrt
invrt

Reputation: 709

styled components play animation onClick

EDIT: this is my lastest attempt

const PathAnimate = styled.polyline(props.active => ({
 fill: transparent;
 stroke: #53bf8b;
 stroke-width: 2;
 stroke-dasharray: 25;
 stroke-dashoffset: 0;
 stroke-linecap: round;
 stroke-linejoin: round;
 animation: ${animate} 350ms cubic-bezier(0, 0, 0.32, -0.13);
}))

I have a Wrapper Component that has my button and an SVG element that I would like to animate when it's clicked.

My button animating just fine, but I'm unsure on how to do it for my SVG

<Wrapper active={questionChoice.id === id}>
            <Button
              type="button"
              key={questionChoice.id}
              onClick={() => {
                const answer = { id: questionChoice.id, value: questionChoice.value }
                updateCurrent(answer)
                submitAnswer()
              }}
            >
              {questionChoice.text}
            </Button>
            <div className="svg-wrapper">
              <svg className="svg" version="1.1" id="tick" viewBox="6 5 26 26">
                <polyline
                  className="path"
                  points="
          11.6,20 15.9,24.2 26.4,13.8 "
                />
              </svg>
            </div>
          </Wrapper>

Here is the CSS

const Wrapper = styled.div`
  .svg-wrapper {
    margin-left: 1rem;
    width: 25px;
    height: 25px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }
  .svg {
    width: 20px;
  }
  .path {
    fill: transparent;
    stroke: #53bf8b;
    stroke-width: 2;
    stroke-dasharray: 25;
    stroke-dashoffset: 0;
    stroke-linecap: round;
    stroke-linejoin: round;
    animation: ${animate} 1s cubic-bezier(0, 0, 0.32, -0.13);
    /* animation: ${props =>
      props.active ? '${animate} 1s cubic-bezier(0, 0, 0.32, -0.13)' : 'none'}; */
  }
  ${Button} {
    background-color: ${props => (props.active ? '#C4E8C5' : 'white')};
    opacity: ${props => (props.active ? 1 : 0.45)};
    transition: background 250ms ease-in-out, transform 150ms ease;
    &:hover {
      opacity: 1;
      border-color: #c4e8c5;
      border-width: 2px;
      transform: scale(1.15);
    }
  }

Right now the animation is playing on page load, but I would like it to work the same way Button does (based on props.active).

Upvotes: 1

Views: 514

Answers (1)

ibex
ibex

Reputation: 1113

What you do normally to animate a simple line SVG is to set the stroke-dasharray and adjust the stroke-dashoffset to offset it. Apply transition to stroke-dashoffset like transition: stroke-dashoffset 250ms ease-in-out. Start off with stroke-dashoffset: 20 and on button active state, set it to stroke-dashoffset: 0

Upvotes: 1

Related Questions