Initiate iframe canvas animation on scroll

[dnjen]

I created an SVG illustration in Ilustrator and imported it in Animate. Once I animated it, I tried exporting my illustration animation as a .gif, but no matter how I do it there's way too much pixelation since there's no anti-aliasing. Testing the dithering options hasn't been any help, so I exported it as an HTML canvas for use in an iframe.

Now the animation needs to activate on scroll (when it enters the viewport) rather than on load. I'd love some help writing JavaScript to get this running, and I'll post the working code if I figure it out. Thank you!

[Nick Gioia]

Copy everything in Illustrator and paste it right into animate instead of exporting. if you choose to keep exporting make sure you have a high dpi like 300 or 600 that will fix the epixelation.

[dnjen · Accepted solution]

Thank you for your response.

It's totally fair to assume I'm using low-quality images and getting poor results, but these are completely vector SVGs. Is Animate unable to do anti-aliasing? I'm so confused about this. Maybe I should try high DPI .png files and see if that looks better. Does copying straight from Illustrator generate different settings?

[dnjen · Accepted solution]

To anyone else struggling with Animate's export settings, I solved it by using SVGator instead. The paid version lets you animate on scroll and load the graphic as an SVG (with an iframe). 

[Nick Gioia]

Good to know. 

[dnjen]

Note: the SVGator animated SVG can also be loaded with <object> which is more geared toward images. I'm happier with this result than using a large and grainy GIF