Photo credit: Google

[{ "selector": ".wbalg-a", "duration": "500ms", "fill": "forwards", "delay": "1700ms", "keyframes": [ {"offset": 0, "transform": "translateY(calc(600px - 565px))", "opacity": "1"}, {"offset": 1, "transform": "translateY(0)", "opacity": "1"} ] }]

1. Use video.

[{ "selector": ".wsuzi-a", "duration": "500ms", "fill": "forwards", "delay": "500ms", "keyframes": [ {"offset": 0, "opacity": 0}, {"offset": 1, "opacity": "1"} ] }, { "selector": ".lssrz-a", "duration": "500ms", "fill": "forwards", "delay": "1000ms", "keyframes": [ {"offset": 0, "transform": "translateX(-325px)", "opacity": "1"}, {"offset": 1, "transform": "translateX(0)", "opacity": "1"} ] }, { "selector": ".tnzfl-a", "duration": "500ms", "fill": "forwards", "delay": "1000ms", "keyframes": [ {"offset": 0, "transform": "translateX(calc(360px - 78px))", "opacity": "1"}, {"offset": 1, "transform": "translateX(0)", "opacity": "1"} ] }, { "selector": ".ennpw-a", "duration": "500ms", "fill": "forwards", "delay": "1500ms", "keyframes": [ {"offset": 0, "transform": "translateY(calc(600px - 566px))", "opacity": "1"}, {"offset": 1, "transform": "translateY(0)", "opacity": "1"} ] }]

2. Try first-person storytelling

[{ "selector": ".atkxj-a", "duration": "500ms", "fill": "forwards", "delay": "500ms", "keyframes": [ {"offset": 0, "opacity": 0}, {"offset": 1, "opacity": "1"} ] }, { "selector": ".fgxkw-a", "duration": "500ms", "fill": "forwards", "delay": "1000ms", "keyframes": [ {"offset": 0, "transform": "translateX(-325px)", "opacity": "1"}, {"offset": 1, "transform": "translateX(0)", "opacity": "1"} ] }, { "selector": ".ldtlt-a", "duration": "500ms", "fill": "forwards", "delay": "1000ms", "keyframes": [ {"offset": 0, "transform": "translateX(calc(360px - 78px))", "opacity": "1"}, {"offset": 1, "transform": "translateX(0)", "opacity": "1"} ] }, { "selector": ".duxlr-a", "duration": "500ms", "fill": "forwards", "delay": "1500ms", "keyframes": [ {"offset": 0, "transform": "translateY(calc(600px - 566px))", "opacity": "1"}, {"offset": 1, "transform": "translateY(0)", "opacity": "1"} ] }]

3. Take advantage of your brand identity.

[{ "selector": ".ddkfr-a", "duration": "500ms", "fill": "forwards", "delay": "500ms", "keyframes": [ {"offset": 0, "opacity": 0}, {"offset": 1, "opacity": "1"} ] }, { "selector": ".difxm-a", "duration": "500ms", "fill": "forwards", "delay": "1000ms", "keyframes": [ {"offset": 0, "transform": "translateX(-325px)", "opacity": "1"}, {"offset": 1, "transform": "translateX(0)", "opacity": "1"} ] }, { "selector": ".rxpez-a", "duration": "500ms", "fill": "forwards", "delay": "1000ms", "keyframes": [ {"offset": 0, "transform": "translateX(calc(360px - 78px))", "opacity": "1"}, {"offset": 1, "transform": "translateX(0)", "opacity": "1"} ] }, { "selector": ".gzomn-a", "duration": "500ms", "fill": "forwards", "delay": "1500ms", "keyframes": [ {"offset": 0, "transform": "translateY(calc(600px - 566px))", "opacity": "1"}, {"offset": 1, "transform": "translateY(0)", "opacity": "1"} ] }]

4. Display infographics and dynamic visuals.

[{ "selector": ".usrxu-a", "duration": "500ms", "fill": "forwards", "delay": "500ms", "keyframes": [ {"offset": 0, "opacity": 0}, {"offset": 1, "opacity": "1"} ] }, { "selector": ".xcmes-a", "duration": "500ms", "fill": "forwards", "delay": "1000ms", "keyframes": [ {"offset": 0, "transform": "translateX(-325px)", "opacity": "1"}, {"offset": 1, "transform": "translateX(0)", "opacity": "1"} ] }, { "selector": ".waols-a", "duration": "500ms", "fill": "forwards", "delay": "1000ms", "keyframes": [ {"offset": 0, "transform": "translateX(calc(360px - 78px))", "opacity": "1"}, {"offset": 1, "transform": "translateX(0)", "opacity": "1"} ] }, { "selector": ".amncf-a", "duration": "500ms", "fill": "forwards", "delay": "1500ms", "keyframes": [ {"offset": 0, "transform": "translateY(calc(600px - 566px))", "opacity": "1"}, {"offset": 1, "transform": "translateY(0)", "opacity": "1"} ] }]

5. Get a boost from illustrations.

[{ "selector": ".tkllx-a", "duration": "500ms", "fill": "forwards", "delay": "500ms", "keyframes": [ {"offset": 0, "opacity": 0}, {"offset": 1, "opacity": "1"} ] }, { "selector": ".ieimf-a", "duration": "500ms", "fill": "forwards", "delay": "1000ms", "keyframes": [ {"offset": 0, "transform": "translateX(-325px)", "opacity": "1"}, {"offset": 1, "transform": "translateX(0)", "opacity": "1"} ] }, { "selector": ".uqqcr-a", "duration": "500ms", "fill": "forwards", "delay": "1000ms", "keyframes": [ {"offset": 0, "transform": "translateX(calc(360px - 78px))", "opacity": "1"}, {"offset": 1, "transform": "translateX(0)", "opacity": "1"} ] }, { "selector": ".xxbcr-a", "duration": "500ms", "fill": "forwards", "delay": "1500ms", "keyframes": [ {"offset": 0, "transform": "translateY(calc(600px - 566px))", "opacity": "1"}, {"offset": 1, "transform": "translateY(0)", "opacity": "1"} ] }]

6. Post quizzes and polls.

[{ "selector": ".otsfc-a", "duration": "500ms", "fill": "forwards", "delay": "500ms", "keyframes": [ {"offset": 0, "opacity": 0}, {"offset": 1, "opacity": "1"} ] }, { "selector": ".lqrok-a", "duration": "500ms", "fill": "forwards", "delay": "1000ms", "keyframes": [ {"offset": 0, "transform": "translateX(-325px)", "opacity": "1"}, {"offset": 1, "transform": "translateX(0)", "opacity": "1"} ] }, { "selector": ".imjkn-a", "duration": "500ms", "fill": "forwards", "delay": "1000ms", "keyframes": [ {"offset": 0, "transform": "translateX(calc(360px - 78px))", "opacity": "1"}, {"offset": 1, "transform": "translateX(0)", "opacity": "1"} ] }, { "selector": ".kadkp-a", "duration": "500ms", "fill": "forwards", "delay": "1500ms", "keyframes": [ {"offset": 0, "transform": "translateY(calc(600px - 566px))", "opacity": "1"}, {"offset": 1, "transform": "translateY(0)", "opacity": "1"} ] }]

7. Build excitement through animations.

[{ "selector": ".pedts-a", "duration": "500ms", "fill": "forwards", "delay": "500ms", "keyframes": [ {"offset": 0, "opacity": 0}, {"offset": 1, "opacity": "1"} ] }, { "selector": ".ogrwf-a", "duration": "500ms", "fill": "forwards", "delay": "1000ms", "keyframes": [ {"offset": 0, "transform": "translateX(-325px)", "opacity": "1"}, {"offset": 1, "transform": "translateX(0)", "opacity": "1"} ] }, { "selector": ".ikuid-a", "duration": "500ms", "fill": "forwards", "delay": "1000ms", "keyframes": [ {"offset": 0, "transform": "translateX(calc(360px - 78px))", "opacity": "1"}, {"offset": 1, "transform": "translateX(0)", "opacity": "1"} ] }, { "selector": ".encbp-a", "duration": "500ms", "fill": "forwards", "delay": "1500ms", "keyframes": [ {"offset": 0, "transform": "translateY(calc(600px - 566px))", "opacity": "1"}, {"offset": 1, "transform": "translateY(0)", "opacity": "1"} ] }]

Photo credit: Google

7 creative tips to improve your Web Stories

1. Use video.

Photo Credit: Google

2. Try first-person storytelling

Photo Credit: Google

3. Take advantage of your brand identity.

Photo Credit: Google

4. Display infographics and dynamic visuals.

Photo Credit: Google

5. Get a boost from illustrations.

Photo Credit: Google

6. Post quizzes and polls.

Photo Credit: Google

7. Build excitement through animations.

Photo Credit: Google