What are some cool GSAP animation examples?

What are some cool GSAP animation examples?

GSAP (GreenSock Animation Platform) is great for creating high-performance animations. Some cool examples include:

1. Smooth scrolling effects
2. Image galleries with transitions
3. Interactive infographics
4. Animated SVGs
5. Parallax scrolling effects Would you like to see a specific example?

Can you show me an example of a smooth scrolling effect?

Sure! A smooth scrolling effect can be achieved using GSAP's ScrollTrigger plugin. Here's a simple example:

gsap.registerPlugin(ScrollTrigger);

gsap.to('.section', { 
  scrollTrigger: { 
    trigger: '.section', 
    start: 'top top', 
    end: 'bottom top', 
    scrub: true 
  }, 
  y: '-100%', 
});

This code will create a smooth scrolling effect as you scroll through the sections of your webpage.

What about animated SVGs?

Animated SVGs can be created easily with GSAP. For example, you can animate the stroke of an SVG path:

gsap.fromTo('#myPath', { strokeDasharray: 1000, strokeDashoffset: 1000 }, { 
  strokeDashoffset: 0, 
  duration: 2 
});

This will create a drawing effect on the SVG path. Would you like more details on this?