5 Steps to Create Your First Web Story

[{"selector":"#anim-464cb535-6520-4a51-84a2-b8aea7c9af3c","keyframes":{"opacity":[0,1]},"delay":100,"duration":2000,"easing":"cubic-bezier(0.2, 0.6, 0.0, 1)","fill":"both"}] [{"selector":"#anim-d7b5d409-6fc0-4ded-864e-31bfd22c8327","keyframes":{"transform":["rotate(-359deg) translate3d(0px, 192.27737%, 0) rotate(359deg)","rotate(-359deg) translate3d(0px, 0px, 0) rotate(359deg)"]},"delay":100,"duration":2000,"easing":"cubic-bezier(0.2, 0.6, 0.0, 1)","fill":"both"}]

Web Stories are new aged form of story telling, a visually rich, full-screen content format for the web, which allow you to tap or swipe through stories.

[{"selector":"#anim-732836b1-1c45-4e3c-8442-3729d08f9dad","keyframes":{"opacity":[0,1]},"delay":100,"duration":2000,"easing":"cubic-bezier(0.2, 0.6, 0.0, 1)","fill":"both"}] [{"selector":"#anim-9c333bc4-9001-4487-80ef-d29da01db6b6","keyframes":{"transform":["rotate(-1deg) translate3d(0px, 229.56051%, 0) rotate(1deg)","rotate(-1deg) translate3d(0px, 0px, 0) rotate(1deg)"]},"delay":100,"duration":2000,"easing":"cubic-bezier(0.2, 0.6, 0.0, 1)","fill":"both"}]

HOW TO CREATE WEB STORIES 1. Create a multi-page story by using the amp-story component.

[{"selector":"#anim-f9d96b8a-4d59-42d2-94ab-f8c55728cdf2","keyframes":{"opacity":[0,1]},"delay":200,"duration":2000,"easing":"cubic-bezier(0.2, 0.6, 0.0, 1)","fill":"both"}] [{"selector":"#anim-3c0ba20f-11fc-4dcc-b554-1dc6a464902c","keyframes":{"transform":["translate3d(0px, 769.00552%, 0)","translate3d(0px, 0px, 0)"]},"delay":200,"duration":2000,"easing":"cubic-bezier(0.2, 0.6, 0.0, 1)","fill":"both"}] [{"selector":"#anim-77ecf1c7-97e5-49e0-9293-416c7e493835","keyframes":{"opacity":[0,1]},"delay":100,"duration":2000,"easing":"cubic-bezier(0.2, 0.6, 0.0, 1)","fill":"both"}] [{"selector":"#anim-21997015-4b97-4dd9-bcf1-2729369f0a00","keyframes":{"transform":["translate3d(0px, 101.23272%, 0)","translate3d(0px, 0px, 0)"]},"delay":100,"duration":2000,"easing":"cubic-bezier(0.2, 0.6, 0.0, 1)","fill":"both"}] -

2. Create visual effects with multiple layers in a page.

[{"selector":"#anim-9f433343-b9b7-4d53-93f2-9e6605632f3c","keyframes":{"opacity":[0,1]},"delay":100,"duration":2000,"easing":"cubic-bezier(0.2, 0.6, 0.0, 1)","fill":"both"}] [{"selector":"#anim-3ee3c77a-c91b-42a9-9834-9d186199cae8","keyframes":{"transform":["translate3d(0px, 110.75180%, 0)","translate3d(0px, 0px, 0)"]},"delay":100,"duration":2000,"easing":"cubic-bezier(0.2, 0.6, 0.0, 1)","fill":"both"}]

3. Lay out elements in a page by using layer templates. You can add audio, animation, text and a lot more.

[{"selector":"#anim-8e9ce5b0-1d29-492e-a00b-af7ce6e9f590","keyframes":{"opacity":[0,1]},"delay":100,"duration":2000,"easing":"cubic-bezier(0.2, 0.6, 0.0, 1)","fill":"both"}] [{"selector":"#anim-3b868812-eb10-43ae-8d50-550aef1fc605","keyframes":{"transform":["translate3d(0px, 116.82045%, 0)","translate3d(0px, 0px, 0)"]},"delay":100,"duration":2000,"easing":"cubic-bezier(0.2, 0.6, 0.0, 1)","fill":"both"}]

4. Add audio, video or GIFs that plays while a page is viewed.

[{"selector":"#anim-3ec57cdc-5e92-4805-b8a6-a0b0f3b6b9ff","keyframes":{"opacity":[0,1]},"delay":100,"duration":2000,"easing":"cubic-bezier(0.2, 0.6, 0.0, 1)","fill":"both"}] [{"selector":"#anim-390a5178-1e5c-4831-97d1-250fa1906b07","keyframes":{"transform":["translate3d(0px, 150.30405%, 0)","translate3d(0px, 0px, 0)"]},"delay":100,"duration":2000,"easing":"cubic-bezier(0.2, 0.6, 0.0, 1)","fill":"both"}]

5. Animate elements on a page. Publish and share with the world.

[{"selector":"#anim-53256bdb-e927-4efc-a119-d8af11d0d5e8","keyframes":{"opacity":[0,1]},"delay":200,"duration":2000,"easing":"cubic-bezier(0.2, 0.6, 0.0, 1)","fill":"both"}] [{"selector":"#anim-113a1862-4802-483c-b632-9b97a75b206b","keyframes":{"transform":["translate3d(0px, 789.78915%, 0)","translate3d(0px, 0px, 0)"]},"delay":200,"duration":2000,"easing":"cubic-bezier(0.2, 0.6, 0.0, 1)","fill":"both"}] [{"selector":"#anim-d88312a3-1493-408e-b086-9a47ed9e38cb","keyframes":{"opacity":[0,1]},"delay":100,"duration":2000,"easing":"cubic-bezier(0.2, 0.6, 0.0, 1)","fill":"both"}] [{"selector":"#anim-d45aea84-2ab7-4514-be3b-dd808335ca0d","keyframes":{"transform":["translate3d(0px, 168.38460%, 0)","translate3d(0px, 0px, 0)"]},"delay":100,"duration":2000,"easing":"cubic-bezier(0.2, 0.6, 0.0, 1)","fill":"both"}] -

“

[{"selector":"#anim-9caf0746-42ef-4492-be85-47a65c5944b6","keyframes":{"opacity":[0,1]},"delay":500,"duration":600,"easing":"cubic-bezier(0.2, 0.6, 0.0, 1)","fill":"both"}] [{"selector":"#anim-c0b7eee4-94c3-421e-9e1c-2a3c646e54c5","keyframes":{"transform":["translate3d(-114.3662%, 0px, 0)","translate3d(0px, 0px, 0)"]},"delay":500,"duration":600,"easing":"cubic-bezier(0.2, 0.6, 0.0, 1)","fill":"both"}] [{"selector":"#anim-d7a0d5d9-5fa3-4229-b9cc-c6441f56e04b","keyframes":{"transform":["translate3d(0px, 35%, 0)","translate3d(0px, 0px, 0)"]},"delay":500,"direction":"normal","duration":600,"easing":"cubic-bezier(0.645, 0.045, 0.355, 1)","fill":"both"}] [{"selector":"#anim-01160eae-8561-49da-a879-37e401a57c44","keyframes":{"opacity":[0,1]},"delay":800,"direction":"normal","duration":300,"easing":"cubic-bezier(0.645, 0.045, 0.355, 1)","fill":"both"}] To consume content, you can tap or swipe through Web Stories. Google supports Web Stories, so you might find them across Google Search and Discover.