Made animation by type (#738)

Co-authored-by: Ruben Fiszel <[email protected]>

src/landing/AppAnimation.tsx

@@ -20,8 +20,8 @@ import { SiTypescript } from 'react-icons/si';
 import { twMerge } from 'tailwind-merge';
 import { motion } from 'framer-motion';
 
-export default function AppAnimation({ active }) {
-	const [step, setStep] = React.useState(0);
+export default function AppAnimation({ active, only }) {
+	const [step, setStep] = React.useState(only ? 0 : -1);
 	const [scriptStep, setScriptStep] = React.useState(0);
 	const [buttonName, setButtonName] = React.useState('Press me');
 	const [clicked, setClicked] = React.useState(false);
@@ -136,7 +136,7 @@ export default function AppAnimation({ active }) {
 		}
 	};
 
-	useAnimateScroll(active, steps, appScrollCount, flowScrollCount + scriptScrollCount);
+	useAnimateScroll(active, steps, appScrollCount, only ? 0 : flowScrollCount + scriptScrollCount);
 
 	return (
 		<div className=" bg-gradient-to-br from-orange-200 to-orange-400 dark:from-orange-700 dark:to-orange-600 w-full rounded-lg p-6 shadow-inner overflow-hidden  h-[550px]">

src/landing/FlowAnimation.tsx

@@ -48,7 +48,7 @@ const initialEdges = [
 	{ id: '6-7', source: '6', target: '7' }
 ];
 
-export default function FlowAnimation({ active }) {
+export default function FlowAnimation({ active, only }) {
 	const [initialNodes, setInitialNodes] = React.useState<
 		Array<{
 			id: string;
@@ -110,7 +110,7 @@ export default function FlowAnimation({ active }) {
 
 	const [windowIndex, setWindowIndex] = React.useState(0);
 	const [bgColor, setBgColor] = React.useState('black');
-	const [step, setStep] = React.useState(-1);
+	const [step, setStep] = React.useState(only ? 0 : -1);
 	const nodeTypes = useMemo(() => ({ textUpdater: Node }), []);
 	const [selectedFile, setSelectedFile] = React.useState('your_flow.yaml');
 
@@ -170,6 +170,7 @@ schema:
 						i === 7 ? { ...node, data: { ...node.data, selected: true } } : node
 					)
 				);
+
 				setStep(0);
 			},
 			rollback: () => {
@@ -318,7 +319,7 @@ schema:
 		}
 	];
 
-	useAnimateScroll(active, steps, flowScrollCount, scriptScrollCount);
+	useAnimateScroll(active, steps, flowScrollCount, only ? 0 : scriptScrollCount);
 
 	const currentText = `import Stripe from 'stripe';