diff --git a/samples/advanced-markers-animation/README.md b/samples/advanced-markers-animation/README.md
new file mode 100644
index 00000000..385d8923
--- /dev/null
+++ b/samples/advanced-markers-animation/README.md
@@ -0,0 +1,33 @@
+# Google Maps JavaScript Sample
+
+This sample is generated from @googlemaps/js-samples located at
+https://github.com/googlemaps-samples/js-api-samples.
+
+## Setup
+
+### Before starting run:
+
+`npm i`
+
+### Run an example on a local web server
+
+First `cd` to the folder for the sample to run, then:
+
+`npm start`
+
+### Build an individual example
+
+From `samples/`:
+
+`npm run build --workspace=sample-name/`
+
+### Build all of the examples.
+
+From `samples/`:
+
+`npm run build-all`
+
+## Feedback
+
+For feedback related to this sample, please open a new issue on
+[GitHub](https://github.com/googlemaps-samples/js-api-samples/issues).
diff --git a/samples/advanced-markers-animation/advanced-markers-animation.jshtml b/samples/advanced-markers-animation/advanced-markers-animation.jshtml
new file mode 100644
index 00000000..9b58dd32
--- /dev/null
+++ b/samples/advanced-markers-animation/advanced-markers-animation.jshtml
@@ -0,0 +1,19 @@
+
+{% spaceless %}{% include "maps/documentation/javascript/examples/full/_apikey.html" %}{% endspaceless %}
+
+
+
+
+ Advanced Markers CSS animation
+
+
+
+{% includecode content_path="maps/documentation/javascript/examples/samples/advanced-markers-animation/index.html" region_tag="maps_advanced_markers_animation_body" html_escape="False" %}
+{{ api_loader_dynamic }}
+
+
+
diff --git a/samples/advanced-markers-animation/index.html b/samples/advanced-markers-animation/index.html
new file mode 100644
index 00000000..08bb0943
--- /dev/null
+++ b/samples/advanced-markers-animation/index.html
@@ -0,0 +1,25 @@
+
+
+
+
+
+ Advanced Markers CSS Animation
+
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/samples/advanced-markers-animation/index.js b/samples/advanced-markers-animation/index.js
new file mode 100644
index 00000000..558e26a9
--- /dev/null
+++ b/samples/advanced-markers-animation/index.js
@@ -0,0 +1 @@
+
diff --git a/samples/advanced-markers-animation/index.ts b/samples/advanced-markers-animation/index.ts
new file mode 100644
index 00000000..c11f3b56
--- /dev/null
+++ b/samples/advanced-markers-animation/index.ts
@@ -0,0 +1,109 @@
+/**
+ * @license
+ * Copyright 2019 Google LLC. All Rights Reserved.
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+// [START maps_advanced_markers_animation]
+/**
+ * Returns a random lat lng position within the map bounds.
+ * @param {!google.maps.Map} map
+ * @return {!google.maps.LatLngLiteral}
+ */
+ function getRandomPosition(map) {
+ const bounds = map.getBounds();
+ const minLat = bounds.getSouthWest().lat();
+ const minLng = bounds.getSouthWest().lng();
+ const maxLat = bounds.getNorthEast().lat();
+ const maxLng = bounds.getNorthEast().lng();
+
+ const latRange = maxLat - minLat;
+
+ // Note: longitude can span from a positive longitude in the west to a
+ // negative one in the east. e.g. 150lng (150E) <-> -30lng (30W) is a large
+ // span that covers the whole USA.
+ let lngRange = maxLng - minLng;
+ if (maxLng < minLng) {
+ lngRange += 360;
+ }
+
+ return {
+ lat: minLat + Math.random() * latRange,
+ lng: minLng + Math.random() * lngRange,
+ };
+ }
+
+ const total = 100;
+ const intersectionObserver = new IntersectionObserver((entries) => {
+ for (const entry of entries) {
+ if (entry.isIntersecting) {
+ entry.target.classList.add('drop');
+ intersectionObserver.unobserve(entry.target);
+ }
+ }
+ });
+
+ async function initMap(): Promise {
+ // Request needed libraries.
+ const { Map } = await google.maps.importLibrary("maps") as google.maps.MapsLibrary;
+ const { AdvancedMarkerElement } = await google.maps.importLibrary("marker") as google.maps.MarkerLibrary;
+
+ const position = {lat: 37.4242011827985, lng: -122.09242296450893};
+
+ const map = new Map(document.getElementById("map") as HTMLElement, {
+ zoom: 14,
+ center: position,
+ mapId: '4504f8b37365c3d0',
+ });
+
+ // Create 100 markers to animate.
+ google.maps.event.addListenerOnce(map, 'idle', () => {
+ for (let i = 0; i < 100; i++) {
+ createMarker(map, AdvancedMarkerElement);
+ }
+ });
+
+ // Add a button to reset the example.
+ const controlDiv = document.createElement("div");
+ const controlUI = document.createElement("button");
+
+ controlUI.classList.add("ui-button");
+ controlUI.innerText = "Reset the example";
+ controlUI.addEventListener("click", () => {
+ // Reset the example by reloading the map iframe.
+ refreshMap();
+ });
+ controlDiv.appendChild(controlUI);
+ map.controls[google.maps.ControlPosition.TOP_CENTER].push(controlDiv);
+ }
+
+ function createMarker(map, AdvancedMarkerElement) {
+ const advancedMarker = new AdvancedMarkerElement({
+ position: getRandomPosition(map),
+ map: map,
+ });
+ const content = advancedMarker.content as HTMLElement;
+ content.style.opacity = '0';
+ content.addEventListener('animationend', (event) => {
+ content.classList.remove('drop');
+ content.style.opacity = '1';
+ });
+ const time = 2 + Math.random(); // 2s delay for easy to see the animation
+ content.style.setProperty('--delay-time', time +'s');
+ intersectionObserver.observe(content);
+ }
+
+ function refreshMap() {
+ // Refresh the map.
+ const mapContainer = document.getElementById('mapContainer');
+ const map = document.getElementById('map');
+ map!.remove();
+ const mapDiv = document.createElement('div');
+ mapDiv.id = 'map';
+ mapContainer!.appendChild(mapDiv);
+ initMap();
+ }
+
+initMap();
+// [END maps_advanced_markers_animation]
+export { };
\ No newline at end of file
diff --git a/samples/advanced-markers-animation/package.json b/samples/advanced-markers-animation/package.json
new file mode 100644
index 00000000..e592f669
--- /dev/null
+++ b/samples/advanced-markers-animation/package.json
@@ -0,0 +1,14 @@
+{
+ "name": "@js-api-samples/advanced-markers-animation",
+ "version": "1.0.0",
+ "scripts": {
+ "build": "tsc && bash ../jsfiddle.sh advanced-markers-animation && bash ../app.sh advanced-markers-animation && bash ../docs.sh advanced-markers-animation && npm run build:vite --workspace=. && bash ../dist.sh advanced-markers-animation",
+ "test": "tsc && npm run build:vite --workspace=.",
+ "start": "tsc && vite build --base './' && vite",
+ "build:vite": "vite build --base './'",
+ "preview": "vite preview"
+ },
+ "dependencies": {
+
+ }
+}
diff --git a/samples/advanced-markers-animation/style.css b/samples/advanced-markers-animation/style.css
new file mode 100644
index 00000000..5bdd67f2
--- /dev/null
+++ b/samples/advanced-markers-animation/style.css
@@ -0,0 +1,91 @@
+/**
+ * @license
+ * Copyright 2019 Google LLC. All Rights Reserved.
+ * SPDX-License-Identifier: Apache-2.0
+ */
+/* [START maps_advanced_markers_animation] */
+/*
+ * Always set the map height explicitly to define the size of the div element
+ * that contains the map.
+ */
+#map {
+ height: 100%;
+}
+
+/*
+ * Optional: Makes the sample page fill the window.
+ */
+html,
+body {
+ height: 100%;
+ margin: 0;
+ padding: 0;
+}
+
+/* set the default transition time */
+:root {
+ --delay-time: .5s;
+}
+
+#map {
+ height: 100%;
+}
+
+#mapContainer {
+ height: 100%;
+}
+
+html,
+body {
+ height: 100%;
+ margin: 0;
+ padding: 0;
+}
+
+@keyframes drop {
+ 0% {
+ transform: translateY(-200px) scaleY(0.9);
+ opacity: 0;
+ }
+ 5% {
+ opacity: 0.7;
+ }
+ 50% {
+ transform: translateY(0px) scaleY(1);
+ opacity: 1;
+ }
+ 65% {
+ transform: translateY(-17px) scaleY(0.9);
+ opacity: 1;
+ }
+ 75% {
+ transform: translateY(-22px) scaleY(0.9);
+ opacity: 1;
+ }
+ 100% {
+ transform: translateY(0px) scaleY(1);
+ opacity: 1;
+ }
+}
+.drop {
+ animation: drop 0.3s linear forwards var(--delay-time);
+}
+
+.ui-button {
+ background-color: #fff;
+ border: 0;
+ border-radius: 2px;
+ box-shadow: 0 1px 4px -1px rgba(0, 0, 0, 0.3);
+ margin: 10px;
+ padding: 0 0.5em;
+ font: 400 18px Roboto, Arial, sans-serif;
+ overflow: hidden;
+ height: 40px;
+ cursor: pointer;
+}
+
+.ui-button:hover {
+ background: rgb(235, 235, 235);
+}
+
+/* [END maps_advanced_markers_animation] */
\ No newline at end of file
diff --git a/samples/advanced-markers-animation/tsconfig.json b/samples/advanced-markers-animation/tsconfig.json
new file mode 100644
index 00000000..366aabb0
--- /dev/null
+++ b/samples/advanced-markers-animation/tsconfig.json
@@ -0,0 +1,17 @@
+{
+ "compilerOptions": {
+ "module": "esnext",
+ "target": "esnext",
+ "strict": true,
+ "noImplicitAny": false,
+ "lib": [
+ "es2015",
+ "esnext",
+ "es6",
+ "dom",
+ "dom.iterable"
+ ],
+ "moduleResolution": "Node",
+ "jsx": "preserve"
+ }
+}