Alain Afflelou Design System

Image 

<picture x-data="imageAnimation( true )" class=" overflow-hidden">
    <source srcset="../../img/newletter-img.jpeg" media="(min-width: 640px)" />
    <img x-ref="image" src="../../img/newletter-img.jpeg" alt="Description de l'image" class="object-cover w-full h-full" loading="lazy" />
</picture>

<script>
    function imageAnimation(enableGsap = false) {
        return {
            enableGsap: enableGsap,
            init() {
                if (this.enableGsap) {
                    this.initGsap();
                }
            },
            initGsap() {
                gsap.registerPlugin(ScrollTrigger);
                const image = this.$refs.image;
                const container = document.querySelector('.container');
                if (image) {
                    const containerWidth = container.offsetWidth;
                    gsap.fromTo(
                        image, {
                            width: "100vw"
                        }, {
                            width: (containerWidth - 32),
                            marginLeft: "16px",
                            marginRight: "16px",
                            ease: "power1.out",
                            "border-radius": "8px",
                            scrollTrigger: {
                                trigger: image,
                                start: 'top-=450 top',
                                end: "top-=200 top",
                                scrub: true,
                                once: true,
                                // markers: true, // Pour debug, à retirer en production
                            }
                        }
                    );
                } else {
                    console.error("L'élément image n'a pas été trouvé dans le DOM.");
                }
            }
        };
    }
</script>
 
<picture
        x-data="imageAnimation( {{ enableGsap ? 'true' : 'false' }} )"
        class="{{ imageClass }} overflow-hidden"
>
    <source srcset="{{ src | path }}" media="(min-width: 640px)"/>
    <img x-ref="image" src="{{ srcMobile | path }}" alt="{{ alt }}" class="object-cover w-full h-full" loading="lazy"/>
</picture>

<script>
	function imageAnimation(enableGsap = false) {
		return {
			enableGsap: enableGsap,
			init() {
				if (this.enableGsap) {
					this.initGsap();
				}
			},

			initGsap() {
				gsap.registerPlugin(ScrollTrigger);

				const image = this.$refs.image;
				const container = document.querySelector('.container');

				if (image) {
					const containerWidth = container.offsetWidth;
					gsap.fromTo(
						image,
						{width: "100vw"},
						{
							width: (containerWidth - 32),
							marginLeft: "16px",
							marginRight: "16px",
							ease: "power1.out",
							"border-radius": "8px",
							scrollTrigger: {
								trigger: image,
								start: 'top-=450 top',
								end: "top-=200 top",
								scrub: true,
								once: true,
								// markers: true, // Pour debug, à retirer en production
							}
						}
					);
				} else {
					console.error("L'élément image n'a pas été trouvé dans le DOM.");
				}
			}
		};
	}
</script>
 
{
  "srcMobile": "/img/newletter-img.jpeg",
  "src": "/img/newletter-img.jpeg",
  "alt": "Description de l'image",
  "enableGsap": true
}

No notes defined.