How to animate shots on page load?


Is it possible to animate Shots to move on page load? I want to have video clips playing on page load on my Readymag page - clips rather than the full video link.
Shots seems the only way to add clips, but I can’t figure out how to get them to auto-play on page load.

Hi @savdp There is a way to do so, yes — however there isn’t a way to do ‘on load’ by default within Readymag as I believe it would be considered an ‘autoplay’ element which most browsers turn off by default.

That said, we can create the same desired effect using a the ‘trigger’ and the ‘mouse over’ animation settings available to shots. I have shared a link to a test project below for you to view below along with the steps.

  1. Create a rectangular element, set it’s colour to transparent.
  2. Pin the rectangle it to full view height and full view width
  3. in the layers panel bring it to the front —
  4. Select your ‘shots’ element set it to ‘mouse over’ and then select ‘trigger’ and choose the rectangle layer you just created.

thank you! appreciate your help.

This is partially working for me though I have multiple assets on my page that I need to set as hover triggers in order for the animation to play on hover. The animation feature seems to have a max of 3, so I can’t select them all to trigger. I’ve tried to group the assets and then select them to trigger but the animation tool won’t work for me with groups.

is there a way around this?

Thanks again.

Hi @savdp sadly not sure if there is a work around in this case. I wonder if adding the CSS to the rectangle would work?

[data-id="PASTE WIDGET ID HERE"] {
pointer-events: none !important;