Skip to content
Snippets Groups Projects
Commit 32d22b51 authored by swostikpati's avatar swostikpati
Browse files

added gif as animation

parent 7d648e46
No related branches found
No related tags found
1 merge request!23added gif as animation
Pipeline #400751 canceled
......@@ -8,6 +8,22 @@
font-family: var(--primary-font);
font-weight: 700;
position: absolute;
top: 42%;
top: 45%;
left: 38%;
/* color: red; */
}
.hero .gif-animation {
/* position: absolute;
top: 50%;
left: 50%; */
/* transform: translate(-50%, -50%); */
margin-top: 10px;
width: 85%;
}
.hero .gif-container {
display: flex;
justify-content: center;
min-height: 80vh;
}
import React from "react";
import HeroAnimation from "@/animations/HeroAnimation";
import React, { useEffect, useRef } from "react";
import { useLocation } from "react-router-dom";
import "./Hero.css";
export default function ({ name }) {
export default function Hero({ name }) {
const location = useLocation();
const gifRef = useRef();
useEffect(() => {
const gifElement = gifRef.current;
gifElement.src = ""; // Clear the src to force a re-render
gifElement.src =
"https://static.igem.wiki/teams/5125/hero-animation-gifs/description-hero.gif"; // Reset the src
}, [location]);
return (
<div className="hero">
{/* <HeroAnimation
animationPath="/nyu-abu-dhabi/lottie-files/hero-optimized.json"
speed={1}
/> */}
<HeroAnimation />
{/* <HeroAnimation /> */}
<div className="gif-container">
<img
ref={gifRef}
src="https://static.igem.wiki/teams/5125/hero-animation-gifs/description-hero.gif"
alt="GIF"
className="gif-animation"
/>
</div>
<p className="heading">{name}</p>
</div>
);
......
......@@ -10,42 +10,5 @@ export function Team() {
{ year: 2020, teamName: "Lethbridge", pageName: "Members" },
];
return (
<>
<div className="row">
<div className="col-8">
<h2>What should this page contain?</h2>
<hr />
<ul>
<li>
Include pictures of your teammates, don't forget instructors and
advisors!
</li>
<li>
You can add a small biography or a few words from each team
member, to tell us what you like, and what motivated you to
participate in iGEM.
</li>
<li>
Take team pictures! Show us your school, your lab and little bit
of your city.
</li>
<li>
Remember that image galleries can help you showcase many pictures
while saving space.
</li>
</ul>
<div className="bd-callout bd-callout-info">
<strong>Important:</strong> Your wiki pages will be archived at the
end of the iGEM season and this content will remain online. Please
keep this in mind as you post photos and personal information on
this page.
</div>
</div>
<div className="col-4">
<Inspirations inspirationLinkList={links} />
</div>
</div>
</>
);
return <div></div>;
}
0% Loading or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment