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?