1. **Scroll Progress Indicator**: - A progress bar at the top of the page that indicates the scroll progress. - Uses `ScrollTrigger` to update the width of the progress bar based on the scroll position.
Scroll to see GSAP ScrollTrigger in action.
2. **Pin Example**: - Pins an element (image) in place while the rest of the content scrolls. - The image stays fixed in the viewport while scrolling past it.
Velocity-based Skew
4. **Velocity-based Skew**: - Applies a skew effect to elements based on the scroll velocity. - The skew angle changes dynamically with the scrolling speed.
Parallax Effect
5. **Parallax Effect**:
- Creates a parallax scrolling effect where elements move at different speeds relative to the scroll speed.
- The text in the parallax section moves slower than the scroll speed.
6. **Image Reveal**: - Images are revealed as they scroll into view. - The images slide up from the bottom as the user scrolls.
Advanced Example
7. **Advanced Example**: - An advanced example demonstrating more complex scroll-triggered animations. - Text moves horizontally and fades into view.
This text will animate into view.
8. **Text Animation**: - Text elements animate into view as the user scrolls. - The text moves up and fades in as it enters the viewport.
Scroll-triggered Background Color Change
9. **Color Change**: - The background color of a section changes as it enters the viewport. - Uses `ScrollTrigger` to animate the background color.
10. **SVG Animation**: - Animates an SVG element based on the scroll position. - A circle's stroke dash array is animated to create a drawing effect.