bachir/drupal-mathallo
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

starting to have quite good animations with gsap

Browse Source
This commit is contained in:
Bachir Soussi Chiadmi
2026-02-18 12:21:24 +01:00
parent 42c93da1cb
commit 8f9cdb36d4
16 changed files with 231 additions and 120 deletions
Download Patch File Download Diff File Expand all files Collapse all files

166
web_main/themes/custom/mathallo/assets/js/main.js
View File

@@ -33,8 +33,23 @@ gsap.registerPlugin(ScrollTrigger, ScrollSmoother);
const MathalloTheme = function () {
const _is_front = drupalSettings.path.isFront
console.log('drupalSettings', drupalSettings)
// liste forme file names
const formesclasses = [
'pyramide',
'prct',
'infinite',
'pi',
'supeg',
'cone',
'croissant',
'cube',
'diamant',
'cylindre'
]
let sizes = [];
// let _I18n
// ___ _ _
// |_ _|_ _ (_) |_
@@ -80,40 +95,23 @@ gsap.registerPlugin(ScrollTrigger, ScrollSmoother);
async function initBgFormes(){
const container = document.querySelector('main[role="main"] > .layout-content > .wrapper');
console.log('container', container);
// liste forme file names
const formesclasses = [
'pyramide',
'prct',
'infinite',
'pi',
'supeg',
'cone',
'croissant',
'cube',
'diamant',
'cylindre'
]
// console.log('container', container);
// listes all available sizes
let 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)
}
console.log('sizes', sizes);
// console.log('sizes', sizes);
let cards = document.querySelectorAll('.field-card, .node-type-chapitre, .node-type-partie');
console.log('cards', cards);
// console.log('cards', cards);
let used_n = [];
let oddeven=1;
for (const card of cards) {
console.log('card', card);
// console.log('card', card);
let forme = document.createElement('div');
forme.classList.add('bg-forme');
// random forme
// avoid duplicated formes
let n = Math.round(Math.random() * (formesclasses.length -1));
@@ -121,20 +119,121 @@ gsap.registerPlugin(ScrollTrigger, ScrollSmoother);
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);
// 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)
// },
}
})
.from(card.children, {
opacity: 0.4,
}, 0)
.to(card.children, {
opacity: 1,
}, 0.5)
.to(card.children, {
opacity: 0.4,
}, 0.7)
.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);
// inverse oddeven
oddeven*=-1;
// 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: 45,
skewX: 10
});
// Animation de couleur des formes uniquement au centre de l'écran
gsap.timeline({
scrollTrigger: {
trigger: forme,
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.4) // Au milieu de la timeline (centre de l'écran)
.to(forme.querySelector('svg'), {
stroke: "#1642bc", // Retour au bleu
duration: 0.1
}, 0.6); // 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]);
// inject svg from file
const response = await fetch(`/themes/custom/mathallo/assets/img/formes/${formesclasses[n]}.svg`)
const svgText = await response.text();
forme.innerHTML = svgText;
const svgNode = forme.querySelector('svg');
const init_wh = svgNode.getAttribute('width');
// get the svg ode
const svgNode = forme.querySelector('svg');
// random size
// let wh = 150 + Math.random()*350;
// pic a size
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
forme.style.width = forme.style.height = `${wh}px`;
svgNode.setAttribute('width', wh);
svgNode.setAttribute('height', wh);
@@ -142,8 +241,7 @@ gsap.registerPlugin(ScrollTrigger, ScrollSmoother);
// keep stroke width to visualy 1px
let scale = wh / init_wh;
const paths = svgNode.querySelectorAll('path, line, rect, circle, ellipse, polygon, polyline');
console.log('paths', paths);
// console.log('paths', paths);
paths.forEach(path => {
const init_SW = parseFloat(path.getAttribute('stroke-width')) || 1;
let new_SW = init_SW / scale;
@@ -169,9 +267,7 @@ gsap.registerPlugin(ScrollTrigger, ScrollSmoother);
forme.style.left = Math.random() > 0.5 ? `${card.offsetLeft - wh}px` : `${card.offsetLeft + card.clientWidth}px`;
}
container.prepend(forme);
}
return forme;
}
function initBgAnime(){
@@ -187,6 +283,10 @@ gsap.registerPlugin(ScrollTrigger, ScrollSmoother);
wrapper: 'main[role="main"]',
content: 'main[role="main"]>.layout-content'
});
}
// function initVues(){