Add animated images to your stream in OBS Studio using the built-in browser source! My simple tool is an online form that is the quickest way to put an animated image into your streams! Simply configure your animation using the online form, copy the URL from the browser preview, and paste into an OBS Studio browser source and the text will animate based on your selections.

Tutorial video coming soon! I released the tool when it was done in development rather than holding it back and also waiting for the tutorial video to be done.

If you happen to have any issues check out the troubleshooting page or don’t hesitate to send me a Tweet or DM to ask for some help.

And of course… tweeting me to let me know you’re using it, shares, and referrals are always appreciated!

Customize Your Image Animator

---

Image Source URL

The publicly available online location of your image. The browser source will not have access to any files on your computer. I'm unable to host images for you at this time but services like Dropbox, Google Drive, Imgur, or even Discord can host your images on the internet for this tool to be able to access them.

Background Color

Defaults to transparent. Will show up as white in browser testing but transparent in OBS Studio. Use Google Color Picker to select a color and paste in either HEX value into this box.

Use Enter Animation

Yes No

Tells the tool whether or not to reveal your image with an animation.

Enter Animation fadeIn fadeInDown fadeInDownBig fadeInLeft fadeInLeftBig fadeInRight fadeInRightBig fadeInUp fadeInUpBig bounce flash pulse rubberBand shake swing tada wobble jello heartBeat bounceIn bounceInDown bounceInLeft bounceInRight bounceInUp flip flipInX flipInY lightSpeedIn rotateIn rotateInDownLeft rotateInDownRight rotateInUpLeft rotateInUpRight slideInUp slideInDown slideInLeft slideInRight zoomIn zoomInDown zoomInLeft zoomInRight zoomInUp hinge jackInTheBox rollIn

The animation that will be used to reveal your image.

Enter Animation Start Delay (in seconds)

How long the tool will wait to start the enter animation. This allows you to delay your image reveal to compensate for things like stinger transition length or even just an arbitrary amount of time you want to wait to show your image.

Enter Animation Duration (in seconds)

How long the enter animation will take to completely reveal your image.

Repeat Animation Forever

Yes No

Tells the tool to repeat the enter animation forever. Note: This overrides all below setttings.

On Screen Duration (in seconds)

How long your image will stay on screen. Only used when the repeat animation forever setting is set to "Yes".

Use Exit Animation

Yes No

Tells the tool whether or not to hide your image with an exit animation. When set to "No" your image will remain on screen forever or until the browser source is hidden or the scene is switched to again.

Exit Animation fadeOut fadeOutDown fadeOutDownBig fadeOutLeft fadeOutLeftBig fadeOutRight fadeOutRightBig fadeOutUp fadeOutUpBig bounceOut bounceOutDown bounceOutLeft bounceOutRight bounceOutUp flipOutX flipOutY lightSpeedOut rotateOut rotateOutDownLeft rotateOutDownRight rotateOutUpLeft rotateOutUpRight slideOutUp slideOutDown slideOutLeft slideOutRight zoomOut zoomOutDown zoomOutLeft zoomOutRight zoomOutUp rollOut

The animation that will be used to hide your image.

Exit Animation Duration (in seconds)

How long the exit animation will take to completely hide your image.

---