How to animate shots on page load?

Animations
1

Hi!

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.

1 Like
2

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.
3

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.

4

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;
}