Guide

Dynamic Twitch overlay slide in webflow (Video)

By 5 December, 2016 No Comments
dynamic Twitch overlay slide animation

Once again I dig into creating a dynamic Twitch overlay in webflow. This time we’re creating a dynamic Twitch overlay slide in webflow. I enjoy working like this more than I should.  In fact I’ve added webflow to my own workflow and as an added service. That means that I can now offer three different entry points for dynamic overlays from pre-built, webflow and custom built.

In this version I’m going over how to create a simple slideshow, that’s built into webflow, with different animation settings. I’m also going over a few bug fixes that I rant into. I want creating a dynamic Twitch overlay slide in webflow to be super simple for you to pretty much drag and drop.

Below you can find timestamps for the video. If you click on the video and go to the YouTube page you can click on them to get to the right spot.

Let’s get started!

0:15 Introduction of the scene in Photoshop.
2:30 Talking about Call to Action.
3:12 Starting in webflow.
5:24 Creating our first slide.
21:55 Creating our second slide.
31:27 Creating our third slide (creating a database).
45:58 Setting up the slide animation.
50:26 Selecting the animation.
51:12 Creating our fourth slide.
52:42 Fixing a overlapping “bug”.
53:47 Final look and thank you!


This week I’m (hopefully) starting a new chapter in the LiveSpace era. I’m stepping into the SaaS (software as a service) world and that means some great things for you. My aim is to change the entire overlay and alert scene. Hopefully you will be a long with that ride and I’m going to document it all in the newsletter and some of it here as well.

LiveSpace

LiveSpace

Do you need a Twitch website done the right way? Or do you need a Twitch branding strategy? If you're ready then take a look at the Twitch services and see if they fit into your future. twitch.livespace.se