Skip to content

Commit

Permalink
Merge pull request #16 from TEDxSJCET/2025
Browse files Browse the repository at this point in the history 
change scroll behaviour
  • Loading branch information
@Milansuman
Milansuman authored Jan 31, 2025
2 parents 2b93987 + d3cb928 commit 9b0f52a
Show file tree
Hide file tree
Showing 2 changed files with 89 additions and 81 deletions.
104 changes: 56 additions & 48 deletions src/App.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -11,6 +11,7 @@ import Register from "./components/Register";
import CoreTeam from "./components/CoreTeam";
import TedxLogo from "./components/TedxLogo";
import Lenis from "lenis";
import Home from "./components";

gsap.registerPlugin(Observer);

Expand Down Expand Up @@ -110,68 +111,75 @@ const AnimatedSections = () => {
lenis?.scrollTo(sectionRefs[index], { duration: 1.2, lerp: 0.1 });
};

createEffect(() => {
gsap.set(outerRefs, { yPercent: 100 });
gsap.set(innerRefs, { yPercent: -100 });
// createEffect(() => {
// gsap.set(outerRefs, { yPercent: 100 });
// gsap.set(innerRefs, { yPercent: -100 });

initLenis();
// initLenis();

const observer = Observer.create({
type: "wheel,touch,pointer",
wheelSpeed: -1,
onDown: () => !showTedxLogo() && gotoSection(currentIndex() - 1, -1),
onUp: () => !showTedxLogo() && gotoSection(currentIndex() + 1, 1),
tolerance: 10,
preventDefault: true,
});
// const observer = Observer.create({
// type: "wheel,touch,pointer",
// wheelSpeed: -1,
// onDown: () => !showTedxLogo() && gotoSection(currentIndex() - 1, -1),
// onUp: () => !showTedxLogo() && gotoSection(currentIndex() + 1, 1),
// tolerance: 10,
// preventDefault: true,
// });

onCleanup(() => {
gsap.killTweensOf("*");
observer.kill();
destroyLenis();
});
});
// onCleanup(() => {
// gsap.killTweensOf("*");
// observer.kill();
// destroyLenis();
// });
// });

return (
<div class="h-screen bg-black text-white overflow-hidden">
{!showTedxLogo() && <NavBar goToSection={gotoSection} />}
<div class="h-screen w-screen bg-black text-white overflow-y-auto overflow-x-hidden">
{/* {!showTedxLogo() && <NavBar goToSection={gotoSection} />} */}
{showTedxLogo() ? (
<div class="h-full w-full top-0 fixed">
<TedxLogo
onComplete={() => {
setShowTedxLogo(false);
gotoSection(0, 1);
// gotoSection(0, 1);
}}
/>
</div>
) : (
<div id="smooth-wrapper">
<div id="smooth-content">
<For each={sections()}>
{(section, index) => (
<section
ref={(el) => (sectionRefs[index()] = el)}
class="h-screen w-full top-0 fixed invisible"
style={{ "will-change": "transform, opacity" }}
>
<div ref={(el) => (outerRefs[index()] = el)} class="w-full h-full overflow-y-hidden">
<div ref={(el) => (innerRefs[index()] = el)} class="w-full h-full overflow-y-hidden">
<div
ref={(el) => (bgRefs[index()] = el)}
class="flex absolute h-full w-full top-0 bg-cover bg-center bg-black"
style={{ "will-change": "transform" }}
>
<div ref={(el) => (headingRefs[index()] = el)} class="w-full">
<section.content />
</div>
</div>
</div>
</div>
</section>
)}
</For>
</div>
</div>
// <div id="smooth-wrapper">
// <div id="smooth-content">
// <For each={sections()}>
// {(section, index) => (
// <section
// ref={(el) => (sectionRefs[index()] = el)}
// class="h-screen w-full top-0 fixed invisible"
// style={{ "will-change": "transform, opacity" }}
// >
// <div ref={(el) => (outerRefs[index()] = el)} class="w-full h-full overflow-y-hidden">
// <div ref={(el) => (innerRefs[index()] = el)} class="w-full h-full overflow-y-hidden">
// <div
// ref={(el) => (bgRefs[index()] = el)}
// class="flex absolute h-full w-full top-0 bg-cover bg-center bg-black"
// style={{ "will-change": "transform" }}
// >
// <div ref={(el) => (headingRefs[index()] = el)} class="w-full">
// <section.content />
// </div>
// </div>
// </div>
// </div>
// </section>
// )}
// </For>
// </div>
// </div>
<>
<HeroSection/>
<AboutSection/>
<SpeakersSection/>
<CoreTeam/>
<Register/>
</>
)}
</div>
);
Expand Down
66 changes: 33 additions & 33 deletions src/components/SpeakerSection.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,43 +5,43 @@ import DottedGridBackground from "./DottedGridBackground";
import { speakers } from "@/lib/data";

export default function SpeakersSection() {
onMount(() => {
gsap.registerPlugin(ScrollTrigger);
});
// onMount(() => {
// gsap.registerPlugin(ScrollTrigger);
// });

createEffect(() => {
const cards = gsap.utils.toArray(".card") as HTMLElement[];
const centerIndex = Math.floor(cards.length / 2);
// createEffect(() => {
// const cards = gsap.utils.toArray(".card") as HTMLElement[];
// const centerIndex = Math.floor(cards.length / 2);

const animations = cards.map((card, index) => {
const rotation = index < centerIndex ? -15 : index > centerIndex ? 15 : 0;
const translateY = index === centerIndex ? 0 : Math.abs(centerIndex - index) * 15;
// const animations = cards.map((card, index) => {
// const rotation = index < centerIndex ? -15 : index > centerIndex ? 15 : 0;
// const translateY = index === centerIndex ? 0 : Math.abs(centerIndex - index) * 15;

return gsap.fromTo(
card,
{ opacity: 0, y: 50, scale: 0.9 },
{
opacity: 1,
y: -translateY,
scale: 1,
rotation: rotation,
duration: 0.3,
ease: "power3.out",
scrollTrigger: {
trigger: ".card-container",
start: "top 70%",
end: "bottom 30%",
toggleActions: "play none none reverse",
},
}
);
});
// return gsap.fromTo(
// card,
// { opacity: 0, y: 50, scale: 0.9 },
// {
// opacity: 1,
// y: -translateY,
// scale: 1,
// rotation: rotation,
// duration: 0.3,
// ease: "power3.out",
// scrollTrigger: {
// trigger: ".card-container",
// start: "top 70%",
// end: "bottom 30%",
// toggleActions: "play none none reverse",
// },
// }
// );
// });

onCleanup(() => {
animations.forEach((animation) => animation.kill());
ScrollTrigger.getAll().forEach((trigger) => trigger.kill());
});
});
// onCleanup(() => {
// animations.forEach((animation) => animation.kill());
// ScrollTrigger.getAll().forEach((trigger) => trigger.kill());
// });
// });

return (
<DottedGridBackground
Expand Down

0 comments on commit 9b0f52a

Please sign in to comment.