Skip to content

Instantly share code, notes, and snippets.

Avatar

Tyler Marshal Murphy marshallmurphy

View GitHub Profile
View App.js
//...
return (
<div className={`${styles.App} + ' ' + ${darkMode ? styles.darkBg : styles.lightBg}`}> // here
<div onClick={() => animate()}>
<Lottie
options={defaultOptions}
height={400}
width={400}
isClickToPauseDisabled={true}
playSegments={sequence}
View App.js
//...
if (stop === 1 || stop === 90) {
start = 0;
stop = 60;
setDarkMode(true) // here
} else {
start = 60;
stop = 90;
setDarkMode(false) // and here
View App.js
//...
import styles from './App.module.css';
function App() {
const [darkMode, setDarkMode] = useState(false) // here
const [sequence, setSequence] = useState({
segments: [0, 1],
forceFlag: true
})
View App.js
import React, { useState } from 'react';
import Lottie from 'react-lottie-segments';
import animationData from './lotties/toggle.json';
import styles from './App.module.css'; // here
//...
View App.module.css
.App {
text-align: center;
min-height: 100vh;
transition: background-color 1s;
}
.darkBg {
background-color: #282c34;
}
.lightBg {
background-color: #fff;
View App.js
const animate = () => {
let start = sequence.segments[0];
let stop = sequence.segments[1];
if (stop === 1 || stop === 90) {
start = 0;
stop = 60;
} else {
start = 60;
stop = 90;
View App.js
const animate = () => {
let start = sequence.segments[0];
let stop = sequence.segments[1];
// here
if (stop === 1 || stop === 90) {
start = 0;
stop = 45;
} else {
start = 45;
View App.js
const animate = () => {
let start = sequence.segments[0];
let stop = sequence.segments[1];
// do stuff here
setSequence({
segments: [start, stop],
View App.js
//...
const options = {
loop: false,
autoplay: false,
animationData: animationData,
rendererSettings: {
preserveAspectRatio: "xMidYMid slice"
}
};
View App.js
//...
const options = {
loop: false,
autoplay: false,
animationData: animationData,
rendererSettings: {
preserveAspectRatio: "xMidYMid slice"
}
};