// Wait for Webflow to initialize
document.addEventListener('DOMContentLoaded', function() {
// Register ScrollTrigger plugin
gsap.registerPlugin(ScrollTrigger);
// Utility function to check if we're in the Webflow editor
const isWebflowEditor = () => {
return window.Webflow && window.Webflow.env('editor');
};
// Only run animations if we're not in the editor
if (!isWebflowEditor()) {
// Fade in elements with class 'fade-in' as they scroll into view
gsap.utils.toArray('.fade-in').forEach(element => {
gsap.from(element, {
scrollTrigger: {
trigger: element,
start: 'top 80%',
toggleActions: 'play none none reverse'
},
opacity: 0,
y: 30,
duration: 1,
ease: 'power2.out'
});
});
// Slide in elements from left with class 'slide-left'
gsap.utils.toArray('.slide-left').forEach(element => {
gsap.from(element, {
scrollTrigger: {
trigger: element,
start: 'top 75%',
toggleActions: 'play none none reverse'
},
opacity: 0,
x: -50,
duration: 1,
ease: 'power2.out'
});
});
// Slide in elements from right with class 'slide-right'
gsap.utils.toArray('.slide-right').forEach(element => {
gsap.from(element, {
scrollTrigger: {
trigger: element,
start: 'top 75%',
toggleActions: 'play none none reverse'
},
opacity: 0,
x: 50,
duration: 1,
ease: 'power2.out'
});
});
// Scale up elements with class 'scale-up'
gsap.utils.toArray('.scale-up').forEach(element => {
gsap.from(element, {
scrollTrigger: {
trigger: element,
start: 'top 80%',
toggleActions: 'play none none reverse'
},
opacity: 0,
scale: 0.5,
duration: 1,
ease: 'back.out(1.7)'
});
});
// Stagger animation for lists with class 'stagger-list'
gsap.utils.toArray('.stagger-list').forEach(list => {
const items = list.children;
gsap.from(items, {
scrollTrigger: {
trigger: list,
start: 'top 80%',
toggleActions: 'play none none reverse'
},
opacity: 0,
y: 20,
duration: 0.8,
stagger: 0.2,
ease: 'power2.out'
});
});
// Hero section animation (add class 'hero-section' to your hero container)
const heroSection = document.querySelector('.hero-section');
if (heroSection) {
const heroTimeline = gsap.timeline({ defaults: { ease: 'power2.out' }});
heroTimeline
.from('.hero-title', { opacity: 0, y: 30, duration: 1 })
.from('.hero-subtitle', { opacity: 0, y: 20, duration: 1 }, '-=0.5')
.from('.hero-cta', { opacity: 0, y: 20, duration: 1 }, '-=0.5');
}
}
});