Possible to set the view port to when a element enters a container?

Overview

Hi sorry, this might not be a bug, but more a question on if this is possible.

I have some fixed elements on the page that scroll with the view port. I was wondering if it was possible to set the lottie animation frame by when they interact with the container i.e.

The red box is the container and the aim is to have the circles only interact with the container once they intersect with it, instead of the viewport.

Is this possible?

Screenshot 2023-01-15 at 11 03 21

Currently I am experimenting with setting different states of visibility - but this will get very specific depending on the height of a element and then that might change over time (with 4 elements, and multiple animation changes for each, this would lose maintainability pretty quickly). Which brings me to a section question -

In the code below - I have two elements, both pointing to the same container. There will be lets say 8 containers on a page, all with a different animation (so 8 * 4... its alot of JS) - is there a better way to write this code i.e. chaining one LottieInteractivity.create

My code:

{% js %} LottieInteractivity.create({ player: '#background_circle_1', mode: 'scroll', container: "#my_sites", actions: [ { visibility:[0.0,0.8], type: 'stop', // frames: [0, 60], frames: [0,0], }, { visibility:[0.8,1.0], type: 'seek', // frames: [0, 60], frames: [0, 60], }, ] });

LottieInteractivity.create({ player: '#background_circle_4', mode: 'scroll', container: "#my_sites", actions: [ { visibility:[0.0,0.2], type: 'stop', // frames: [0, 60], frames: [0,0], }, { visibility:[0.2,1.0], type: 'seek', // frames: [0, 60], frames: [0, 60], }, ] });`

Is something like this possible? (this might be a feature request).

 LottieInteractivity.create({
      // pass array all of all players for this section
      player: ['#background_circle_1', '#background_circle_2', '#background_circle_3', '#background_circle_4'],

      // when they interact or intersect with the container
      mode: 'intersect', // <<< this is not a real command - just an example.

      container: "#my_sites",

      // Below gets applied to each of the players
      actions: [
          {
              visibility:[0.0,0.8],
              type: 'stop',
              // frames: [0, 60],
              frames: [0,0],
          },
          {
              visibility:[0.8,1.0],
              type: 'seek',
              // frames: [0, 60],
              frames: [0, 60],
          },
      ]

      // Or an example of specificying one action specificly for each within this block
      actions: [
          {
              id: 'background_circle_1'
              visibility:[0.0,0.8],
              type: 'stop',
              // frames: [0, 60],
              frames: [0,0],
          },
          {
              visibility:[0.8,1.0],
              type: 'seek',
              // frames: [0, 60],
              frames: [0, 60],
          },
      ]
  });

Thanks - please let me know if anything is unclear - happy to provide more detail. If there is a better way of writing my exisiting code (or just a link to a doc that shows it, could you please respond with that).

Thanks - W

LottieFiles / lottie-interactivity

Possible to set the view port to when a element enters a container? #103

Overview