added animation to course_about page

Abstract-Tech · Sep 26, 2023 · 0542e8f · 0542e8f
1 parent b01beff
commit 0542e8f
Showing 1 changed file with 4 additions and 0 deletions.
diff --git a/src/example/Course_about.jsx b/src/example/Course_about.jsx
@@ -301,6 +301,7 @@ const About = () => {
         </AnimationOnScroll>
         <div className="">
           <div className="course-info-banner">
+            <AnimationOnScroll duration={2.2} animateIn="animate__animated animate__fadeInDown">
             <span className="info-tab">
               <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="currentColor" class="bi bi-clock" viewBox="0 0 16 16">
                 <path d="M8 3.5a.5.5 0 0 0-1 0V9a.5.5 0 0 0 .252.434l3.5 2a.5.5 0 0 0 .496-.868L8 8.71V3.5z"/>
@@ -374,6 +375,7 @@ const About = () => {
                 View Course
               </a>
             )}
+            </AnimationOnScroll>
           </div>
           <div>
             <img
@@ -382,6 +384,7 @@ const About = () => {
               alt={data?.course_name}
             />
           </div>
+          <AnimationOnScroll duration={1.5} animateIn="animate__animated animate__fadeInLeft">
           <div className="course-info-banner2">
             <div className="tabs">
             {tabItems.map(({ id, title, section_class }) => (
@@ -405,6 +408,7 @@ const About = () => {
             </div>
             </div>
           </div>
+          </AnimationOnScroll>
 
           <div className="content wrapper-continer">
             {tabItems.map(({ id, section_class }) => {