CODEWITHSUNDEEP
reactjsstyled-components
David
David

Reputation: 15

Easing animation using React and Styled Components

Hiii

I am trying to convert this plain CSS (which animates correctly) into React / Styled Components. Here is the CSS.

   .blend {
  height: 300px;
  color: #fff;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  background: -webkit-gradient(linear, right top, left top, from(#da8ebf), color-stop(#f18988), color-stop(#e9b689), color-stop(#bfd978), color-stop(#93d1ea), to(#8d97c8));
  background: linear-gradient(270deg, #da8ebf, #f18988, #e9b689, #bfd978, #93d1ea, #8d97c8);
  background-size: 1200% 1200%;
  -webkit-animation: AnimationName 6s ease infinite;
  animation: AnimationName 6s ease infinite;
}

@-webkit-keyframes AnimationName {
  0% { background-position: 0% 50%; }
  50% { background-position: 100% 50%;}
  100% { background-position: 0% 50%; }
}

@keyframes AnimationName {
  0% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

This is how far I have got with the styled component in React, I think you have to separate out the animation with a new const, can anyone advise?

import styled, { keyframes } from 'styled-components'

export const blend = styled.div`

height: 400px;
  color: #fff;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  background: -webkit-gradient(linear, right top, left top, from(#da8ebf), color-stop(#f18988), color-stop(#e9b689), color-stop(#bfd978), color-stop(#93d1ea), to(#8d97c8));
  background: linear-gradient(270deg, #da8ebf, #f18988, #e9b689, #bfd978, #93d1ea, #8d97c8);
  background-size: 1200% 1200%;

`

export const easeAnimation = keyframes `


`

Upvotes: 0

Views: 774

Answers (2)

David
David

Reputation: 15

I got this to work in the end

import styled, { keyframes } from 'styled-components'

export const AnimationEase = keyframes`
0% { background-position: 0% 50%; }
50% { background-position: 100% 50%; }
100% { background-position: 0% 50%; }
`

export const WebKitAnimationEase = keyframes`
0% { background-position: 0% 50%; }
50% { background-position: 100% 50%; }
100% { background-position: 0% 50%; }
`
   
export const Blend = styled.div`
font-size: 3.8rem;
font-weight: 600;
height: 400px;
  color: #fff;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  background: -webkit-gradient(linear, right top, left top, from(#da8ebf), color-stop(#f18988), color-stop(#e9b689), color-stop(#bfd978), color-stop(#93d1ea), to(#8d97c8));
  background: linear-gradient(270deg, #da8ebf, #f18988, #e9b689, #bfd978, #93d1ea, #8d97c8);
  background-size: 1200% 1200%;
  -webkit-animation: ${WebKitAnimationEase} 6s ease infinite;
  animation: ${AnimationEase} 6s ease infinite;

`

export default Blend

Thanks to @c0dm1tu and @tromgy for your help <3

Upvotes: 1

codmitu
codmitu

Reputation: 709

you can write the animation in the same component and i think its better to write the component with first letter uppercased

import styled from "styled-components"
export const Blend = styled.div`
   height: 300px;
   color: #fff;
   -webkit-box-pack: center;
   -ms-flex-pack: center;
   justify-content: center;
   -webkit-box-align: center;
   -ms-flex-align: center;
   align-items: center;
   display: -webkit-box;
   display: -ms-flexbox;
   display: flex;
   background: -webkit-gradient(linear, right top, left top, from(#da8ebf), color-stop(#f18988), color-stop(#e9b689), color-stop(#bfd978), color-stop(#93d1ea), to(#8d97c8));
   background: linear-gradient(270deg, #da8ebf, #f18988, #e9b689, #bfd978, #93d1ea, #8d97c8);
   background-size: 1200% 1200%;
   -webkit-animation: AnimationName 6s ease infinite;
   animation: AnimationName 6s ease infinite;
 
   @keyframes animationname {
   .....
   }

   @media screen and (max-width: 670px) {
      opacity: 0;
   }

   &::before {
   ....
   }
   
   .child {
   ....
   } 
 `

and here is how you use it

import {Blend} from "..path.."

<Blend>
   <p className="child">some text</p>
</Blend>

or self closed if it doesn't have a child

<Blend/>

Upvotes: 0

Related Questions