2f:null 30:["$","title",null,{"children":"Animation Study: Star Wars Opening Crawl (GSAP + Howler.js) | Ri | Observable"}] 35:T66f,animation = { await visibility(); play; // Set up Howler audio // Stop playing when we re-run the cell. This prevents overlapping audio. const themeSong = new Howl({ src: [theme], volume: .75, html5: true, sprite: { mainTheme: [200, 999999] } }); themeSong.stop(); // Helper function to select Nodes const dv = sel => div.querySelector(sel); // Initialize timeline let tl = gsap.timeline(); // Setup initial appearance tl.set(dv("#text-container"), { transformPerspective: 250, rotationX: 35 }); tl.set(dv("#short-intro"), { opacity: 0 }); tl.set(dv("#long-intro"), { opacity: 0 }); tl.set(dv("#logo"), { opacity: 0, transformOrigin: "50% 50%", translateX: -width / 1.1, translateY: -height / 2.2 }); // Start GSAP animations if (true) { tl.fromTo( dv("#short-intro"), { opacity: 0 }, { opacity: 1.0, duration: 3 } ); tl.fromTo( dv("#short-intro"), { opacity: 1 }, { opacity: 0, duration: 3 } ); } tl.fromTo( dv("#logo"), { scale: 3.0, opacity: 1 }, { scale: .25, duration: 10, onStart: () => { themeSong.play('mainTheme'); } } ); // Fade out way later tl.to(dv('#logo'), { opacity: 0, duration: 2 }, 17); tl.fromTo( dv("#long-intro"), { opacity: 1, translateY: 500 }, { opacity: 1, translateY: -1800, duration: 75 } ); // Fade out way later tl.to(dv('#long-intro'), { opacity: 0, duration: 6 }, 76); invalidation.then(() => { themeSong.stop(); tl.kill(); }); }36:T45c,html` `37:[] 33:{"id":"b4d714ec60f0c5c9","slug":"animation-study-star-wars-opening-crawl-gsap-howler-js","title":"Animation Study: Star Wars Opening Crawl (GSAP + Howler.js)","thumbnail":"56ab2e702fb512f00cd8f052d79d32e3d8ffcddd1dfd2a6b85f047d058e4912c","access_level":"public","create_time":"$D2020-11-21T20:34:14.293Z","update_time":"$D2021-07-27T16:25:03.261Z","view_time":null,"first_public_time":"$D2020-11-21T23:27:42.055Z","has_unpublished_edits":null,"fork":false,"stars":1,"starred":false,"owner":{"type":"team","id":"7a5a5a266053fb35","login":"riledigital","name":"Ri","avatar_url":"https://avatars-next.observableusercontent.com/87b813ad2cf4fc91f9ba3492ee7a7821963c890a8b1c8fa84df022812727095d","tier":"starter_2024"},"version":691,"publish_version":691,"role":null,"authored":false,"authors":[{"type":"individual","id":"d301c97fd368361d","login":"riledigital","name":"Ri","avatar_url":"https://avatars-next.observableusercontent.com/87b813ad2cf4fc91f9ba3492ee7a7821963c890a8b1c8fa84df022812727095d","tier":null}],"members":[{"type":"individual","id":"d301c97fd368361d","login":"riledigital","name":"Ri","avatar_url":"https://avatars-next.observableusercontent.com/87b813ad2cf4fc91f9ba3492ee7a7821963c890a8b1c8fa84df022812727095d","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":1,"collection":null,"type":"notebook","body":{"title":"Animation Study: Star Wars Opening Crawl (GSAP + Howler.js)","cells":[{"id":0,"value":"md`# Animation Study: Star Wars Opening Crawl (GSAP + Howler.js)\n\n# A long time ago, in an Observable notebook far, far away...\n\n\nThis is a remake of the Star Wars opening, created with SVG, HTML, Howler.js, and the GSAP animation library. \n\nSound on! If the animation is frozen on load, simply run the cell to play.\n\nThanks to [Duy Nguyen's intro to GSAP on Observable](https://observablehq.com/@duynguyen1678/hello-gsap) and [@jobleonard's notes on Howler.js](https://observablehq.com/@jobleonard/howler-js)\n\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":677,"value":"viewof play = html``","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2,"value":"$35","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":568,"value":"div = html`\n

\nA long time ago in a galaxy far,
far away...\n

\n\n

\n It is a period of civil war.
Rebel spaceships, striking from a hidden base, have won their first victory against the evil Galactic Empire.

During the battle, Rebel spies managed to steal secret plans to the Empire’s ultimate weapon, the DEATH STAR, an armored space station with enough power to destroy an entire planet. \n

Pursued by the Empire's sinister agents, Princess Leia races home aboard her starship, custodian of the stolen plans that can save her people and restore freedom to the galaxy...

\n\n\n

\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":14,"value":"$36","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":110,"value":"gsap = gs.gsap","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":85,"value":"gs = require('gsap@3.5.0/dist/gsap.js')","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":10,"value":"height = 640","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":347,"value":"logoSvg = {\n const text = await (await fetch(\n \"https://upload.wikimedia.org/wikipedia/commons/6/6c/Star_Wars_Logo.svg\"\n )).text();\n\n const document = new DOMParser().parseFromString(text, 'image/svg+xml');\n const svg = d3.select(document.documentElement).remove();\n svg.attr('width', width);\n svg.attr('height', height);\n svg.attr('viewBox', [0, 0, 700, 450]);\n\n svg.select('#Layer_3').remove();\n\n return svg.node();\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":355,"value":"d3 = require(\"d3@6\")","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":506,"value":"theme = \"https://archive.org/download/StarWarsThemeSongByJohnWilliams/Star%20Wars%20Theme%20Song%20By%20John%20Williams.mp3\"","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":507,"value":"_howler = require('howler@2.1.1/dist/howler.js');","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":509,"value":"Howler = _howler.Howler","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":511,"value":"Howl = _howler.Howl","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":114,"value":"sw = fetch(\n \"https://upload.wikimedia.org/wikipedia/commons/6/6c/Star_Wars_Logo.svg\"\n).then(resp => resp.text())","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W37","stdlib":"1","titling":"auto"}} 34:"$33:body"