Animez votre site sous Liferay
Animez votre site sous Liferay
Vous trouvez que votre page manque de vie ou vous souhaitez optimiser vos scripts d'animation front-end ?
L'intégration de la librairie GSAP dans vos fragments Liferay pourrait être la solution parfaite.
Cela vous permettra d'ajouter des animations fluides à votre interface en profitant d’une performance optimale et d’une compatibilité navigateur étendue.
Vos visiteurs bénéficieront ainsi d'une expérience utilisateur améliorée sur tous les appareils.
Les fragments Liferay nous permettent de construire des interfaces utilisateur riches et personnalisables avec un minimum d'effort tandis que GSAP donne vie à ces interfaces. Si vous n’êtes pas familier avec les fragments Liferay, je vous conseille de lire notre article sur le sujet ici.
Comment intégrer GSAP ?
Rien de plus simple, rendez vous sur le site officiel de GSAP et copiez le script CDN.
Collez ce script dans votre balise <body>, avant le code html du fragment contenant votre animation.
Je vous conseille de placer le script dans un fragment présent sur toutes les pages, idéalement dans la master page, et appelé très tôt comme un header ou une navigation afin de rendre GSAP disponible dans tous les autres fragments de votre page.
Comment utiliser GSAP dans mon fragment Liferay ?
Pour donner un exemple concret, prenons le site beorntech.com.
Les deux animations présentes sur la page d'accueil ont été créées avec facilité, sans sacrifier la performance.
La création d'animations complexes peut générer du code difficile à lire et à maintenir dans votre fragment.
Il n’aura fallu que quelques lignes de code javascript pour générer l'animation des chiffres :
document.addEventListener('DOMContentLoaded', function () {
gsap.registerPlugin(ScrollTrigger);
const counters = document.querySelectorAll('ma_classe');
counters.forEach(counter => {
const target = counter.textContent;
const startValue = target.startsWith('+') ? '+0' : 0;
const endValue = parseInt(target.replace('+', ''), 10);
counter.textContent = startValue;
gsap.set(counter, { opacity: 0 });
ScrollTrigger.create({
trigger: counter,
start: 'top bottom-=100',
onEnter: () => {
gsap.to(counter, { opacity: 1, duration: 0.5 });
gsap.to(counter, {
textContent: endValue,
snap: { textContent: 1 },
modifiers: {
textContent: function (value) {
return target.startsWith('+')
`+${Math.round(value)}` : Math.round(value);
}
},
duration: 1.5,
ease: 'power3.out',
once: true,
});
}
});
});
});
En conclusion, j’ai personnellement apprécié le découpage offert par les fragments Liferay qui permettent une très bonne organisation et plus de rapidité dans la mise en place des animations.
Que ce soit pour un nouveau projet ou pour une refonte graphique, nous pouvons donc booster nos fragments Liferay avec GSAP pour donner vie à nos sites et proposer une expérience de visite agréable.