Select Your Role - JavaScript Animation Example

I recently shared this example on LinkedIn and wanted to share it here too.

After sharing this, I got asked a lot: Can you share the details of how you vibe coded this? So sure, and here's the file too! ⬇️

Here’s my vibe coding process:

• Use your favorite AI (I like Gemini)
• Describe exactly how you want the interaction to work
• Feed it your slide specifics (variable names, ObjectIDs, etc.)
• Set up your slide the way it tells you to
• Test it
• Tell AI what didn't work (or what you want to change)
• Test it again
• Revise it again... and repeat

Don't let your chat sessions get too long, otherwise the AI seems to start spitting out messy or broken code. Starting a fresh chat keeps the AI sharp and makes debugging easier.

Vibe coding usually takes a lot of iterations, and it can get frustrating fast. If you change one thing incorrectly, the entire interaction can break. And then figuring out why it broke (and what to change it without breaking something else) can make you want to throw your laptop out the window.

Cue Natalia Vostretsova 🤓's tutorials. She shares really helpful examples and resources that build a foundation for how JavaScript works so you’re not just copy/pasting, but actually able to read, edit, and troubleshoot it. She also has an upcoming course in the works, so definitely follow her if you want to learn more.

With that said, attached is the file for this interaction. I tried to clean it up and make it as editable as possible.

Here's how to use it once you download it:

• Open the slide
• Find the JavaScript trigger
• Follow the orange instructions inside the code to customize it for your slide

If you run into trouble getting it to work, here’s the fastest fix:

• Paste your edited code into AI
• Describe your slide setup
• Tell it what’s happening (or not happening)
• Revise it until it works on your end

If you get it working, drop a comment with what you made (even a quick screen recording). I’d love to see how you use it!