Layout & design

Use quick effects to add prebuilt entrance, exit, and emphasis animations to introduce basic motion and interactions to your project.

Use parallax motion based on your scroll position to give the appearance of depth.

Override the browser’s default cursor for an element by changing the cursor value.

Use opacity to change the transparency level of elements to create unique visual effects.

Learn about interpolation (creating motion between points), easing (for non-linear animation), and smoothing (creating a damping effect).

Enter and update numeric values, and use different units in numeric input fields.

Set up a page scroll animation for a continuous animation that moves and fades elements horizontally on scroll.

Design reusable, responsive grid layouts with grid areas.

Use flexbox for precise alignment and stacking control when designing layouts.

Create a hover effect by scaling along the z-axis for an explosive, attention-grabbing transition.