Skip to content

Commit

Permalink
animation
Browse files Browse the repository at this point in the history
  • Loading branch information
@alurubalakarthikeya
alurubalakarthikeya committed Aug 3, 2024
1 parent df6f194 commit d08139d
Show file tree
Hide file tree
Showing 3 changed files with 83 additions and 40 deletions.
13 changes: 8 additions & 5 deletions index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -10,6 +10,9 @@
<link href="https://fonts.googleapis.com/css2?family=Architects+Daughter&display=swap" rel="stylesheet">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.11.0/gsap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.11.0/ScrollTrigger.min.js"></script>

</head>
<body class="night">
<div class="cursor-dot" data-cursor-dot></div>
Expand All @@ -19,9 +22,6 @@
<nav>
<div id="menu-icon" class="menu-icon">&#9776;</div>
<ul id="menu-items">
<li>
<a href="#">Home</a>
</li>
<li>
<a href="#about">About</a>
</li>
Expand All @@ -31,6 +31,9 @@
<li>
<a href="#games">Games</a>
</li>
<li>
<a href="#stories">Stories</a>
</li>
<li>
<a href="#contact">Contact</a>
</li>
Expand Down Expand Up @@ -72,15 +75,15 @@ <h2 class="hehe fadeInUp-animation">Where Learning is <span>made practical</span
<h2 class="heading">Why Us?</h2>
<img class="fade-in-right-target" src="images/about.png" alt="cartoon">
<div class="space fade-in-left-target">
<p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Dicta quae in eum quis odio a perferendis repudiandae eaque doloremque, facere non voluptatem tempora. Eum totam, doloremque explicabo recusandae ipsum fuga.Lorem ipsum dolor sit amet consectetur adipisicing elit. Quas omnis voluptates voluptatibus? Labore illum maxime similique asperiores eum magnam quisquam doloremque facere voluptas, iste, neque tempore voluptate illo cupiditate rerum. Thank you!!!</p><br><br>
<p>Welcome to Mini Minds! Our mission is to help children enrich their school basics while having tons of fun. At Mini Minds, we believe learning should be practical and enjoyable, which is why we've created a special place just for kids aged 5 to 12. Our site is packed with cool games, exciting activities, and interesting stories designed to make learning fun. Our logo represents our commitment to making education both practical and entertaining.</p><br><br>
<a class="button-about" href="about.html" target="_blank">Know More</a>
</div>
</div>
<div id="courses" class="courses space">
<h2 class="heading">What do we do?</h2>
<img class="fade-in-right-target" src="images/our courses.png" alt="cartoon">
<div class="space fade-in-left-target">
<p> Recusandae soluta laboriosam a eos maxime sit, ad nesciunt tenetur. Lorem ipsum dolor sit amet consectetur adipisicing elit. Laboriosam eveniet aliquam corporis quasi blanditiis sit natus veniam delectus culpa. Quos itaque deleniti tempora ad quasi perferendis doloremque aspernatur quae eos? Lorem ipsum, dolor sit amet consectetur adipisicing elit. Enim maxime sit distinctio eos dignissimos non tenetur qui odit nesciunt! Debitis officia odit labore ipsam iste soluta maiores excepturi nisi incidunt.</p><br><br>
<p>Interactive Stories: Our engaging stories help improve reading skills and ignite a imagination skills. According to Science, reading Sci-fi stories can improve your Analytical and Imagination skills. Each story is crafted to be entertaining and educational. Practical Learning: We believe in making education practical. Our content helps kids connect what they learn with real-world experiences, making learning meaningful. At Mini Minds, we are dedicated to creating a space where kids can learn, play, and grow</p><br><br>
<a class="button-courses" href="courses.html" target="_blank">Explore courses</a>
</div>
</div>
Expand Down
80 changes: 48 additions & 32 deletions script.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -64,42 +64,58 @@ document.addEventListener('DOMContentLoaded', () => {
});

document.addEventListener("DOMContentLoaded", function() {
const fadeInUpTargets = document.querySelectorAll('.fade-in-up-target');
const fadeInLeftTargets = document.querySelectorAll('.fade-in-left-target');
const fadeInRightTargets = document.querySelectorAll('.fade-in-right-target');
gsap.registerPlugin(ScrollTrigger);

const observerOptions = {
root: null, // Use the viewport as the root
rootMargin: '0px',
threshold: 0.1 // Adjust this value as needed
};

let debounceTimer;
const debounce = (callback, delay) => {
return (...args) => {
clearTimeout(debounceTimer);
debounceTimer = setTimeout(() => callback.apply(this, args), delay);
};
};

const observerCallback = debounce((entries, observer) => {
entries.forEach(entry => {
if (entry.isIntersecting) {
if (entry.target.classList.contains('fade-in-up-target')) {
entry.target.classList.add('fadeInUp-animation');
} else if (entry.target.classList.contains('fade-in-left-target')) {
entry.target.classList.add('fadeInLeft-animation');
} else if (entry.target.classList.contains('fade-in-right-target')) {
entry.target.classList.add('fadeInRight-animation');
gsap.utils.toArray('.fade-in-up-target').forEach(el => {
gsap.fromTo(el,
{ opacity: 0, y: 100 }, // Start state
{
opacity: 1,
y: 0, // End state
duration: 2,
scrollTrigger: {
trigger: el,
start: 'top 80%', // Animation starts when element is 80% from the top of the viewport
end: 'bottom 20%', // Animation ends when element is 20% from the bottom of the viewport
scrub: true // Smoothly animates while scrolling
}
observer.unobserve(entry.target); // Optionally unobserve the element after the animation
}
});
}, 100); // Adjust the debounce delay as needed
);
});

const observer = new IntersectionObserver(observerCallback, observerOptions);
gsap.utils.toArray('.fade-in-left-target').forEach(el => {
gsap.fromTo(el,
{ opacity: 0, x: -100 }, // Start state
{
opacity: 1,
x: 0, // End state
duration: 2,
scrollTrigger: {
trigger: el,
start: 'top 80%',
end: 'bottom 20%',
scrub: true
}
}
);
});

[...fadeInUpTargets, ...fadeInLeftTargets, ...fadeInRightTargets].forEach(target => {
observer.observe(target);
gsap.utils.toArray('.fade-in-right-target').forEach(el => {
gsap.fromTo(el,
{ opacity: 0, x: 100 }, // Start state
{
opacity: 1,
x: 0, // End state
duration: 2,
scrollTrigger: {
trigger: el,
start: 'top 80%',
end: 'bottom 20%',
scrub: true
}
}
);
});
});


30 changes: 27 additions & 3 deletions styles.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -242,20 +242,23 @@ body.day .hero-content > p {
transform: translateY(100%);
opacity: 0;
}
99% {
100% {
transform: translateY(0%);
opacity: 1;
filter: blur(0);
}
}


@keyframes fadeInLeft {
0% {
transform: translateX(-100%);
opacity: 0;
}
99% {
100% {
transform: translateX(0%);
opacity: 1;
filter: blur(0);
}
}

Expand All @@ -264,9 +267,10 @@ body.day .hero-content > p {
transform: translateX(100%);
opacity: 0;
}
99% {
100% {
transform: translateX(0%);
opacity: 1;
filter: blur(0);
}
}

Expand All @@ -282,6 +286,26 @@ body.day .hero-content > p {
animation: 2s fadeInRight;
}

/* No need for custom keyframes with GSAP */
.fade-in-up-target,
.fade-in-left-target,
.fade-in-right-target {
opacity: 0; /* Start hidden */
}

/* Optional: Set initial position */
.fade-in-up-target {
transform: translateY(100%);
}
.fade-in-left-target {
transform: translateX(-100%);
}
.fade-in-right-target {
transform: translateX(100%);
}



.sun-moon-container {
display: flex;
justify-content: center;
Expand Down

0 comments on commit d08139d

Please sign in to comment.