tben/personal-site
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Updates

Browse Source
This commit is contained in:
Benjamin Toby
2023-10-24 18:59:00 +01:00
parent d163438f7b
commit b9364a702c
68 changed files with 4701 additions and 4697 deletions
Download Patch File Download Diff File Expand all files Collapse all files
public/scripts/homepage-gsap.js
+169 -169
View File
@@ -1,169 +1,169 @@
/**
* Register plugins
*/
gsap.registerPlugin(ScrollTrigger);
const mm = gsap.matchMedia();
mm.add("(min-width: 1200px)", () => {
ScrollTrigger.create({
trigger: "#homepage-content-wrapper",
// toggleActions: "play none none none",
start: "top 200px",
end: "bottom 90%",
pin: "#main-image",
// markers: true,
scrub: 1,
onUpdate: (self) => {
/**
* Origin
*/
if (self.progress < 0.4) {
gsap.to("#main-image", {
backgroundColor: "#3e3f9c",
x: 0,
duration: 1,
});
gsap.to("body", {
backgroundColor: "#181515",
});
}
/**
* Step 2
*/
if (self.progress > 0.4) {
gsap.to("#main-image", {
backgroundColor: "#FE6847",
x: -50,
duration: 1,
});
gsap.to("body", {
backgroundColor: "#292a6b",
});
}
// if (self.progress > 0 && self.progress < 1) {
// gsap.to("#main-image", {
// position: "fixed",
// top: 20,
// left: 20,
// });
// }
},
onLeave: (self) => {},
});
// gsap.to("#main-image", {
// scale: 1,
// duration: 1,
// });
/**
* Entry animation timeline
*/
const entryTimeline = gsap.timeline();
entryTimeline.to("#main-image", {
scale: 1,
duration: 1,
});
/**
* Scroll animation timeline
*/
// const scrollTimeline = gsap.timeline({
// scrollTrigger: {
// trigger: "#homepage-content-wrapper",
// start: "top 200px",
// end: "bottom 90%",
// scrub: 1,
// },
// });
// scrollTimeline
// // .to("#main-image", {
// // scale: 1,
// // duration: 1,
// // })
// .to("#main-image", {
// rotate: -10,
// });
});
/**
* Animates the hero section
*/
// function homepageTimeline() {
// /**
// * Animate hero section
// */
// tl.to("#main-image", {
// y: 100,
// }).to("#main-image", {
// y: -100,
// });
// tl.to("#main-image", {
// x: 300,
// scrollTrigger: {
// trigger: "#main-image",
// // toggleActions: "play none none none",
// // start: "top center",
// // end: "bottom 500px",
// // pin: "#main-image",
// markers: true,
// scrub: 1,
// },
// });
// }
// .to({
// scrollTrigger: {
// trigger: "#homepage-content-wrapper",
// // toggleActions: "play none none none",
// start: "top top",
// end: "bottom bottom",
// pin: "#main-image",
// markers: true,
// scrub: 1,
// },
// });
// .to("#main-image", {
// y: 300,
// duration: 1,
// scrollTrigger: {
// // trigger: "#homepage-content-wrapper",
// // toggleActions: "play none none none",
// start: "top 100%",
// end: "bottom 0%",
// pin: "#main-image",
// markers: true,
// scrub: 1,
// },
// });
// requestAnimationFrame(async () => {
// await tl.fromTo(
// "#main-image",
// {
// scale: 1.2,
// },
// {
// scale: 1,
// duration: 1,
// }
// );
// await tl.to("#main-image", {
// y: 300,
// duration: 1,
// scrollTrigger: {
// // trigger: "#main-image",
// // toggleActions: "play none none none",
// // start: "top center",
// // end: "bottom 500px",
// pin: true,
// markers: true,
// scrub: 1,
// },
// });
// });
/**
* Register plugins
*/
gsap.registerPlugin(ScrollTrigger);
const mm = gsap.matchMedia();
mm.add("(min-width: 1200px)", () => {
ScrollTrigger.create({
trigger: "#homepage-content-wrapper",
// toggleActions: "play none none none",
start: "top 200px",
end: "bottom 90%",
pin: "#main-image",
// markers: true,
scrub: 1,
onUpdate: (self) => {
/**
* Origin
*/
if (self.progress < 0.4) {
gsap.to("#main-image", {
backgroundColor: "#3e3f9c",
x: 0,
duration: 1,
});
gsap.to("body", {
backgroundColor: "#181515",
});
}
/**
* Step 2
*/
if (self.progress > 0.4) {
gsap.to("#main-image", {
backgroundColor: "#FE6847",
x: -50,
duration: 1,
});
gsap.to("body", {
backgroundColor: "#292a6b",
});
}
// if (self.progress > 0 && self.progress < 1) {
// gsap.to("#main-image", {
// position: "fixed",
// top: 20,
// left: 20,
// });
// }
},
onLeave: (self) => {},
});
// gsap.to("#main-image", {
// scale: 1,
// duration: 1,
// });
/**
* Entry animation timeline
*/
const entryTimeline = gsap.timeline();
entryTimeline.to("#main-image", {
scale: 1,
duration: 1,
});
/**
* Scroll animation timeline
*/
// const scrollTimeline = gsap.timeline({
// scrollTrigger: {
// trigger: "#homepage-content-wrapper",
// start: "top 200px",
// end: "bottom 90%",
// scrub: 1,
// },
// });
// scrollTimeline
// // .to("#main-image", {
// // scale: 1,
// // duration: 1,
// // })
// .to("#main-image", {
// rotate: -10,
// });
});
/**
* Animates the hero section
*/
// function homepageTimeline() {
// /**
// * Animate hero section
// */
// tl.to("#main-image", {
// y: 100,
// }).to("#main-image", {
// y: -100,
// });
// tl.to("#main-image", {
// x: 300,
// scrollTrigger: {
// trigger: "#main-image",
// // toggleActions: "play none none none",
// // start: "top center",
// // end: "bottom 500px",
// // pin: "#main-image",
// markers: true,
// scrub: 1,
// },
// });
// }
// .to({
// scrollTrigger: {
// trigger: "#homepage-content-wrapper",
// // toggleActions: "play none none none",
// start: "top top",
// end: "bottom bottom",
// pin: "#main-image",
// markers: true,
// scrub: 1,
// },
// });
// .to("#main-image", {
// y: 300,
// duration: 1,
// scrollTrigger: {
// // trigger: "#homepage-content-wrapper",
// // toggleActions: "play none none none",
// start: "top 100%",
// end: "bottom 0%",
// pin: "#main-image",
// markers: true,
// scrub: 1,
// },
// });
// requestAnimationFrame(async () => {
// await tl.fromTo(
// "#main-image",
// {
// scale: 1.2,
// },
// {
// scale: 1,
// duration: 1,
// }
// );
// await tl.to("#main-image", {
// y: 300,
// duration: 1,
// scrollTrigger: {
// // trigger: "#main-image",
// // toggleActions: "play none none none",
// // start: "top center",
// // end: "bottom 500px",
// pin: true,
// markers: true,
// scrub: 1,
// },
// });
// });
public/scripts/main.js
+22 -22
View File
@@ -1,22 +1,22 @@
console.log("main js");
const lenis = new Lenis();
lenis.on("scroll", (e) => {
// console.log(e);
});
function raf(time) {
lenis.raf(time);
requestAnimationFrame(raf);
}
requestAnimationFrame(raf);
/**
* GSAP globals
*/
// gsap.to(".gsap-text", {
// text: "Welcome",
// });
console.log("main js");
const lenis = new Lenis();
lenis.on("scroll", (e) => {
// console.log(e);
});
function raf(time) {
lenis.raf(time);
requestAnimationFrame(raf);
}
requestAnimationFrame(raf);
/**
* GSAP globals
*/
// gsap.to(".gsap-text", {
// text: "Welcome",
// });