gsap-integration-in-webflow/README.md

# GSAP advance integration in webflow

Integrating GSAP with Webflow opens up a world of possibilities for stunning and creative animations. Here's a glimpse into what you can achieve with short and clean code examples:

**1. Basic Scroll-Triggered Animation:**

- Use Webflow's scroll trigger on a div.
- In the "Actions" tab, add a "Run JavaScript" action and paste the following code:

```
JavaScript
// Select element to animate
const element = document.querySelector('.animated-element');

// Define animation using GSAP TimelineLite
const animation = new TimelineLite({ paused: true });
animation.from(element, 1, { opacity: 0, y: 100 });

// Trigger animation on scroll
Webflow.require('ix2').triggerInview(element, () => {
  animation.play();
});
```

**2. Interactive Animations with Mouse Events:**
- Bind GSAP animations to hover or click events on elements using JavaScript.
- This creates dynamic and engaging interactions for your Webflow website.

```
JavaScript
// Select element and button
const element = document.querySelector('.interactive-element');
const button = document.querySelector('.trigger-button');

// Define animation using GSAP Tween
const animation = TweenLite.to(element, 1, { scale: 1.2, ease: Power2.easeInOut });

// Bind animation to button click
button.addEventListener('click', () => {
  animation.play();
});
```

**3. Complex Animations with GSAP Plugins:**
- Utilize GSAP's extensive plugin library to achieve advanced animation effects like scrollMagic, scrollTrigger, and ScrollToPlugin.
- This allows for fine-grained control over animation based on scroll position, viewport size, and other factors.

```
JavaScript
// Include ScrollTrigger plugin
Webflow.require('gsap/ScrollTrigger');

// Define animation with ScrollTrigger plugin
const animation = TweenLite.fromTo(element, 1, { opacity: 0 }, { opacity: 1 }, {
  scrollTrigger: {
    trigger: element,
    start: 'top bottom',
    end: 'bottom top',
  },
});
```
# Need Help?
Want to build a [custom webflow page](https://epyc.in/)?