Animatable properties

Currently, you can animate the opacity, X and/or Y positions, width/height, scale the object along the X and/or Y axis, skew the object along the X and/or Y axis, rotate the object change the background color, and change text color.

Each animatable property allows you to set the From and To positions. These represent the starting and ending positions, respectively.

You can use any valid CSS unit at the end of the value for both the From and To positions. Units can be different for each of them, and it will not make any difference.

The X and Y properties are a little bit different from all the other ones because they accept expressions as input values (see below). The expression may also include the arrow function.

Let’s consider/compare 2 almost identical expressions which are used to animate the object from its starting position (0) to the right-hand side edge of the viewport (excluding the sidebar width).

• () => window.innerWidth – object.offsetWidth
• () => `${window.innerWidth – object.offsetWidth}px`

Even though they will work similarly in certain contexts, they have different implications.

The first expression returns the numeric value which would be appropriate if you need the actual numerical value for calculations. You could add the CSS unit to the end of the expression but you might end up with an error. The system will try to suppress the error.

The second expression uses a template literal to convert the result into a string. The resulting value will be a string representation of the calculation and you can add the CSS unit to the end – if required.

In summary, use the first expression if you need the numeric value, and use the second expression if you need the value as a string. The choice depends on the context in which you are using the value and how it is interpreted by the GSAP animation.

By words:
Whenever the element’s top hits the viewport’s center, trigger the animation of the element’s X position from the 0 to 500%. These 500% actually represent the 5x element’s width!
Add the “Expo.inOut” easing as well.
Reverse the animation when scrolling back.