The Story of Google Web Stories

Setting up local server

[{"selector":"#anim-03828b25-6413-4089-a056-f1d5086356c7","keyframes":{"opacity":[0,1]},"delay":300,"duration":300,"easing":"cubic-bezier(0.2, 0.6, 0.0, 1)","fill":"both"}] [{"selector":"#anim-e4d771c6-122f-43af-97bb-e9cd31862eba","keyframes":{"transform":["translate3d(-115.09434%, 0px, 0)","translate3d(0px, 0px, 0)"]},"delay":300,"duration":300,"easing":"cubic-bezier(0.2, 0.6, 0.0, 1)","fill":"both"}] [{"selector":"#anim-1978cd88-8b46-4c3f-ad02-3769c44536cf","keyframes":{"opacity":[0,1]},"delay":300,"duration":600,"easing":"cubic-bezier(0.2, 0.6, 0.0, 1)","fill":"both"}] [{"selector":"#anim-c5a9bf85-9307-4686-84a5-5f67efbd6b98","keyframes":{"transform":["translate3d(-117.40506%, 0px, 0)","translate3d(0px, 0px, 0)"]},"delay":300,"duration":600,"easing":"cubic-bezier(0.2, 0.6, 0.0, 1)","fill":"both"}] [{"selector":"#anim-a5e9b9d6-853d-4212-8058-e2b8e65592c2","keyframes":{"opacity":[0,1]},"delay":900,"duration":600,"easing":"cubic-bezier(0.2, 0.6, 0.0, 1)","fill":"both"}] [{"selector":"#anim-1e8b9826-d2da-465d-956b-e1aeea0b875b","keyframes":{"transform":["translate3d(-127.49999%, 0px, 0)","translate3d(0px, 0px, 0)"]},"delay":900,"duration":600,"easing":"cubic-bezier(0.2, 0.6, 0.0, 1)","fill":"both"}] [{"selector":"#anim-44ebb21b-a6e7-4390-9c7f-2cacd2c31354","keyframes":{"opacity":[0,1]},"delay":1200,"duration":600,"easing":"cubic-bezier(0.2, 0.6, 0.0, 1)","fill":"both"}] [{"selector":"#anim-8c906094-563a-4415-bac8-6196a72cef75","keyframes":{"transform":["translate3d(-127.49999%, 0px, 0)","translate3d(0px, 0px, 0)"]},"delay":1200,"duration":600,"easing":"cubic-bezier(0.2, 0.6, 0.0, 1)","fill":"both"}] “Web Server for Chrome” Google Chrome app (use this extension) A local HTTP Python server Apache nginx

First Project

[{"selector":"#anim-37536b93-3311-4f06-9a01-98e6ec486c55","keyframes":{"transform":["translate3d(-124.00001%, 0px, 0)","translate3d(0px, 0px, 0)"]},"delay":0,"duration":600,"easing":"cubic-bezier(0.4, 0.4, 0.0, 1)","fill":"both"}] [{"selector":"#anim-09842b56-fd86-4d53-a1ee-0584cfd6fa1c","keyframes":{"opacity":[0,1]},"delay":0,"duration":600,"easing":"cubic-bezier(0.4, 0.4, 0.0, 1)","fill":"both"}] [{"selector":"#anim-188ce2c9-a2eb-4e35-aa27-bd902d14761c","keyframes":{"transform":["scale(0.15)","scale(1)"]},"delay":0,"duration":600,"easing":"cubic-bezier(0.4, 0.4, 0.0, 1)","fill":"forwards"}] Download Web Stories Demo from amp.dev /static/files/tutorials/amp-pets-story.zip Check the complete story first: pets-completed.html

Meta information

[{"selector":"#anim-dd53f0cf-fe74-44c1-9167-2cc893f87707","keyframes":{"opacity":[0,1]},"delay":300,"duration":600,"easing":"cubic-bezier(0.2, 0.6, 0.0, 1)","fill":"both"}] [{"selector":"#anim-9126f8b6-0f80-42fe-9887-5291e40f4c93","keyframes":{"transform":["translate3d(-124.49999%, 0px, 0)","translate3d(0px, 0px, 0)"]},"delay":300,"duration":600,"easing":"cubic-bezier(0.2, 0.6, 0.0, 1)","fill":"both"}] [{"selector":"#anim-30e40ce1-e7ba-48b5-977a-16ce612ad48f","keyframes":{"opacity":[0,1]},"delay":300,"duration":600,"easing":"cubic-bezier(0.2, 0.6, 0.0, 1)","fill":"both"}] [{"selector":"#anim-15ca0244-55a0-4188-b87e-caafd62a0c2a","keyframes":{"transform":["translate3d(-115.78948%, 0px, 0)","translate3d(0px, 0px, 0)"]},"delay":300,"duration":600,"easing":"cubic-bezier(0.2, 0.6, 0.0, 1)","fill":"both"}] [{"selector":"#anim-fc92449c-ed8c-45f1-9f90-66cb8a259954","keyframes":{"opacity":[0,1]},"delay":600,"duration":600,"easing":"cubic-bezier(0.2, 0.6, 0.0, 1)","fill":"both"}] [{"selector":"#anim-b90da860-ef63-4c13-8723-a59f18f50a5e","keyframes":{"transform":["translate3d(-124.00001%, 0px, 0)","translate3d(0px, 0px, 0)"]},"delay":600,"duration":600,"easing":"cubic-bezier(0.2, 0.6, 0.0, 1)","fill":"both"}] [{"selector":"#anim-1bc5e541-af69-47b0-be08-75a2e6b28f0e","keyframes":{"opacity":[0,1]},"delay":1200,"duration":600,"easing":"cubic-bezier(0.2, 0.6, 0.0, 1)","fill":"both"}] [{"selector":"#anim-d6f7795a-b2c8-4036-8a01-70d348d70624","keyframes":{"transform":["translate3d(-120%, 0px, 0)","translate3d(0px, 0px, 0)"]},"delay":1200,"duration":600,"easing":"cubic-bezier(0.2, 0.6, 0.0, 1)","fill":"both"}] The title of the story The name of the publisher The publisher’s logo A poster image of story