From 6761a2b0d04f8f2b8b930dbf794f3ce3f6f1f493 Mon Sep 17 00:00:00 2001 From: Alex Stan Date: Sun, 2 Jun 2024 11:47:22 +0300 Subject: [PATCH] Updated animations (#11) Co-authored-by: Alex Stan Co-committed-by: Alex Stan --- app/components/link-button.tsx | 26 ++++++++++++++++++++++++++ app/components/logo.tsx | 14 ++++++++++---- app/components/question_component.tsx | 18 +++++++++++++----- app/components/topic_card.tsx | 19 +++++++++++++------ app/lib/delay.ts | 5 +++++ app/page.tsx | 24 +++++++++++++++++------- app/sessionconfig/page.tsx | 7 ------- package-lock.json | 25 +++++++++++++++++++++++++ package.json | 1 + 9 files changed, 110 insertions(+), 29 deletions(-) create mode 100644 app/components/link-button.tsx create mode 100644 app/lib/delay.ts diff --git a/app/components/link-button.tsx b/app/components/link-button.tsx new file mode 100644 index 0000000..37cac35 --- /dev/null +++ b/app/components/link-button.tsx @@ -0,0 +1,26 @@ +'use client'; +import { motion } from "framer-motion" +import { useState } from "react"; + +const LinkButton = ({text, href, onPress}: {text: string, href: string, onPress?: () => any}) => { + const [buttonHovered, setButtonHovered] = useState( false ); + const [buttonPressed, setButtonPressed] = useState( false ); + return ( +
+ setButtonHovered(true)} + onMouseLeave={()=>setButtonHovered(false)} + onClick={()=>{setButtonPressed(true); onPress && onPress();}} + > + {text} + + +
+ ); +} + +export default LinkButton; \ No newline at end of file diff --git a/app/components/logo.tsx b/app/components/logo.tsx index a4e2930..a21e943 100644 --- a/app/components/logo.tsx +++ b/app/components/logo.tsx @@ -1,6 +1,8 @@ 'use client'; import { Transition } from "@headlessui/react"; +import { motion } from "framer-motion"; import { useState } from "react"; +import LinkButton from "./link-button"; const Logo = () => { @@ -18,20 +20,24 @@ const Logo = () => { leave="transition-opacity duration-75" leaveFrom={logoHovered ? "opacity-70" : "opacity-100"} leaveTo={logoHovered ? "opacity-100" : "opacity-70"}> */} - setLogoHovered(true)} onMouseLeave={()=>setLogoHovered(false)}> - + {/* */}
- setAboutButtonHovered(true)} + onMouseLeave={()=>setAboutButtonHovered(false)} > About us - + */} + ) } diff --git a/app/components/question_component.tsx b/app/components/question_component.tsx index 45cd13d..f5a7bcb 100644 --- a/app/components/question_component.tsx +++ b/app/components/question_component.tsx @@ -1,8 +1,10 @@ -import { ReactComponentElement, ReactNode } from "react"; +import { ReactComponentElement, ReactNode, useEffect } from "react"; import { AnswerType, Question } from "../lib/question"; import { SessionState } from "../lib/session"; import { CheckCircleIcon, XCircleIcon } from "@heroicons/react/24/outline"; import { Button, Transition } from "@headlessui/react"; +import wait from "../lib/delay"; +import { motion } from "framer-motion"; const QuestionView = ({ question, setState, state }: { question: Question, setState: any, state: SessionState }) => { @@ -16,6 +18,10 @@ const QuestionView = ({ question, setState, state }: { question: Question, setSt })) } + useEffect( () => { + wait( 1000 ); + }, [] ); + const handleAnswerClick = (right: boolean) => { setState( (prevState: SessionState) => ({ ...prevState, @@ -47,14 +53,16 @@ const QuestionView = ({ question, setState, state }: { question: Question, setSt {question.text} - + leaveTo="opacity-0"> */} + {/* */} +

{question.answer}

@@ -91,7 +99,7 @@ const QuestionView = ({ question, setState, state }: { question: Question, setSt
- + - diff --git a/app/components/topic_card.tsx b/app/components/topic_card.tsx index dfd79dc..23575cb 100644 --- a/app/components/topic_card.tsx +++ b/app/components/topic_card.tsx @@ -1,7 +1,13 @@ -import { PlayIcon } from '@heroicons/react/24/outline' +'use client'; +import { motion } from 'framer-motion'; +import { useState } from 'react'; +import LinkButton from './link-button'; const TopicCard = ({ title, children, link }: { title: string, children: any, link: string }) => { - return( -
+ const [clicked, setClicked] = useState( false ); + const [hovered, setHovered] = useState( false ); + return ( + setHovered(true)} onMouseLeave={()=>setHovered(false)}> - Begin - + */} + setClicked(true)}/>
- + ) } diff --git a/app/lib/delay.ts b/app/lib/delay.ts new file mode 100644 index 0000000..486d7df --- /dev/null +++ b/app/lib/delay.ts @@ -0,0 +1,5 @@ +const wait = (time: number): Promise => { + return new Promise( res => setTimeout( res, time ) ); +} + +export default wait; \ No newline at end of file diff --git a/app/page.tsx b/app/page.tsx index 1e980fe..5ce2e55 100644 --- a/app/page.tsx +++ b/app/page.tsx @@ -1,12 +1,15 @@ - -import { Fragment } from 'react' +'use client'; +import { Fragment, useState } from 'react' import { Menu, MenuButton, MenuItem, MenuItems, Transition } from '@headlessui/react' import { ChevronDownIcon } from '@heroicons/react/20/solid' import Logo from './components/logo'; +import { motion } from 'framer-motion'; +import LinkButton from './components/link-button'; function classNames(...classes) { return classes.filter(Boolean).join(' ') } export default function Example() { + const [buttonPressed, setButtonPressed] = useState( false ); return (
{/*Background visual elements*/} @@ -33,10 +36,13 @@ export default function Example() { + enterTo="opacity-80" + leave="transition-opacity duration-150" + leaveFrom="opacity-80" + leaveTo="opacity-0"> diff --git a/app/sessionconfig/page.tsx b/app/sessionconfig/page.tsx index a1859da..a73894e 100644 --- a/app/sessionconfig/page.tsx +++ b/app/sessionconfig/page.tsx @@ -81,13 +81,6 @@ export default function Example() { className="absolute inset-x-0 top-[calc(100%-13rem)] -z-10 transform-gpu overflow-hidden blur-3xl sm:top-[calc(100%-30rem)]" aria-hidden="true" > -
) diff --git a/package-lock.json b/package-lock.json index c37c1f6..9c0297d 100644 --- a/package-lock.json +++ b/package-lock.json @@ -10,6 +10,7 @@ "dependencies": { "@headlessui/react": "^2.0.4", "@heroicons/react": "^2.1.3", + "framer-motion": "^11.2.10", "next": "14.2.3", "react": "^18", "react-dom": "^18", @@ -2245,6 +2246,30 @@ "url": "https://github.com/sponsors/isaacs" } }, + "node_modules/framer-motion": { + "version": "11.2.10", + "resolved": "https://registry.npmjs.org/framer-motion/-/framer-motion-11.2.10.tgz", + "integrity": "sha512-/gr3PLZUVFCc86a9MqCUboVrALscrdluzTb3yew+2/qKBU8CX6nzs918/SRBRCqaPbx0TZP10CB6yFgK2C5cYQ==", + "dependencies": { + "tslib": "^2.4.0" + }, + "peerDependencies": { + "@emotion/is-prop-valid": "*", + "react": "^18.0.0", + "react-dom": "^18.0.0" + }, + "peerDependenciesMeta": { + "@emotion/is-prop-valid": { + "optional": true + }, + "react": { + "optional": true + }, + "react-dom": { + "optional": true + } + } + }, "node_modules/fs.realpath": { "version": "1.0.0", "resolved": "https://registry.npmjs.org/fs.realpath/-/fs.realpath-1.0.0.tgz", diff --git a/package.json b/package.json index 4ed312c..6c6a4ab 100644 --- a/package.json +++ b/package.json @@ -11,6 +11,7 @@ "dependencies": { "@headlessui/react": "^2.0.4", "@heroicons/react": "^2.1.3", + "framer-motion": "^11.2.10", "next": "14.2.3", "react": "^18", "react-dom": "^18",