• Global community
    • Language:
      • Deutsch
      • English
      • Español
      • Français
      • Português
  • 日本語コミュニティ
    Dedicated community for Japanese speakers
  • 한국 커뮤니티
    Dedicated community for Korean speakers
Exit
0

Initiate iframe canvas animation on scroll

Community Beginner ,
Apr 02, 2023 Apr 02, 2023

Copy link to clipboard

Copied

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!

Views

462

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines

correct answers 2 Correct answers

Community Beginner , Apr 03, 2023 Apr 03, 2023

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?

Votes

Translate

Translate
Community Beginner , Apr 12, 2023 Apr 12, 2023

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

Votes

Translate

Translate
Community Expert ,
Apr 02, 2023 Apr 02, 2023

Copy link to clipboard

Copied

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.

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Community Beginner ,
Apr 03, 2023 Apr 03, 2023

Copy link to clipboard

Copied

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?

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Community Beginner ,
Apr 12, 2023 Apr 12, 2023

Copy link to clipboard

Copied

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

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Community Expert ,
Apr 20, 2023 Apr 20, 2023

Copy link to clipboard

Copied

Good to know. 

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Community Beginner ,
Apr 21, 2023 Apr 21, 2023

Copy link to clipboard

Copied

LATEST

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

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines