Animatable properties
Currently, you can animate the opacity, X and/or Y positions, scale the object along the X and/or Y axis, skew the object along the X and/or Y axis, and rotate the object.
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. The expression may also include the arrow function.
Expressions explained
Expressions are used to dynamically calculate values for properties during animations. Think of them as dynamic instructions that determine how an element should move, based on the scroll position.
When using expressions, you can reference the current element with the object keyword.
Types of Expression
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.
EXAMPLE
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 200%. These 200% actually represent the 2x element’s width!
Add the “Expo.inOut” easing as well.
Reverse the animation when scrolling back.
Find the complete setup for the above animation below!
