Today, we’ll learn how to seamlessly embed web animations in PowerPoint presentations. This adds a whole new dimension of visual appeal and interactivity to your slideshows.
The Exciting Possibilities
In our first video on this topic, we aim to explore the myriad possibilities of animating PowerPoint with embedded web content using HTML, CSS, and JavaScript. But before we embark on this journey, let’s take a quick detour to ensure you’re equipped with the necessary tools.
Installing the Web Viewer Add-in
If you’re using PowerPoint 365, the process involves installing a nifty Add-in called Web Viewer. Here’s how you can do it:
- Head to the Home tab.
- Navigate to the Add-Ins section.
- Click the “Get Add-ins” button.
- In the search box, type “Web Viewer” and hit “Add” to install.
To remove an Add-in later, go to “My Add-ins,” click the three dots for the desired Add-in, and choose “Remove” from the drop-down list.
Watch How To Embed Web Animations in PowerPoint Presentations Tutorial
Inserting Web Content
Once the Web Viewer Add-in is installed, click the Add-ins button from the Home tab and select the Web Viewer icon to insert it into your presentation. You’ll see an “Insert Web Page” box, where you can enter the URL to embed its content.
Remember, “https” is already prefixed, so exclude it when typing or pasting a URL. Adjust the window size as needed before moving on to the slideshow.
Navigating the Embedded Content
During the slideshow, refrain from using the scroll button, as it might advance to the next slide. Instead, utilize the scroll bar of the Web Viewer window to navigate through the embedded HTML page.
Combining Web Content with PowerPoint Animation
Now, let’s explore a more dynamic example. Combine Embedded Web Content with PowerPoint animation effects. Copy a code from a platform like codepen.io, paste it into the Web Content Add-in, click “Preview,” and voila! You have a dynamic animation as your presentation background. Enhance it further by adding PowerPoint objects and applying animation effects.
Creating Your Own Web Animations
If you have a hosting plan and some knowledge of HTML, CSS, and JS coding, you can create your own web animations and interactive elements as web pages. Embed them into your presentations using the Web URL through the Web Viewer Add-in, and add PowerPoint animations on top to elevate your presentation.
ChatGPT Assistance
Curious about creating web animations but not sure where to start? I asked ChatGPT to generate an HTML code featuring 5 stars, each 2×2 inches, moving across the screen in different directions, changing colors, spinning, fading in and out, and zooming in and out.
ChatGPT provided the HTML, CSS, and JS codes, which you can easily copy and paste into a Notepad file. Save it as “StarsAnimation.html” and double-click the file to view the results in a web browser.
To embed this page in your PowerPoint presentation, host it, get a URL address, go to the Home Tab, click Add-ins, choose Web Viewer, and paste the URL. Click “Preview,” and you’ll have that animation as a background. Adjust the Web Viewer window size to fit your preferences.
Conclusion
I hope this concept sparks new ideas for animating in PowerPoint. Share your thoughts in the comments. Thanks for watching, and as always, take care! Bye!
