Antoine/carhop__carhop-theme__DEV
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

FEAT add GSAP animations for shapes on scroll in branding section

Browse Source
This commit is contained in:
Antoine M 2025-05-23 18:03:18 +02:00
parent e48da4b12c
commit 45c065c4a4
1 changed files with 52 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

52
resources/js/app.js
View File

@ -2,4 +2,56 @@ import menuInit from './header';
window.addEventListener('load', function () {
menuInit();
gsap.to('.shape.square', {
scrollTrigger: {
trigger: '.branding',
start: 'top bottom',
end: 'bottom top',
markers: true,
scrub: 0.2,
},
y: '300%',
duration: 2,
ease: 'none',
});
gsap.to('.shape.circle', {
scrollTrigger: {
trigger: '.branding',
start: 'top bottom',
end: 'bottom top',
markers: true,
scrub: 0.4,
},
y: '175%',
duration: 2,
ease: 'none',
});
gsap.to('.shape.rectangle-rotated', {
scrollTrigger: {
trigger: '.branding',
start: 'top bottom',
end: 'bottom top',
markers: true,
scrub: 0.6,
},
y: '340%',
duration: 2,
ease: 'none',
});
gsap.to('.shape.rectangle-vertical', {
scrollTrigger: {
trigger: '.branding',
start: 'top bottom',
end: 'bottom top',
markers: true,
scrub: 0.3,
},
y: '150%',
duration: 2,
ease: 'none',
});
});