- Notifications
You must be signed in to change notification settings - Fork0
[I2 16] Add framer motion#65
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to ourterms of service andprivacy statement. We’ll occasionally send you account related emails.
Already on GitHub?Sign in to your account
Open
joye-fuu wants to merge10 commits intomasterChoose a base branch
base:master
Could not load branches
Branch not found:{{ refName }}
Loading
Could not load tags
Nothing to show
Loading
Are you sure you want to change the base?
Some commits from the old base branch may be removed from the timeline, and old review comments may become outdated.
Uh oh!
There was an error while loading.Please reload this page.
Open
Changes fromall commits
Commits
Show all changes
10 commits Select commitHold shift + click to select a range
b72c27f Add fade in animations to front page
joye-fuu0c2e740 Add basic loading animation
joye-fuu35b9e71 Add animation to hide loading
joye-fuuc3a69ee Fix landing page animation sequence
joye-fuu2e6cd18 Stagger Spline loading animation
joye-fuu18b67f5 Merge branch 'master' of github.com:csesoc/csesoc-website-2023 into I…
joye-fuue005967 Remove loading text
joye-fuua5342ab Remove loading animation
joye-fuud4a825f Add animation to about page
joye-fuuead257e Add fade in animations
joye-fuuFile filter
Filter by extension
Conversations
Failed to load comments.
Loading
Uh oh!
There was an error while loading.Please reload this page.
Jump to
Jump to file
Failed to load files.
Loading
Uh oh!
There was an error while loading.Please reload this page.
Diff view
Diff view
There are no files selected for viewing
101 changes: 53 additions & 48 deletionsfrontend/src/components/About/AboutHomepage.tsx
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,61 +1,66 @@ | ||
| import Image from "next/image"; | ||
| import ScrollEnterAnimation from '@/components/Animations/ScrollEnterAnimation'; | ||
| export default function AboutHomePage() { | ||
| return ( | ||
| <section className="py-8 pb-16 xl:px-24 sm:px-10 px-5" id="about"> | ||
| <ScrollEnterAnimation> | ||
| <div className="text-center my-10"> | ||
| <h2 className="font-bold text-6xl mb-16">ABOUT</h2> | ||
| </div> | ||
| </ScrollEnterAnimation> | ||
| <ScrollEnterAnimation> | ||
| <div className="flex justify-center items-center"> | ||
| <div className="lg:grid grid-cols-6 flex-1 max-w-[90rem]"> | ||
| {/* LEFT SIDE */} | ||
| {/* NOTE: there is slightly altered from about/index.tsx */} | ||
| <div className="col-span-2 md:mx-5"> | ||
| <div className="flex items-center justify-center"> | ||
| <Image src="/assets/csesoc_icon.svg" alt="CSESoc Icon" width={150} height={150} /> | ||
| </div> | ||
| <h2 className="mt-4 text-3xl font-extrabold">CSESoc</h2> | ||
| <p className="text-[#727B8C] font-medium">unsw-computer-science-engineering-society</p> | ||
| <div className="my-4 flex gap-5"> | ||
| <Image src="/assets/people_icon.svg" alt="People" width={20} height={20} /> | ||
| <div> | ||
| 16k <span className="text-[#727B8C]">members</span> · 146{' '} | ||
| <span className="text-[#727B8C]">internal members</span> | ||
| </div> | ||
| </div> | ||
| <div className="my-4 flex gap-5"> | ||
| <Image src="/assets/location_icon.svg" alt="Location" width={20} height={20} /> | ||
| Sydney, Australia | ||
| </div> | ||
| <div className="flex gap-5"> | ||
| <Image src="/assets/mail_icon.svg" alt="Mail" width={20} height={20} /> | ||
| <a href="mailto:info@csesoc.org.au" className="hover:underline">info@csesoc.org.au</a> | ||
| </div> | ||
| </div> | ||
| {/* RIGHT SIDE */} | ||
| <div className="col-span-4 lg:mt-0 mt-10"> | ||
| <p className="text-2xl"> | ||
| We are one of the largest and most active societies at UNSW, and {" "} | ||
| <span className="font-bold text-[#3977F8]">the largest computing society in the southern hemisphere</span>. | ||
| <br/><br/> | ||
| CSESoc comprises {" "} | ||
| <span className="font-bold text-[#3977F8]">over 16k members</span> | ||
| {" "}spanning across various degrees including Computer Science, | ||
| Software Engineering, Bioinformatics and Computer Engineering. | ||
| <br/><br/> | ||
| We are here to fulfil the social, personal and professional needs of CSE students, | ||
| and promote computing through a variety of forms. | ||
| </p> | ||
| <div className="flex pt-8 justify-center items-center"> | ||
| <a href="about"> | ||
| <button className="group flex justify-center items-center gap-2 pl-2 bg-white border text-blue-900 font-semibold border-[#A7A6E5] text-lg rounded-3xl w-[14rem] hover:opacity-60 xl:h-12 h-10 duration-300"> | ||
| Find out more... | ||
| </button> | ||
| </a> | ||
| </div> | ||
| </div> | ||
| </div> | ||
| </div> | ||
| </ScrollEnterAnimation> | ||
| </section> | ||
| ); | ||
| } |
30 changes: 30 additions & 0 deletionsfrontend/src/components/Animations/FadeInAnimation.tsx
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,30 @@ | ||
| import { ReactNode } from 'react' | ||
| import { motion } from 'framer-motion'; | ||
| interface FadeInProps { | ||
| children: ReactNode; | ||
| delay?: number; | ||
| viewport?: number; | ||
| yInitial?: number; | ||
| className?: string; | ||
| } | ||
| const FadeInAnimation = ({ children, delay = 0, yInitial = 30, className }: FadeInProps) => { | ||
| return ( | ||
| <motion.div | ||
| initial={{ opacity: 0, y: yInitial }} | ||
| animate={{ opacity: 1, y: 0 }} | ||
| transition={{ | ||
| duration: 0.5, | ||
| ease: "easeOut", | ||
| delay, | ||
| }} | ||
| className={className} | ||
| > | ||
| {children} | ||
| </motion.div> | ||
| ) | ||
| } | ||
| export default FadeInAnimation |
82 changes: 82 additions & 0 deletionsfrontend/src/components/Animations/Loading.tsx
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,82 @@ | ||
| import React from 'react' | ||
| import { motion } from 'framer-motion'; | ||
| const Loading = () => { | ||
| const [isLoading, setIsLoading] = React.useState(true); | ||
| // Toggling the animation durations | ||
| const loadDuration = 3; | ||
| const loadStart = 0.1; | ||
| const loadEnd = 0.5; | ||
| React.useLayoutEffect(() => { | ||
| // Only show loading on initial load | ||
| if (!window || !window.sessionStorage) { | ||
| setIsLoading(true); | ||
| } else { | ||
| if (sessionStorage.getItem("firstload") === null) { | ||
| sessionStorage.setItem("firstload", "true"); | ||
| } else if (sessionStorage.getItem("firstload") === "true") { | ||
| setIsLoading(true); | ||
| sessionStorage.setItem("firstload", "false"); | ||
| } else { | ||
| // Don't show loading animation | ||
| setIsLoading(false); | ||
| return; | ||
| } | ||
| } | ||
| // Otherwise, show loading animation | ||
| document.body.style.overflow = 'hidden'; | ||
| const startAnimation = () => { | ||
| const timer = setTimeout(() => { | ||
| document.body.style.overflow = ''; | ||
| setIsLoading(false); | ||
| }, loadDuration * 1000); | ||
| return timer; | ||
| }; | ||
| const timer = requestAnimationFrame(() => startAnimation()); | ||
| return () => { | ||
| cancelAnimationFrame(timer); | ||
| document.body.style.overflow = ''; | ||
| }; | ||
| }, []); | ||
| if (!isLoading) { | ||
| return null; | ||
| } | ||
| return ( | ||
| <motion.div | ||
| initial={{ opacity: 1 }} | ||
| animate={{ opacity: 0 }} | ||
| transition={{ | ||
| duration: loadEnd, | ||
| delay: loadDuration - loadEnd, | ||
| }} | ||
| className="fixed inset-0 bg-[#000021] z-[999] flex flex-col items-center justify-center" | ||
| style={{ | ||
| willChange: 'opacity', | ||
| }} | ||
| > | ||
| <div className="w-96 h-3 bg-gray-700 rounded-full overflow-hidden"> | ||
| <motion.div | ||
| className="h-full bg-gradient-to-r from-blue-400 to-blue-500 rounded-full" | ||
| initial={{ width: "0%" }} | ||
| animate={{ width: "100%" }} | ||
| transition={{ | ||
| duration: loadDuration - loadEnd - loadStart, | ||
| ease: "easeInOut", | ||
| delay: loadStart, | ||
| }} | ||
| style={{ | ||
| willChange: 'width', | ||
| }} | ||
| /> | ||
| </div> | ||
| </motion.div> | ||
| ) | ||
| } | ||
| export default Loading |
28 changes: 28 additions & 0 deletionsfrontend/src/components/Animations/ScrollEnterAnimation.tsx
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,28 @@ | ||
| import { ReactNode } from 'react' | ||
| import { motion } from 'framer-motion'; | ||
| interface ScrollEnterProps { | ||
| children: ReactNode; | ||
| delay?: number; | ||
| viewport?: number; | ||
| } | ||
| const ScrollEnterAnimation = ({ children, delay = 0 }: ScrollEnterProps) => { | ||
| return ( | ||
| <motion.div | ||
| initial={{ opacity: 0, y: 50 }} | ||
| whileInView={{ opacity: 1, y: 0 }} | ||
| transition={{ | ||
| duration: 0.5, | ||
| ease: "easeOut", | ||
| delay, | ||
| }} | ||
| viewport={{ amount: 0.3, once: true }} | ||
| > | ||
| {children} | ||
| </motion.div> | ||
| ) | ||
| } | ||
| export default ScrollEnterAnimation |
24 changes: 20 additions & 4 deletionsfrontend/src/components/Background.tsx
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.Learn more about bidirectional Unicode characters
39 changes: 22 additions & 17 deletionsfrontend/src/components/Event/EventsBrief.tsx
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.Learn more about bidirectional Unicode characters
Oops, something went wrong.
Uh oh!
There was an error while loading.Please reload this page.
Oops, something went wrong.
Uh oh!
There was an error while loading.Please reload this page.
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.