refactoring
This commit is contained in:
@@ -35,7 +35,7 @@ gsap.registerPlugin(ScrollTrigger, ScrollSmoother);
|
||||
console.log('drupalSettings', drupalSettings)
|
||||
|
||||
// liste forme file names
|
||||
const formesclasses = [
|
||||
const _formesclasses = [
|
||||
'pyramide',
|
||||
'prct',
|
||||
'infinite',
|
||||
@@ -48,9 +48,9 @@ gsap.registerPlugin(ScrollTrigger, ScrollSmoother);
|
||||
'cylindre'
|
||||
]
|
||||
|
||||
let sizes = [];
|
||||
// let _sizes = [];
|
||||
|
||||
let cardsForms = [];
|
||||
let _cardsForms = [];
|
||||
|
||||
// ___ _ _
|
||||
// |_ _|_ _ (_) |_
|
||||
@@ -95,7 +95,7 @@ gsap.registerPlugin(ScrollTrigger, ScrollSmoother);
|
||||
}
|
||||
|
||||
function onWindowResize() {
|
||||
cardsForms.forEach(({card, forme, formepos}) => {
|
||||
_cardsForms.forEach(({card, forme, formepos}) => {
|
||||
// console.log(`card`, card, 'forme', forme, 'formepos', formepos);
|
||||
forme.style.top = `${card.offsetTop + formepos.top}px`;
|
||||
forme.style.left = `${card.offsetLeft + formepos.left}px`;
|
||||
@@ -106,13 +106,13 @@ gsap.registerPlugin(ScrollTrigger, ScrollSmoother);
|
||||
const container = document.querySelector('main[role="main"] > .layout-content > .wrapper');
|
||||
// console.log('container', container);
|
||||
|
||||
// listes all available sizes
|
||||
// listes all available _sizes
|
||||
// let min = 150;
|
||||
// let increment = Math.round((350 / (formesclasses.length -1)));
|
||||
// for (let i = 0; i < formesclasses.length; i++) {
|
||||
// sizes.push( min + increment * i)
|
||||
// let increment = Math.round((350 / (_formesclasses.length -1)));
|
||||
// for (let i = 0; i < _formesclasses.length; i++) {
|
||||
// _sizes.push( min + increment * i)
|
||||
// }
|
||||
// console.log('sizes', sizes);
|
||||
// console.log('_sizes', _sizes);
|
||||
|
||||
let cards = document.querySelectorAll('article[role="home-presentation"], .field-card, .node-type-chapitre, .node-type-partie');
|
||||
// console.log('cards', cards);
|
||||
@@ -126,112 +126,30 @@ gsap.registerPlugin(ScrollTrigger, ScrollSmoother);
|
||||
|
||||
// random forme
|
||||
// avoid duplicated formes
|
||||
let n = Math.round(Math.random() * (formesclasses.length -1));
|
||||
let n = Math.round(Math.random() * (_formesclasses.length -1));
|
||||
while (used_n.includes(n)) {
|
||||
n = Math.round(Math.random() * (formesclasses.length -1));
|
||||
n = Math.round(Math.random() * (_formesclasses.length -1));
|
||||
}
|
||||
used_n.push(n);
|
||||
// console.log('n',n, 'class', formesclasses[n]);
|
||||
// console.log('n',n, 'class', _formesclasses[n]);
|
||||
|
||||
let forme = await createForme(card, n);
|
||||
|
||||
container.prepend(forme);
|
||||
|
||||
// register forme
|
||||
cardFormObject.forme = forme;
|
||||
|
||||
// register relative position of forme against card
|
||||
cardFormObject.formepos = {
|
||||
left: forme.offsetLeft - card.offsetLeft,
|
||||
top: forme.offsetTop - card.offsetTop
|
||||
}
|
||||
|
||||
// register cards and formes
|
||||
cardsForms.push(cardFormObject);
|
||||
// console.log('cardsForms', cardsForms);
|
||||
_cardsForms.push(cardFormObject);
|
||||
// console.log('_cardsForms', _cardsForms);
|
||||
|
||||
|
||||
// Snap au centre de la fenêtre pour la card en utilisant le plugin Snap de GSAP
|
||||
// ScrollTrigger.create({
|
||||
// trigger: document.querySelector('.partie-principes-pratique'),
|
||||
// start: "top 60%",
|
||||
// end: "bottom 40%",
|
||||
// snap: {
|
||||
// snapTo: "top", // Snap au centre de la fenêtre
|
||||
// duration: {min: 0.2, max: 0.5}, // Durée de l'animation de snap
|
||||
// delay: 0, // Pas de délai
|
||||
// ease: "power3.out" // Type d'easing pour l'animation
|
||||
// }
|
||||
// });
|
||||
// Animation des cards au scroll
|
||||
gsap.timeline({
|
||||
scrollTrigger: {
|
||||
trigger: card,
|
||||
start: "top bottom",
|
||||
end: "bottom top",
|
||||
scrub: true,
|
||||
ease: "power4.out",
|
||||
snap: false,
|
||||
// markers: true,
|
||||
// onToggle: (self) => {
|
||||
// console.log('card scroll toggled, self:', self)
|
||||
// },
|
||||
}
|
||||
})
|
||||
// cards opacity
|
||||
.from(card.children, {
|
||||
opacity: 0.4,
|
||||
}, 0)
|
||||
.to(card.children, {
|
||||
opacity: 1,
|
||||
}, 0.5)
|
||||
.to(card.children, {
|
||||
opacity: 0.4,
|
||||
}, 0.7)
|
||||
// cards mvmt
|
||||
.from(card, {
|
||||
translateX: `${200 * oddeven}px`,
|
||||
translateY: `${100 * oddeven}px`
|
||||
}, 0)
|
||||
.to(card, {
|
||||
translateX: "0",
|
||||
translateY: "0"
|
||||
}, 0.5);
|
||||
// .to(card, {
|
||||
// translateX: `${200 * oddeven}px`,
|
||||
// }, 0.9);
|
||||
|
||||
|
||||
// Animation des formes continue de rotation + skew pendant tout le scroll
|
||||
gsap.to(forme.querySelector('svg'), {
|
||||
scrollTrigger: {
|
||||
trigger: forme,
|
||||
start: "top bottom",
|
||||
end: "bottom top",
|
||||
scrub: true,
|
||||
ease: "power4.out"
|
||||
},
|
||||
rotation: Math.random() > 0.5 ? 45 : -45,
|
||||
skewX: Math.random() > 0.5 ? 10 : -10
|
||||
});
|
||||
|
||||
// Animation de couleur des formes uniquement au centre de l'écran
|
||||
gsap.timeline({
|
||||
scrollTrigger: {
|
||||
trigger: card,
|
||||
start: "top center", // Commence quand le haut de l'élément atteint le centre
|
||||
end: "bottom center", // Termine quand le bas de l'élément passe le centre
|
||||
scrub: true,
|
||||
markers: false // Désactivez les marqueurs en production
|
||||
}
|
||||
})
|
||||
.to(forme.querySelector('svg'), {
|
||||
stroke: "#f661e2", // Passage au rose
|
||||
duration: 0.1
|
||||
}, 0.3) // Au milieu de la timeline (centre de l'écran)
|
||||
.to(forme.querySelector('svg'), {
|
||||
stroke: "#1642bc", // Retour au bleu
|
||||
duration: 0.1
|
||||
}, 0.7); // Juste après le centre
|
||||
// create GSAP animations
|
||||
createGsapAnims(card, forme, oddeven);
|
||||
|
||||
// inverse oddeven
|
||||
oddeven*=-1;
|
||||
@@ -241,16 +159,102 @@ gsap.registerPlugin(ScrollTrigger, ScrollSmoother);
|
||||
window.addEventListener('resize', onWindowResize);
|
||||
}
|
||||
|
||||
function createGsapAnims(card, forme, oddeven){
|
||||
|
||||
// Snap au centre de la fenêtre pour la card en utilisant le plugin Snap de GSAP
|
||||
// ScrollTrigger.create({
|
||||
// trigger: document.querySelector('.partie-principes-pratique'),
|
||||
// start: "top 60%",
|
||||
// end: "bottom 40%",
|
||||
// snap: {
|
||||
// snapTo: "top", // Snap au centre de la fenêtre
|
||||
// duration: {min: 0.2, max: 0.5}, // Durée de l'animation de snap
|
||||
// delay: 0, // Pas de délai
|
||||
// ease: "power3.out" // Type d'easing pour l'animation
|
||||
// }
|
||||
// });
|
||||
// Animation des cards au scroll
|
||||
gsap.timeline({
|
||||
scrollTrigger: {
|
||||
trigger: card,
|
||||
start: "top bottom",
|
||||
end: "bottom top",
|
||||
scrub: true,
|
||||
ease: "power4.out",
|
||||
snap: false,
|
||||
// markers: true,
|
||||
// onToggle: (self) => {
|
||||
// console.log('card scroll toggled, self:', self)
|
||||
// },
|
||||
}
|
||||
})
|
||||
// cards opacity
|
||||
.from(card.children, {
|
||||
opacity: 0.4,
|
||||
}, 0)
|
||||
.to(card.children, {
|
||||
opacity: 1,
|
||||
}, 0.5)
|
||||
.to(card.children, {
|
||||
opacity: 0.4,
|
||||
}, 0.7)
|
||||
// cards mvmt
|
||||
.from(card, {
|
||||
translateX: `${200 * oddeven}px`,
|
||||
translateY: `${100 * oddeven}px`
|
||||
}, 0)
|
||||
.to(card, {
|
||||
translateX: "0",
|
||||
translateY: "0"
|
||||
}, 0.5);
|
||||
// .to(card, {
|
||||
// translateX: `${200 * oddeven}px`,
|
||||
// }, 0.9);
|
||||
|
||||
|
||||
// Animation des formes continue de rotation + skew pendant tout le scroll
|
||||
gsap.to(forme.querySelector('svg'), {
|
||||
scrollTrigger: {
|
||||
trigger: forme,
|
||||
start: "top bottom",
|
||||
end: "bottom top",
|
||||
scrub: true,
|
||||
ease: "power4.out"
|
||||
},
|
||||
rotation: Math.random() > 0.5 ? 45 : -45,
|
||||
skewX: Math.random() > 0.5 ? 10 : -10
|
||||
});
|
||||
|
||||
// Animation de couleur des formes uniquement au centre de l'écran
|
||||
gsap.timeline({
|
||||
scrollTrigger: {
|
||||
trigger: card,
|
||||
start: "top center", // Commence quand le haut de l'élément atteint le centre
|
||||
end: "bottom center", // Termine quand le bas de l'élément passe le centre
|
||||
scrub: true,
|
||||
markers: false // Désactivez les marqueurs en production
|
||||
}
|
||||
})
|
||||
.to(forme.querySelector('svg'), {
|
||||
stroke: "#f661e2", // Passage au rose
|
||||
duration: 0.1
|
||||
}, 0.3) // Au milieu de la timeline (centre de l'écran)
|
||||
.to(forme.querySelector('svg'), {
|
||||
stroke: "#1642bc", // Retour au bleu
|
||||
duration: 0.1
|
||||
}, 0.7); // Juste après le centre
|
||||
|
||||
}
|
||||
|
||||
async function createForme(card, n){
|
||||
let forme = document.createElement('div');
|
||||
forme.classList.add('bg-forme');
|
||||
|
||||
|
||||
// forme.classList.add(formesclasses[n]);
|
||||
// forme.classList.add(_formesclasses[n]);
|
||||
|
||||
// inject svg from file
|
||||
const response = await fetch(`/themes/custom/mathallo/assets/img/formes/${formesclasses[n]}.svg`)
|
||||
const response = await fetch(`/themes/custom/mathallo/assets/img/formes/${_formesclasses[n]}.svg`)
|
||||
const svgText = await response.text();
|
||||
forme.innerHTML = svgText;
|
||||
|
||||
@@ -261,7 +265,7 @@ gsap.registerPlugin(ScrollTrigger, ScrollSmoother);
|
||||
let wh = 200 + Math.random()*300;
|
||||
// OR
|
||||
// pic a size
|
||||
// let wh = sizes.splice(Math.floor(Math.random() * sizes.length), 1)[0];
|
||||
// let wh = _sizes.splice(Math.floor(Math.random() * _sizes.length), 1)[0];
|
||||
// record the original scale for stroke width rescalling
|
||||
const init_wh = svgNode.getAttribute('width');
|
||||
// set the new size
|
||||
|
||||
Reference in New Issue
Block a user