https://www.daniel-moquet.fr/dist/js/index.js

1function gsapTimelines() {
2  gsap.timeline({
3    scrollTrigger: {
4      trigger: ".hero",
5      start: "top 65%",
6      end: "bottom top"
7    },
8    defaults: {
9      opacity: 0,
10      ease: "power3.out"
11    }
12  }).from(".hero", {
13    ease: "linear",
14    autoAlpha: 0,
15    y: 60,
16    duration: .4
17  }).from(".hero__domaine", {
18    opacity: 0,
19    y: 100,
20    duration: .8,
21    stagger: {
22      each: 0.4,
23      onComplete: function() {
24        const vdoToPlay = this.targets()[0].querySelector('[data-interact="vdotoplay"]');
25        if (!vdoToPlay) return;
26
27        if (vdoToPlay._lottieInstance) {
28          vdoToPlay._lottieInstance.play();
29        } else {
30          // Fallback si l'instance pas encore prête
31          vdoToPlay.addEventListener('lottie:ready', () => {
32            vdoToPlay._lottieInstance.play();
33          }, { once: true });
34        }
35      }
36    }
37  }, ">-.3");
38  // catalogue
39  gsap.timeline({
40    scrollTrigger: {
41      trigger: ".l-accueil__catalogue",
42      start: "top 65%",
43      end: "bottom top"
44    },
45    defaults: {
46      opacity: 0,
47      ease: "power3.out"
48    }
49  });
50  // détail domaines
51  gsap.utils.toArray(".detailDomaine").forEach(((e, a) => {
52    gsap.timeline({
53      scrollTrigger: {
54        trigger: e,
55        start: "top 50%",
56        end: "bottom top"
57      },
58      defaults: {
59        opacity: 0,
60        ease: "power3.out"
61      }
62    }).from(e, {
63      autoAlpha: 0,
64      duration: 0
65    }, 0).from(e.querySelector(".detailDomaine__titre__mask__appear"), {
66      scale: 3,
67      y: 20,
68      rotate: 45,
69      duration: 1
70    }, "<").from(e.querySelector(".main__cover"), {
71      y: -100,
72      duration: 1.4
73    }, ">-1.0").from(e.querySelectorAll(".main__cover img"), {
74      scale: 1.4,
75      stagger: .4,
76      duration: 1.2
77    }, "<").from(e.querySelectorAll(".main__details > *"), {
78      y: 100,
79      duration: .6,
80      stagger: .2
81    }, "<+0.8").from(e.querySelectorAll(".main__details img"), {
82      scale: 1.4,
83      stagger: .4,
84      duration: 1.2
85    }, "<")
86  }))
87
88  let poTrigger = document.querySelector('.portes-ouvertes')
89  let jaTrigger = document.querySelector('.portes-ouvertes--ja')
90
91  let tlpo = gsap.timeline({
92    scrollTrigger: {
93      trigger: poTrigger,
94      start: "top 50%",
95      end: "bottom top"
96    },
97    defaults: {opacity: 0, ease: "power3.out"}
98  });
99
100  if (document.querySelector('.portes-ouvertes__titre')) {
101    tlpo.from(poTrigger, {autoAlpha: 0, duration: 0.6}, 0)
102      .from(poTrigger.querySelector('.portes-ouvertes__titre .gfx__dots'), {x: -40, duration: 0.6}, ">")
103      .from(poTrigger.querySelector('.portes-ouvertes__titre .portes-ouvertes__portes__texte'), {
104        y: 40,
105        duration: 1.2
106      }, ">-0.6")
107      .from(poTrigger.querySelector('.portes-ouvertes__titre .portes-ouvertes__ouvertes'), {
108        y: -40,
109        duration: 1.2
110      }, ">-1.05")
111      .from(poTrigger.querySelector('.portes-ouvertes__dates'), {x: -30, duration: 0.8}, ">-0.6")
112      .from(poTrigger.querySelectorAll('.portes-ouvertes__domaines > a'), {
113        x: -80,
114        rotate: -5,
115        stagger: 0.1,
116        duration: 0.8
117      }, ">-0.7")
118      .from(poTrigger.querySelector('.portes-ouvertes__accroche'), {y: -10, duration: 0.6}, ">-0.6")
119
120    if(jaTrigger){
121      tlpo.from(poTrigger.querySelector('.portes-ouvertes--ja__cta'), {y: -10, duration: 0.6}, ">-0.3")
122    }
123  }
124
125  const triggersEntreprise = document.querySelectorAll('.js__search-entreprise')
126
127  triggersEntreprise.forEach(te => {
128    te.addEventListener('click', e => {
129      e.preventDefault()
130      const formEntreprise = document.querySelector('.recherche-entreprise')
131      const yFormEntreprise = formEntreprise.getBoundingClientRect().top;
132      window.scrollTo({
133        top: yFormEntreprise + document.documentElement.scrollTop,
134        behavior: 'smooth',
135      })
136    })
137  })
138
139  // Quiz
140  const imgQuiz = Array.from(document.querySelectorAll('[data-gsap="quizVisual"]'))
141  const tlQuizIndex = gsap.timeline({
142    defaults: {
143      opacity: 0,
144      repeat: 0
145    }
146  })
147  const fadeDuration = 3;
148
149  tlQuizIndex
150    .to(imgQuiz[0], {opacity: 0, duration: fadeDuration})
151    .to(imgQuiz[1], {opacity: 1, duration: fadeDuration}, `>-${fadeDuration}`)
152    .to(imgQuiz[1], {opacity: 0, duration: fadeDuration})
153    .to(imgQuiz[2], {opacity: 1, duration: fadeDuration}, `>-${fadeDuration}`)
154    .to(imgQuiz[2], {opacity: 0, duration: fadeDuration})
155    .to(imgQuiz[3], {opacity: 1, duration: fadeDuration}, `>-${fadeDuration}`)
156    .to(imgQuiz[3], {opacity: 0, duration: fadeDuration})
157    .to(imgQuiz[0], {opacity: 1, onComplete: () => tlQuizIndex.restart(), duration: fadeDuration}, `>-${fadeDuration}`, )
158}
159function initLottieIcons() {
160  document.querySelectorAll('[data-interact="vdotoplay"]').forEach(el => {
161    const instance = lottie.loadAnimation({
162      container: el,
163      renderer: 'svg',
164      loop: true,
165      autoplay: false,
166      path: el.dataset.lottieSrc
167    });

168    el._lottieInstance = instance;
169  });
170}
171function initHome() {
172  initMenu();
173  initLottieIcons();
174  gsapTimelines();
175}
176
177(document.readyState === "loading")?
178  document.addEventListener("DOMContentLoaded", initHome):
179  initHome();