<style>
.fade-element {
    opacity: 0;
}
</style>

<img src="https://placehold.co/600x400/EEE/31343C" class="fade-element">

<script>
gsap.fromTo(".fade-element", 
    { opacity: 0 },  // Caché au départ
    { 
        opacity: 1,    // Devient visible
        duration: 1.5,
        scrollTrigger: {
            trigger: ".fade-element",
            start: "bottom 50%",  // Commence l'animation quand l'élément entre dans la vue
            end: "top 20%",       // Termine l'animation quand il sort de la vue
            toggleActions: "play reverse play reverse", // Apparition et disparition
            scrub: 0.5,           // Animation fluide selon le scroll
        }
    }
);
</script>