170 lines
4.0 KiB
JavaScript
170 lines
4.0 KiB
JavaScript
/**
|
|
* 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,
|
|
// },
|
|
// });
|
|
// });
|