import './styles/pages/_actualite.scss';
import gsap from 'gsap';
import { ScrollTrigger } from 'gsap/ScrollTrigger';

document.addEventListener('DOMContentLoaded', () => {
    const bg = document.querySelector<HTMLElement>('[data-actualite-bg="true"]');

    if (!bg) {
        return; // Not on the Actualité page.
    }

    gsap.registerPlugin(ScrollTrigger);

    // Color reaches its final tone ($color-primary-light) and the mask rises
    // into place (y: 0) once the user has scrolled through the full document.
    gsap.fromTo(bg,
        { y: 0 },
        {
            y: 250,
            // backgroundColor: '#f9f2eb',
            ease: 'none',
            scrollTrigger: {
                trigger: document.body,
                start: 'top top',
                end: 'bottom bottom',
                scrub: true,
            },
        }
    );
});