How To Make A Group Show After a Certain Amount of Time

Thanks for any tips on this.

I have a group with a vimeo video in it.

What I would like to do, is say at a certain point in the video say at the 5 minute mark. It will automatically trigger a different group to open.

How would you do this?

Thanks.

Hey, to do it we’ll need to add the plugin toolbox and import a vimeo script. Here is how to do it:

1. Enable the Required Settings

  • Go to Settings > General
  • Scroll to the bottom and check the option:
    :white_check_mark: Expose the option to add an ID attribute to HTML elements

2. Add the Hidden Group

  • Drag a Group element onto the page
  • Set it to be hidden by default:
    :white_large_square: Uncheck “Visible on page load”
    :white_check_mark: Check “Collapse when hidden”

3. Add a Vimeo Video Element

  • Drag a Video element onto the page
  • Select Vimeo as the video source
  • Paste the Vimeo URL
  • Assign it an ID (e.g., vimeo-player)

4. Add Vimeo API Script to the Page Header

  • In the Elements Tree, select the Page

  • Go to Page HTML Header and add:

    <script src="https://player.vimeo.com/api/player.js"></script>
    

5. Add a Workflow - “When Page is Loaded”

  1. Add a new workflow → “When page is loaded”
  2. Add a pause → to make sure the vimeo video is loaded
  3. Add an action: “Run JavaScript”
    • Uncheck asynchronous
  4. Paste the following code (adjust the 3 seconds as needed):
  5. make sure to match the id you put on the video elemen
const iframe = document.querySelector('#vimeo-player > iframe')
if (!iframe) {
console.error("Iframe not found!");
} else {

const player = new Vimeo.Player(iframe);

let triggered = false;

player.on('timeupdate', function(data) {
 if (!triggered && data.seconds >= 3) {
   triggered = true;
   bubble_fn_custom_function();
 }
});
}


6. Add the “JavaScripttoBubble” Element

  • Drag a JavaScripttoBubble element onto the page
  • Set the suffix to: custom_function
  • :white_check_mark: Check the “Trigger event” checkbox

7. Add a Workflow - “JavaScript to Bubble Event”

  1. Create a new workflow → “JavaScript to Bubble event”
  2. Add an action: Show or Animate the hidden group

Final Notes:

  • The function bubble_fn_custom_function() is what triggers Bubble’s workflow when the video reaches the specified time (3 seconds in this case).
  • Adjust the data.seconds value in the JavaScript if you want to show the group at a different time.
  • Make sure the IDs match (i.e., #vimeo-player).

Demo: https://rafael-gaitan.bubbleapps.io/version-test/vimeo-trigger
Editor: https://bubble.io/page?id=rafael-gaitan&tab=Design&name=vimeo-trigger&type=page

Let me know if it worked! :rocket:

1 Like

Thank you for the response. Will give it a try.

1 Like