Usage - Properties

Since SleekMotion is based on GSAP, it supports all properties that GSAP does. Below are some common properties that you'll most likely use when animating an element.

CSS

Any CSS property can be animated, however, keep in mind that camelCase has to be used for all CSS values. For example, to animate the background-color property, you would use backgroundColor instead.

            <div class="animate-to:backgroundColor-red"></div>
  
                    

                Copy
                
                                 
            
            

Duration

The duration of an animation can be set using the duration attribute. The value is in seconds.

            <div class="animate-to:backgroundColor-red duration:5"></div>
  
                    

                Copy
                
                                 
            
            

Ease

The ease of an animation can be set using the ease attribute. The value is a string that represents the ease type.

            <div class="animate-to:backgroundColor-red ease:power3.inOut"></div>
  
                    

                Copy
                
                                 
            
            

For a list of all available ease types, see the GSAP documentation.