Animations Playground

{"media":{"id":9210,"url":"https://devguide.payu.in/website-assets/uploads/2021/10/lf20_tzlvsz3o.json","name":"lf20_tzlvsz3o"},"settings":{"height":"800","onHover":true,"autoPlay":true,"autoPlayLoop":true,"unInterruptedPlay":false,"onScreenOffset":"0","loopStartFrame":"50","debug":false}}

AutoPlay

{"media":{"id":9210,"url":"https://devguide.payu.in/website-assets/uploads/2021/10/lf20_tzlvsz3o.json","name":"lf20_tzlvsz3o"},"settings":{"debug":false,"autoPlay":true,"onScreenOffset":"-100","loopStartFrame":"50"}}

AutoPlay and loop

{"media":{"id":9210,"url":"https://devguide.payu.in/website-assets/uploads/2021/10/lf20_tzlvsz3o.json","name":"lf20_tzlvsz3o"},"settings":{"onHover":false,"autoPlay":true,"autoPlayLoop":true,"debug":false,"loopStartFrame":"50"}}

Hover

Play on Hover

Autoplay loading phase, loop on hover

Autoplay and continue looping, pause on hover out

{"media":{"id":9210,"url":"https://devguide.payu.in/website-assets/uploads/2021/10/lf20_tzlvsz3o.json","name":"lf20_tzlvsz3o"},"settings":{"onHover":true,"loopStartFrame":"50","debug":false}}

{"media":{"id":9210,"url":"https://devguide.payu.in/website-assets/uploads/2021/10/lf20_tzlvsz3o.json","name":"lf20_tzlvsz3o"},"settings":{"autoPlay":true,"onHover":true,"loopStartFrame":"50","unInterruptedPlay":false,"autoPlayLoop":false,"debug":false}}

{"media":{"id":9210,"url":"https://devguide.payu.in/website-assets/uploads/2021/10/lf20_tzlvsz3o.json","name":"lf20_tzlvsz3o"},"settings":{"autoPlay":true,"autoPlayLoop":true,"onHover":true,"loopStartFrame":"50","debug":false}}

Trigger Offsets

Preponed Autoplay

Autoplay starts as soon as object comes on screen

Postponed Autoplay

{"media":{"id":9210,"url":"https://devguide.payu.in/website-assets/uploads/2021/10/lf20_tzlvsz3o.json","name":"lf20_tzlvsz3o"},"settings":{"loopStartFrame":"50","autoPlay":true,"autoPlayLoop":true,"unInterruptedPlay":true,"onScreenOffset":"400","height":"540","debug":false}}

{"media":{"id":9210,"url":"https://devguide.payu.in/website-assets/uploads/2021/10/lf20_tzlvsz3o.json","name":"lf20_tzlvsz3o"},"settings":{"loopStartFrame":"50","autoPlay":true,"autoPlayLoop":true,"unInterruptedPlay":true,"height":"540","debug":false,"onScreenOffset":"0"}}

{"media":{"id":9210,"url":"https://devguide.payu.in/website-assets/uploads/2021/10/lf20_tzlvsz3o.json","name":"lf20_tzlvsz3o"},"settings":{"height":"540","autoPlay":true,"autoPlayLoop":true,"unInterruptedPlay":true,"onScreenOffset":"-400","loopStartFrame":"50","debug":false}}

Size Controls

{"media":{"id":9210,"url":"https://devguide.payu.in/website-assets/uploads/2021/10/lf20_tzlvsz3o.json","name":"lf20_tzlvsz3o"},"settings":{"height":"100","onHover":true,"autoPlay":true,"autoPlayLoop":true,"loopStartFrame":"50"}}

{"media":{"id":9210,"url":"https://devguide.payu.in/website-assets/uploads/2021/10/lf20_tzlvsz3o.json","name":"lf20_tzlvsz3o"},"settings":{"height":"300","onHover":true,"autoPlay":true,"autoPlayLoop":true,"loopStartFrame":"50"}}

Debug Mode

{"media":{"id":9210,"url":"https://devguide.payu.in/website-assets/uploads/2021/10/lf20_tzlvsz3o.json","name":"lf20_tzlvsz3o"},"settings":{"loopStartFrame":"50","onHover":true,"autoPlay":true,"autoPlayLoop":true,"unInterruptedPlay":false,"debug":true}}

{}