Deleted unnecessary pages, added animations (to be polled).

microsoft · Sep 28, 2023 · 99b5ba1 · 99b5ba1
1 parent e2309cd
commit 99b5ba1
Show file tree

Hide file tree

Showing 11 changed files with 330 additions and 126 deletions.
diff --git a/package.json b/package.json
@@ -43,6 +43,7 @@
 	"type": "module",
 	"dependencies": {
 		"animejs": "^3.2.1",
+		"saos": "^1.3.1",
 		"svelte-icons": "^2.1.0",
 		"sveltejs-adapter-ipfs": "^0.4.12",
 		"theme-change": "^2.5.0"

diff --git a/src/routes/+layout.svelte b/src/routes/+layout.svelte
@@ -5,6 +5,7 @@
 	import oneLight from 'svelte-highlight/styles/one-light';
 	import { fade } from 'svelte/transition';
 	import Analytics from './components/analytics.svelte';
+	export let data;
 </script>
 
 <svelte:head>

diff --git a/src/routes/+page.svelte b/src/routes/+page.svelte
@@ -5,12 +5,11 @@
 	import Performance from './components/performance.svelte';
 	import CrossPlatform from './components/cross-platform.svelte';
 	import GenerativeAi from './components/generative-ai-hero.svelte';
-	import TrainingInference from './components/training-inference.svelte';
 	import TrainingAndInference from './components/training-and-inference.svelte';
-	import WebMobile from './components/web-mobile.svelte';
-	import IoIosClose from 'svelte-icons/io/IoIosClose.svelte';
+	import IoIosClose from 'svelte-icons/io/IoIosClose.svelte'
 	import { onMount } from 'svelte';
 	import anime from 'animejs';
+	import Saos from 'saos';
 
 	let removetoast = (e: any) => {
 		e.target.parentNode.parentNode.remove();
@@ -33,10 +32,20 @@
 <Hero />
 <Customers />
 <CodeBlocks />
-<GenerativeAi />
-<CrossPlatform />
-<Performance />
-<TrainingAndInference />
+<Saos once={true} animation={'slide-in-left 1s cubic-bezier(0.250, 0.460, 0.450, 0.940) both'}>
+	<GenerativeAi />
+</Saos>
+<Saos once={true} animation={'slide-in-right 1s cubic-bezier(0.250, 0.460, 0.450, 0.940) both'}>
+	<CrossPlatform />
+</Saos>
+<Saos once={true} animation={'slide-in-left 1s cubic-bezier(0.250, 0.460, 0.450, 0.940) both'}>
+	<Performance />
+</Saos>
+
+<div class="divider px-10" />
+<Saos once={true} animation={'slide-in-bottom 1s cubic-bezier(0.250, 0.460, 0.450, 0.940) both'}>
+	<TrainingAndInference />
+</Saos>
 
 <div class="toast z-10 opacity-0 hidden">
 	<div class="alert alert-info">
@@ -58,3 +67,78 @@
 		<button aria-label="close" on:click={removetoast} class="w-8 h-8 pt-1"><IoIosClose /></button>
 	</div>
 </div>
+
+<style>
+	@-webkit-keyframes -global-slide-in-bottom {
+		0% {
+			-webkit-transform: translateY(1000px);
+			transform: translateY(1000px);
+			opacity: 0;
+		}
+		100% {
+			-webkit-transform: translateY(0);
+			transform: translateY(0);
+			opacity: 1;
+		}
+	}
+	@keyframes -global-slide-in-bottom {
+		0% {
+			-webkit-transform: translateY(1000px);
+			transform: translateY(1000px);
+			opacity: 0;
+		}
+		100% {
+			-webkit-transform: translateY(0);
+			transform: translateY(0);
+			opacity: 1;
+		}
+	}
+	@-webkit-keyframes -global-slide-in-left {
+		0% {
+			-webkit-transform: translateX(-1000px);
+			transform: translateX(-1000px);
+			opacity: 0;
+		}
+		100% {
+			-webkit-transform: translateX(0);
+			transform: translateX(0);
+			opacity: 1;
+		}
+	}
+	@keyframes -global-slide-in-left {
+		0% {
+			-webkit-transform: translateX(-1000px);
+			transform: translateX(-1000px);
+			opacity: 0;
+		}
+		100% {
+			-webkit-transform: translateX(0);
+			transform: translateX(0);
+			opacity: 1;
+		}
+	}
+	@-webkit-keyframes -global-slide-in-right {
+		0% {
+			-webkit-transform: translateX(1000px);
+			transform: translateX(1000px);
+			opacity: 0;
+		}
+		100% {
+			-webkit-transform: translateX(0);
+			transform: translateX(0);
+			opacity: 1;
+		}
+	}
+	@keyframes -global-slide-in-right {
+		0% {
+			-webkit-transform: translateX(1000px);
+			transform: translateX(1000px);
+			opacity: 0;
+		}
+		100% {
+			-webkit-transform: translateX(0);
+			transform: translateX(0);
+			opacity: 1;
+		}
+	}
+</style>
diff --git a/src/routes/components/customers.svelte b/src/routes/components/customers.svelte
@@ -5,6 +5,8 @@
 	import windowslogo from '../../images/logos/Windows_logo_and_wordmark.svg';
 	import huggingfacelogo from '../../images/logos/hf-logo-with-title.svg';
 	import { onMount } from 'svelte';
+	// Prevents animations from being messed up when they first start
+	let interact = false;
 	onMount(() => {
 		anime({
 			targets: '.partner',
@@ -18,21 +20,28 @@
 				return (l - i) * 50;
 			}
 		});
+		setTimeout(() => {
+			interact = true;
+		}, 1000);
 	});
 
 	let handleEnter = (e: any) => {
-		anime({
+		if (interact){
+			anime({
 			targets: e.target,
 			scale: 1.1,
 			duration: 1500
 		});
+		}
 	};
 	let handleLeave = (e: any) => {
-		anime({
+		if (interact){
+			anime({
 			targets: e.target,
 			scale: 1,
 			duration: 1500
 		});
+		}
 	};
 </script>
 

diff --git a/src/routes/components/training-and-inference.svelte b/src/routes/components/training-and-inference.svelte
@@ -7,14 +7,13 @@
 </script>
 
 <div class="container mx-auto px-10">
-	<div class="divider" />
 	<h1 class="text-4xl pb-2">ONNX Runtime Training</h1>
 	<p class="text-xl pb-4">
 		ONNX Runtime can be used to accelerate both large model training and on-device training.
 	</p>
 	<a href="./training" class="btn btn-primary">Learn more about ONNX Runtime Training →</a>
 	<div class="grid grid-cols-1 md:grid-cols-2 gap-10 mt-10 my-4 md:mx-10">
-		<div class="bg-slate-500 p-4">
+		<div class="bg-slate-500 p-4 rounded">
 			<div class="grid lg:grid-cols-4 place-items-center">
 				<div class="col-span-3">
 					<h1 class="text-2xl pb-2 text-slate-100">Large Model Training</h1>
@@ -29,7 +28,7 @@
 				</div>
 			</div>
 		</div>
-		<div class="bg-slate-500 p-4">
+		<div class="bg-slate-500 p-4 rounded">
 			<div class="grid md:grid-cols-4 place-items-center">
 				<div class="col-span-3">
 					<h1 class="text-2xl pb-2 text-slate-100">On-Device Training</h1>
@@ -54,7 +53,7 @@
 	</p>
 	<a href="./inference" class="btn btn-primary">Learn more about ONNX Runtime Inferencing →</a>
 	<div class="grid grid-cols-1 md:grid-cols-2 gap-10 mt-10 my-4 md:mx-10">
-		<div class="bg-slate-500 p-4">
+		<div class="bg-slate-500 p-4 rounded">
 			<div class="grid lg:grid-cols-4 place-items-center">
 				<div class="col-span-3">
 					<h1 class="text-2xl pb-2 text-slate-100">ONNX Runtime Web</h1>
@@ -68,7 +67,7 @@
 				</div>
 			</div>
 		</div>
-		<div class="bg-slate-500 p-4">
+		<div class="bg-slate-500 p-4 rounded">
 			<div class="grid md:grid-cols-4 place-items-center">
 				<div class="col-span-3">
 					<h1 class="text-2xl pb-2 text-slate-100">ONNX Runtime Mobile</h1>

diff --git a/src/routes/components/training-inference.svelte b/src/routes/components/training-inference.svelte
diff --git a/src/routes/components/web-mobile.svelte b/src/routes/components/web-mobile.svelte