https://github.com/ppmpreetham/gsap-animations

Cool GSAP animations that I use
https://github.com/ppmpreetham/gsap-animations

gsap gsap-plugin gsap3

Last synced: about 1 year ago
JSON representation

Cool GSAP animations that I use

• Host: GitHub
• URL: https://github.com/ppmpreetham/gsap-animations
• Owner: ppmpreetham
• Created: 2024-06-02T10:40:17.000Z (about 2 years ago)
• Default Branch: main
• Last Pushed: 2024-06-06T06:10:00.000Z (about 2 years ago)
• Last Synced: 2025-02-01T15:46:03.492Z (over 1 year ago)
• Topics: gsap, gsap-plugin, gsap3
• Language: JavaScript
• Homepage:
• Size: 1.44 MB
• Stars: 1
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

          
# GSAP Animations

Cool GSAP animations that I use

## Center Fall down

Makes the center element fall down first, then the rest of the elements fall down in a staggered manner

Works with a Stagger of elements

![Center Fall down](src/videos/center_fall_down.gif)

### Code

```javascript

gsap.to(".stagger-box", {

    y:25,

    duration:1,

    stagger:0.5,

    ease:"bounce.out",

    stagger: {

        ease: "back.out",

      amount: 1,

      from: "center",

    }

});

```

## Center Float

Makes the center element float up first, then the rest of the elements float too.

Works with a Stagger of elements

Could be implemented when selection

![Center Fall down](src/videos/center_float.gif)

### Code

```javascript

gsap.to(".stagger-box", {

    y:-25,

    duration:1,

    stagger:0.5,

    ease:"back.out",

    repeat: -1,

    yoyo: true,

    stagger: {

      ease: "back.out",

      amount: 1,

      from: "center",

    }

});

```