Skip to content
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.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Hackcamp2023 animations alvin #360

Merged
merged 4 commits into from
Oct 6, 2023
Merged

Hackcamp2023 animations alvin #360

Show file tree
Hide file tree
Changes from 3 commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
e26d16a
desktop animations first draft
alvinkam33 Sep 30, 2023
c356174
Merge branch 'hackcamp2023_dev' of https://github.com/nwplus/external…
alvinkam33 Oct 1, 2023
2b1f6fc
adjust mobile animations
alvinkam33 Oct 1, 2023
4e55d60
fix bob lag
alvinkam33 Oct 3, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
1,250 changes: 1,250 additions & 0 deletions public/assets/background/countdown/bear.svg
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
1,586 changes: 1,586 additions & 0 deletions public/assets/background/countdown/deer.svg
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
314 changes: 314 additions & 0 deletions public/assets/background/countdown/galaxy.svg
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
4,404 changes: 0 additions & 4,404 deletions public/assets/background/countdown/mascots.svg
View file
Open in desktop

This file was deleted.

1,266 changes: 1,266 additions & 0 deletions public/assets/background/countdown/nugget.svg
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
60 changes: 52 additions & 8 deletions src/components/Stats.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,3 +1,4 @@
import { useEffect } from 'react'
import { useParallax } from 'react-scroll-parallax'
import { SectionContainer } from '@lib/Containers'
import styled, { keyframes } from 'styled-components'
Expand Down Expand Up @@ -49,15 +50,25 @@ const BgScroll = styled(SectionContainer)`
}
`

const stemsGlow = keyframes`
from {
filter: brightness(1);
}
to {
filter: brightness(1.4);
}
`

const Stems = styled(SectionContainer)`
animation: ${stemsGlow} 2s infinite alternate;
background: url('assets/background/stats/stems.svg');
background-size: 100vw;
transform: scale(1.205);
background-repeat: no-repeat;

position: absolute;
top: 46.5vw;
left: -0.5vw;
top: 46.25vw;
left: -1.0vw;
width: 100%;
height: 100%;
z-index: 12;
Expand All @@ -83,6 +94,7 @@ const FgScroll = styled(SectionContainer)`
width: 100%;
height: 100%;
z-index: 98;
top: 1vw;

${(p) => p.theme.mediaQueries.mobile} {
background: url('assets/mobile/stats/foreground.png');
Expand Down Expand Up @@ -210,14 +222,46 @@ const GalleryImage = styled.img`
margin: 10px 15px;
`

export default function Stats() {
export default function Stats () {
// const { ref: ref1 } = useParallax({
// speed: -20,
// });

// const { ref: ref2 } = useParallax({
// speed: -10,
// });
// const observer = new IntersectionObserver(function (entries) {
// entries.forEach((entry) => {
// if (entry.isVisible) {

useEffect(() => {
if (typeof window !== 'undefined') {
const stats = window.document.querySelector('.stats')
const renderCountAnimation = () => {
const valueDisplays = window.document.querySelectorAll('.num')
const interval = 500
valueDisplays.forEach((valueDisplay) => {
let startValue = 0
const endValue = parseInt(valueDisplay.getAttribute('data-val'))
const id = valueDisplay.getAttribute('id')
const duration = Math.floor(interval / endValue)
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

curious if this was an arbitrary value choice?

Copy link
Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

this was pretty arbitrary yeah. the interval var is what determines the speed

const counter = setInterval(function () {
startValue += 1
valueDisplay.textContent = `${startValue}${id === 'percent' ? '%' : ''}`
if (startValue === endValue) {
clearInterval(counter)
}
}, duration)
})
}
const observer = new window.IntersectionObserver(function (entries) {
if (entries[0].isIntersecting) {
renderCountAnimation()
}
})
observer.observe(stats)
}
})

return (
<BgSectionContainer id="statistics">
Expand All @@ -227,21 +271,21 @@ export default function Stats() {
<ContentInner>
<StyledTitle>
Last year we had:
<StatsGrid>
<StatsGrid className="stats">
<StatTop>
<Number>26</Number>
<Number className="num" data-val="26">0</Number>
Projects Submitted
</StatTop>
<StatTop>
<Number>197</Number>
<Number className="num" data-val="197">0</Number>
Hackers Registered
</StatTop>
<StatBottom>
<Number>40%</Number>
<Number className="num" data-val="40" id="percent">0</Number>
Gender Minority
</StatBottom>
<StatBottom>
<Number>64%</Number>
<Number className="num" data-val="64" id="percent">0</Number>
First-Time Hackers
</StatBottom>
</StatsGrid>
Expand Down
87 changes: 83 additions & 4 deletions src/sections/Count.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -15,7 +15,7 @@ const InfoContainer = styled.div`

${(p) => p.theme.mediaQueries.mobile} {
background-repeat: no-repeat;
aspect-ratio: 428/724;
aspect-ratio: 412/724;
}

`
Expand All @@ -37,8 +37,8 @@ const BgScroll = styled(SectionContainer)`
}
`

const Mascots = styled(SectionContainer)`
background: url('assets/background/countdown/mascots.svg');
const Galaxy = styled(SectionContainer)`
background: url('assets/background/countdown/galaxy.svg');
background-size: 100vw;
transform: scale(1.375);
background-repeat: no-repeat;
Expand All @@ -57,6 +57,60 @@ const Mascots = styled(SectionContainer)`
}
`

const Bear = styled(SectionContainer)`
background: url('assets/background/countdown/bear.svg');
background-size: 10vw;
background-repeat: no-repeat;
background-position: center right;

position: absolute;
top: 20vw;
left: -12.5vw;
width: 100%;
height: 100%;
opacity: 0.75;

${(p) => p.theme.mediaQueries.mobile} {
top: 60vw;
}
`

const Deer = styled(SectionContainer)`
background: url('assets/background/countdown/deer.svg');
background-size: 15vw;
background-repeat: no-repeat;
background-position: center center;

position: absolute;
top: 10vw;
left: 0px;
width: 100%;
height: 100%;
opacity: 0.75;

${(p) => p.theme.mediaQueries.mobile} {
top: 50vw;
}
`

const Nugget = styled(SectionContainer)`
background: url('assets/background/countdown/nugget.svg');
background-size: 25vw;
background-repeat: no-repeat;
background-position: center left;

position: absolute;
top: 5vw;
left: 0px;
width: 100%;
height: 100%;
opacity: 0.75;

${(p) => p.theme.mediaQueries.mobile} {
top: 45vw;
}
`

const TextContainer = styled.div`
display: flex;
flex-direction: row;
Expand Down Expand Up @@ -217,6 +271,28 @@ const Count = () => {
// speed: -20
// })

const bearParallax = useParallax({
easing: 'easeOutQuad',
translateX: ['-400vw', '0vw'],
translateY: ['-35vw', '0vw'],
scale: [6, 1],
opacity: [1, 0.75]
})

const deerParallax = useParallax({
easing: 'easeOutQuad',
translateX: ['-400vw', '15vw'],
translateY: ['-35vw', '0vw'],
scale: [6, 1]
})

const nuggetParallax = useParallax({
easing: 'easeOutQuad',
translateX: ['-400vw', '15vw'],
translateY: ['-35vw', '0vw'],
scale: [6, 1]
})

return (
<InfoContainer>
<BgScroll />
Expand All @@ -238,7 +314,10 @@ const Count = () => {
</ShadowText>
</MinutesTextContainer>
</TextContainer>
<Mascots />
<Galaxy />
<Bear ref={bearParallax.ref}/>
<Deer ref={deerParallax.ref}/>
<Nugget ref={nuggetParallax.ref}/>
</InfoContainer>
)
}
Expand Down
13 changes: 12 additions & 1 deletion src/sections/Info.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
import { useParallax } from 'react-scroll-parallax'
import { Header2 } from '@components/Typography'
import { SectionContainer } from '@lib/Containers'
import styled from 'styled-components'
import styled, { keyframes } from 'styled-components'

const InfoContainer = styled.div`
background: #150C27;
Expand Down Expand Up @@ -84,7 +84,18 @@ const PushinP = styled.p`
}
`

const fishingBearBob = keyframes`
0%, 100% {
top: -2vw;
alvinkam33 marked this conversation as resolved.
Show resolved Hide resolved
}

50% {
top: -1.5vw;
}
`

const FishingBear = styled.div`
animation: ${fishingBearBob} 4s linear infinite;
background: url('assets/background/about/fishing_bear.svg');
background-size: 57.5vw;
background-repeat: no-repeat;
Expand Down
1 change: 1 addition & 0 deletions src/sections/Learn.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -18,6 +18,7 @@ const InfoContainer = styled.div`
background-size: 100vw;
background-repeat: no-repeat;
background-position: center center;
background-color: #150C27;

aspect-ratio: 412/1154;
}
Expand Down
14 changes: 13 additions & 1 deletion src/sections/Register.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
import { useParallax } from 'react-scroll-parallax'
import styled from 'styled-components'
import styled, { keyframes } from 'styled-components'
import { SectionContainer } from '@lib/Containers'
import { Header2 } from '@components/Typography'
import Button from '@components/Button'
Expand Down Expand Up @@ -42,7 +42,19 @@ const BgScroll = styled(SectionContainer)`
z-index: -1;
}
`

const portalBob = keyframes`
0%, 100% {
top: -5px;
}

50% {
top: 5px;
}
`

const Portal = styled(SectionContainer)`
animation: ${portalBob} 2s linear infinite;
background: url('assets/background/hero/portal.svg');
background-size: 100vw;
background-repeat: no-repeat;
Expand Down
Loading