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

REFACTOR handling footer animation in footer

Browse Source
This commit is contained in:
Antoine M 2025-06-02 17:13:15 +02:00
parent f3bedbe854
commit 399ea7ed6a
2 changed files with 80 additions and 53 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

55
resources/js/app.js
View File

@ -1,57 +1,6 @@
import menuInit from './header';
import initFooterShapes from './footer';
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',
});
initFooterShapes();
});

78
resources/js/footer.js Normal file
View File

@ -0,0 +1,78 @@
export default function initFooterShapes() {
gsap.fromTo(
'.shape.square',
{
y: '-60%',
rotation: 0,
},
{
scrollTrigger: {
trigger: '.branding',
start: 'top bottom',
end: 'bottom top',
markers: true,
scrub: 0.2,
},
y: '80%',
duration: 2,
ease: 'none',
}
);
gsap.fromTo(
'.shape.circle',
{
y: '-60%',
},
{
scrollTrigger: {
trigger: '.branding',
start: 'top bottom',
end: 'bottom top',
markers: true,
scrub: 0.4,
},
y: '30%',
duration: 2,
ease: 'none',
}
);
gsap.fromTo(
'.shape.rectangle-rotated',
{
y: '-60%',
},
{
scrollTrigger: {
trigger: '.branding',
start: 'top bottom',
end: 'bottom top',
markers: true,
scrub: 0.6,
},
y: '30%',
duration: 2,
ease: 'none',
}
);
gsap.fromTo(
'.shape.rectangle-vertical',
{
y: '-60%',
},
{
scrollTrigger: {
trigger: '.branding',
start: 'top bottom',
end: 'bottom top',
markers: true,
scrub: 0.3,
},
y: '60%',
duration: 2,
ease: 'none',
}
);
}