Skip to content

Commit

Permalink
Merge pull request #312 from ORNL-AMO/issue-279-c
Browse files Browse the repository at this point in the history 
Add in animations and cleanup transitions
  • Loading branch information
@nbintertech
nbintertech authored Mar 28, 2024
2 parents cde2903 + 45e74e7 commit f79ec81
Show file tree
Hide file tree
Showing 3 changed files with 100 additions and 115 deletions.
164 changes: 75 additions & 89 deletions src/App.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -163,82 +163,8 @@ $landfill-gasses: #f06807;
transform: rotate(-90deg);
}

// Animations

// #animate-underline-emphasis {
// display: inline-block;
// position: relative;
// padding-bottom: 3px;
// }

// @keyframes border {
// from {
// width: 0%;
// }

// to {
// width: 100%;
// }
// }

// #animate-underline-emphasis:after {
// content: '';
// display: block;
// margin: auto;
// height: 5px;
// width: 0px;
// background: #fff;
// animation-name: border;
// animation-duration: 1000ms;
// animation-delay: 2s;
// animation-fill-mode: both;
// }

// todo replace w above
.animate-underline-emphasis {
border-bottom: 5px solid #fff;
padding-bottom: 3px;
margin: auto;
height: 5px;
padding-bottom: 0px;
}

// @keyframes fade-color {
// 0% { color: rgba(68,68,68,.6); }
// 100% { color: white; }
// }


// .animate-color {
// color: rgba(68,68,68,.6);
// padding-left: 12px;
// padding-right: 12px;
// font-weight: 1000;
// font-size: 36px;
// animation: fade-color 3s;
// animation-delay: 1s;
// animation-fill-mode: both;
// }

@keyframes fade-opacity {
0% { opacity: 1; }
100% { opacity: 0; }
}


#fade-to-white {
&::before {
position: absolute;
background-color: #000;
display: flex;
// width: 100%;
height: 100%;
// animation: fade-opacity 10s;
// animation-delay: 6s;
// animation-fill-mode: forwards;
}
}

// Slides
.swiper-slide.swiper-slide-active.lose-game-bg {
&::before {
Expand Down Expand Up @@ -319,21 +245,6 @@ $landfill-gasses: #f06807;
}
}

// .lose-game-text {
// display: 'flex';
// flex-direction: 'column';
// flex-grow: 1;
// color: #000;
// border-radius: 10px;
// padding: 36px 128px;
// animation-fill-mode: 'forwards';
// opacity: 0;
// font-size: 32px;
// font-weight: 900;
// text-transform: uppercase;
// font-family:"Lato", sans-serif;
// }

.lose-game-text {
display: 'flex';
flex-direction: 'column';
Expand Down Expand Up @@ -362,4 +273,79 @@ $landfill-gasses: #f06807;
font-family: "Lato", sans-serif;
line-height: 4rem;
margin-top: 0;
}







// Animations

.animate-underline-emphasis {
display: inline-block;
position: relative;
padding-bottom: 3px;
line-height: 3rem;
}

@keyframes border {
from {
width: 0%;
}

to {
width: 100%;
}
}


.animate-underline-emphasis:after {
content: '';
display: block;
margin: auto;
height: 5px;
width: 0px;
background: #fff;
animation-name: border;
animation-duration: 500ms;
animation-delay: 1s;
animation-fill-mode: both;
}

@keyframes fade-color {
0% { color: rgba(68,68,68,.6); }
100% { color: white; }
}


.animate-color {
color: rgba(68,68,68,.6);
padding-left: 12px;
padding-right: 12px;
font-weight: 1000;
font-size: 36px;
animation: fade-color 3s;
animation-delay: 0s;
animation-fill-mode: both;
}

@keyframes fade-opacity {
0% { opacity: 1; }
100% { opacity: 0; }
}


#fade-to-white {
&::before {
position: absolute;
background-color: #000;
display: flex;
// width: 100%;
height: 100%;
// animation: fade-opacity 10s;
// animation-delay: 6s;
// animation-fill-mode: forwards;
}
}
1 change: 0 additions & 1 deletion src/App.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -598,7 +598,6 @@ export class App extends React.PureComponent<unknown, AppState> {

const isGameWon = newYearTrackedStats.carbonSavingsPercent >= 0.5;
const isEndOfGame = newYearTrackedStats.currentGameYear === this.state.gameSettings.totalGameYears + 1;

if (isGameWon) {
this.endGame(true, newYearTrackedStats, nextState);
} else if (isEndOfGame) {
Expand Down
50 changes: 25 additions & 25 deletions src/components/WinGame.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,7 +1,5 @@
// Import Swiper React components
import { Swiper, SwiperSlide, useSwiper } from 'swiper/react';
import { Swiper, SwiperSlide, useSwiper, useSwiperSlide } from 'swiper/react';
import { Navigation, Pagination, Scrollbar, A11y, Autoplay, EffectFade } from 'swiper/modules';
// Import Swiper styles
import 'swiper/css';
import 'swiper/css/pagination';
import 'swiper/css/navigation';
Expand Down Expand Up @@ -34,13 +32,11 @@ export default class WinGame extends React.Component<WinGameProps> {
render() {
return (
<div style={{width: '100%', height: '100vh', position: 'relative'}}>
{/* // todo deal with prefers reduced motion */}
<Swiper
modules={[Pagination, Navigation, Autoplay, EffectFade]}
spaceBetween={30}
effect='fade'
speed={500}
// onSlideChange={() => }
speed={1000}
centeredSlides={true}
autoplay={{
delay: 9000,
Expand All @@ -49,8 +45,6 @@ export default class WinGame extends React.Component<WinGameProps> {
pagination={{
clickable: true
}}
// onAutoplay={(swiper) => {
// }}
onAutoplayTimeLeft={this.onAutoplayTimeLeft}
navigation={true}
className='mySwiper'
Expand All @@ -62,8 +56,9 @@ export default class WinGame extends React.Component<WinGameProps> {
key={'slide1'}
className='slide-stat-div'
style={{marginTop: 0}}>
<span>Your company has met the decarbonization goal, reducing CO2e emissions by</span>
<UnderlineSpan text={`${this.props.endGameResults.carbonSavingsPercent}%`} animationClass='animate-underline-emphasis'></UnderlineSpan>
<span>Your company has met the decarbonization goal, reducing CO<sub>2</sub>e emissions by</span>
<UnderlineSpan text={`${this.props.endGameResults.carbonSavingsPercent}% `}
animationClass='animate-underline-emphasis'></UnderlineSpan>

</div>
]
Expand All @@ -77,9 +72,11 @@ export default class WinGame extends React.Component<WinGameProps> {
key={'slide2'}
className='slide-stat-div'>
<span>While spending
<UnderlineSpan text={`$${this.props.endGameResults.gameTotalSpending}`} animationClass='animate-underline-emphasis'></UnderlineSpan>
<UnderlineSpan text={`$${this.props.endGameResults.gameTotalSpending}`}
animationClass='animate-underline-emphasis'></UnderlineSpan>
on GHG reduction measures, your cost per kg reduced was
<UnderlineSpan text={`$${this.props.endGameResults.costPerCarbonSavings}/kg CO2e`} animationClass='animate-underline-emphasis'></UnderlineSpan>
<UnderlineSpan text={`$${this.props.endGameResults.costPerCarbonSavings}/kg CO<sub>2</sub>e`}
animationClass='animate-underline-emphasis'></UnderlineSpan>
</span>

</div>
Expand All @@ -95,7 +92,8 @@ export default class WinGame extends React.Component<WinGameProps> {
className='slide-stat-div'>
{this.props.endGameResults.projectedFinancedSpending?
<span>You are projected to spend
<UnderlineSpan text={`$${this.props.endGameResults.projectedFinancedSpending}`} animationClass='animate-underline-emphasis'></UnderlineSpan>
<UnderlineSpan text={`$${this.props.endGameResults.projectedFinancedSpending}`}
animationClass='animate-underline-emphasis'></UnderlineSpan>
on financed and renewed projects.
</span>
:
Expand All @@ -107,7 +105,8 @@ export default class WinGame extends React.Component<WinGameProps> {
className='slide-stat-div'
style={{marginTop: '3rem'}}>
<span>Your total spend including projections is
<UnderlineSpan text={`$${this.props.endGameResults.gameCurrentAndProjectedSpending}`} animationClass='animate-underline-emphasis'></UnderlineSpan>
<UnderlineSpan text={`$${this.props.endGameResults.gameCurrentAndProjectedSpending}`}
animationClass='animate-underline-emphasis'></UnderlineSpan>
</span>

</div>
Expand All @@ -129,7 +128,7 @@ export default class WinGame extends React.Component<WinGameProps> {
marginRight: 'auto',
lineHeight: '3rem'
}}>
You reduced CO<sub>2</sub>e emissions by <UnderlineSpan text={`${this.props.endGameResults.carbonSavingsPercent}%`} animationClass='animate-underline-emphasis'></UnderlineSpan>
You reduced CO<sub>2</sub><small>e</small> emissions by {this.props.endGameResults.carbonSavingsPercent}
</div>,
<div
key={'slide4b'}
Expand All @@ -141,7 +140,7 @@ export default class WinGame extends React.Component<WinGameProps> {
marginRight: 'auto',
lineHeight: '3rem'
}}>
Cost per kg was reduced to <UnderlineSpan text={`$${this.props.endGameResults.costPerCarbonSavings}/kg CO2e`} animationClass='animate-underline-emphasis'></UnderlineSpan>
Cost per kg was reduced to {this.props.endGameResults.costPerCarbonSavings}/kg CO<sub>2</sub>e
</div>,
<div
key={'slide4'}
Expand Down Expand Up @@ -182,16 +181,14 @@ export function newWinGameControl(): PageControl {
export interface UnderlineProps {text: string, animationClass: string}

function UnderlineSpan(props: UnderlineProps) {
// todo animationClass was ID animate-underline-emphasis
const swiperSlide = useSwiperSlide();
const animationCSS = swiperSlide.isActive? `${props.animationClass} animate-color` : '';
const underlinedText = {__html: props.text};
return (
<Fragment>
<span>&nbsp;&nbsp;</span>
<span
onAnimationStart={e => console.log('onAnimationStart', e)}
onAnimationIteration={e => console.log('onAnimationIteration', e)}
onAnimationEnd={e => console.log('onAnimationEnd', e)}
className={`${props.animationClass} animate-color`}>{props.text}</span>
<span>&nbsp;&nbsp;</span>
<span>&nbsp;</span>
<span className={animationCSS} dangerouslySetInnerHTML={underlinedText}></span>
<span>&nbsp;</span>
</Fragment>
)
}
Expand All @@ -200,6 +197,9 @@ function UnderlineSpan(props: UnderlineProps) {
export interface SlideProps {statDivs: ReactNode[]}

function SlideContent(props: SlideProps) {
const swiperSlide = useSwiperSlide();
const animationCSS = swiperSlide.isActive? `animate__animated animate__fadeIn animate__fast` : '';

return (
<div style={{
marginTop: '200px',
Expand Down Expand Up @@ -230,7 +230,7 @@ function SlideContent(props: SlideProps) {
animationDelay: '500ms',
opacity: 0,
}}
className='animate__animated animate__fadeInLeft animate__fast'
className={animationCSS}
>
{props.statDivs.map(div => {
return (div)
Expand Down

0 comments on commit f79ec81

Please sign in to comment.