I created a landing page for younique using webflow and it contained a series of scroll triggered animations. People really like how this page looks and our social team wanted me to send them gifs / videos of the animations that they could share on social media.
Since most of the animations are triggered on scroll getting the animations captured as video was looking like it wouldn’t be very easy to capture.
I remembered a little known css feature only available in firefox and it totally worked for what I was needing.
Here is the landing page with the scroll animations:
Here is the CSS I used to create a copy of the page that would stay static so that I could record the screen animations one by one individually:
(You would need to adjust the values below for your own page and the element you want to have static needs an ID)
body:after {
content:'';
position:fixed;
top:0;
left:0;
min-width:SOMEVALUE;
min-height:SOMEVALUE;
background:rgba(256,256,256,1) -moz-element(#ID-OF-ANIMATION) no-repeat center / contain;
z-index:999999;
}
To capture the animation I used a program called giffox but you could just use quicktime and then optimize the gif by uploading to gifoptimizer online.
Hope this might help others out there who have wanted to capture their scroll triggered animations but were having problems 