Support animation classes

[ameerthehacker]

Right now we are not supporting animation classes from tailwind, if we can get this through we would be a step more closer for react native support.

[jyash97]

Adding my thoughts on different approaches:

Adding simple animation class support like:

Usage

.animate-spin 

Generated

animation: spin 1s linear infinite; 
 @keyframes spin {   
    from {     
       transform: rotate(0deg);  
    }  to {     
       transform: rotate(360deg);   
   } 
}

In the CSS generator, we could add the respective keyframes and animation property to be added in styled-components. One problem that I think is we may add the keyframes multiple times if used in different components.

For Custom animation support -> We may just need to read the theme config and update the string.

---

Another approach could be:

Defining animation keyframes in styled-components and exporting them through lib. For eg:

export const spin = styled.keyframes`
  from {
    transform: rotate(0deg);
  }

  to {
    transform: rotate(360deg);
  }
`;


// Usage:

import {spin} from 'styled-wind/animations'
styled.div`
  animation: ${spin} 1s;
`

The benefit is the user gets more control over different properties.

[devevignesh]

Hey @jyash97, RN doesn't support keyframes. Instead, we supposed to use RN Animated API. From my understanding, we shouldn't directly import styled-wind animation class it may throw an error. Please correct me if I'm wrong.

[ameerthehacker]

@devevignesh you are right, react native not supporting key frames is a huge road block, we need to find a work around for that. If that is not possible the last resort is that we can continue to generate keyframes in react native also and styled-components will warn the developer that keyframes are not supported in react native https://styled-components.com/docs/basics#react-native

[ameerthehacker]

Adding my thoughts on different approaches:

Adding simple animation class support like:

Usage

.animate-spin 

Generated

animation: spin 1s linear infinite; 
 @keyframes spin {   
    from {     
       transform: rotate(0deg);  
    }  to {     
       transform: rotate(360deg);   
   } 
}

In the CSS generator, we could add the respective keyframes and animation property to be added in styled-components. One problem that I think is we may add the keyframes multiple times if used in different components.

For Custom animation support -> We may just need to read the theme config and update the string.

Another approach could be:

Defining animation keyframes in styled-components and exporting them through lib. For eg:

export const spin = styled.keyframes`
  from {
    transform: rotate(0deg);
  }

  to {
    transform: rotate(360deg);
  }
`;


// Usage:

import {spin} from 'styled-wind/animations'
styled.div`
  animation: ${spin} 1s;
`

The benefit is the user gets more control over different properties.

@jyash97 the first approach seems to be more scalable (has more edge cases though). If we use the second case then we may need to define a lot of animation type like spin, bounce etc which is less flexible and hard to maintain.

[sudharsangs]

Hi, @ameerthehacker is this issue still relevant? If so I can try to pick this up