Exporting HTML and CSS animation in sigil

Josh Aenon · 07-18-2019, 07:52 PM

Do HTML and CSS animation or transitions work in epub file in an epub reader after exporting with the recent sigil 0.9.14 software?

lumpynose · 07-18-2019, 08:32 PM

As a simple test I used the "Twisty" example from here since it doesn't use javascript:

https://cloudinary.com/blog/creating_html5_animations

I saved the epub file and then opened it in Adobe Digital Dimensions on my PC and it did animate. I opened it in calibre's ebook viewer and it did not animate. I sent it to a Kobo Forma and it did not animate.

I would think that it would not be attractive on an ereader with an e-ink display since e-ink is slow. Using an epub app on Android might fare better, assuming the app supports animations (Android e-reader apps tend to be fairly dodgy with what they support).

DiapDealer · 07-18-2019, 08:42 PM

Sigil has nothing to do with whether or not your css3 animation code will work in any particular epub3 rendering system. If it's valid html/css, Sigil will let you save it.

Josh Aenon · 07-19-2019, 02:58 AM

Thanks alot lumpynose but can i get the sample epub file you did with the animation let me try it out in my own app epub reader?

Josh Aenon · 07-19-2019, 03:08 AM

@Diapdealer if am correct you are trying to say sigil accepts HTML5 and CSS 3 codes and can export them as epub 3?

DNSB · 07-19-2019, 03:11 AM

Quote:

Originally Posted by Josh Aenon

@Diapdealer if am correct you are trying to say sigil accepts HTML5 and CSS 3 codes and can export them as epub 3?

You can set a preference in Sigil as to whether you want to start editing a new epub as epub2 or epub3.

Sigil natively can not change the epub type between epub2 and epub3 on the fly. There are a couple of plugins that you might find useful though I personally have not used either of them. The epub3-itizer plugin will let you save an epub3 version of an epub2 file and the epub2 output plugin will save an epub2 version of an epub3 file.

KevinH · 07-19-2019, 06:40 AM

Yes, Sigil supports generating epub3, css3, html 5 to the same extent the Chrome browser does, but that is not the point DiapDealer was trying to make. He was trying to point out that each e-reader implements their own viewer so if you produce a proper epub3, there is no guarantee that a specific reader supports the features you are choosing to use.

DiapDealer · 07-19-2019, 08:20 AM

And for what it's worth, the QtWebEngine Preview used by both Sigil and PageEdit renders the the above "Twisty" css-only animation example just fine (with the Qt5.12.3 packaged with the Windows and Mac installers for Sigil 0.9.15+, anyway). But as mentioned earlier, Sigil doesn't have anything to do whether or not the animation will be supported on any particular ereader or epub rendering system. It all depends on their conformance to/interpretation of epub/html/css specs.

Also, there is no need to "export" epubs from Sigil. Sigil has long had the ability to create, edit, and save EPUBS (both EPUB2 and EPUB3). So the notion of "exporting" an epub from Sigil is a bit misleading and/or confusing. The working version IS the final product. Sigil doesn't use an intermediate, proprietary format (like Gimp) that needs to be exported as an epub when ready. And there is no compilation/conversion like with creating a Kindlebook. The markup you write is the markup in the epub. It's just a zipfile with rules (and a different file extension).

lumpynose · 07-19-2019, 01:15 PM

Quote:

Originally Posted by Josh Aenon

Thanks alot lumpynose but can i get the sample epub file you did with the animation let me try it out in my own app epub reader?

You would ask for that, after I threw it away and emptied the trash.

What I did was copy the text from that page, the html into the xhtml file that Sigil provides, and created a new css file and pasted the css into that and then right clicked on the xhtml file and linked the css file to it. Save and you're good to go.

Edit: I didn't read all the responses and now I see that DiapDealer made the file for you.

DiapDealer · 07-19-2019, 01:32 PM

Quote:

Originally Posted by lumpynose

Edit: I didn't read all the responses and now I see that DiapDealer made the file for you.

I did kind of slap it on there without commenting about it.

Josh Aenon · 07-19-2019, 06:16 PM

Thanks alot guys i appreciate

jackie_w · 07-19-2019, 07:50 PM

In case anyone is interested, that Twisty.epub attached in DiapDealer's post #8 does display its animation in Android epub apps Bookari and Gitden.

Josh Aenon · 07-19-2019, 07:56 PM

What if you want to build an app that can read it's animations, what and what do you need to know, and what are the essentials?

lumpynose · 07-20-2019, 02:36 AM

Quote:

Originally Posted by Josh Aenon

What if you want to build an app that can read it's animations, what and what do you need to know, and what are the essentials?

You want to build an HTML5 app? As in write the code?

DiapDealer · 07-20-2019, 05:07 AM

This really isn't the right venue for "how do I design an app?" discussions.

07-18-2019, 07:52 PM	#1
Josh Aenon Junior Member Posts: 7 Karma: 10 Join Date: Jul 2019 Location: Nigeria Device: Adobe Acrobat	Exporting HTML and CSS animation in sigil Do HTML and CSS animation or transitions work in epub file in an epub reader after exporting with the recent sigil 0.9.14 software?

07-18-2019, 08:42 PM	#3
DiapDealer Grand Sorcerer Posts: 28,571 Karma: 204127028 Join Date: Jan 2010 Device: Nexus 7, Kindle Fire HD	Sigil has nothing to do with whether or not your css3 animation code will work in any particular epub3 rendering system. If it's valid html/css, Sigil will let you save it. Last edited by DiapDealer; 07-18-2019 at 08:45 PM.

Similar Threads
Thread	Thread Starter	Forum	Replies	Last Post
Can Calibre Strip HTML links when exporting to epub?	Dasun	Calibre	6	03-03-2020 02:47 AM
i cant see html or css	AnisioLemos	Sigil	12	12-15-2016 07:12 PM
CSS animation executes before page	KLK	ePub	2	12-13-2012 04:28 AM
Sigil UI and the CSS	Artha	Sigil	2	11-22-2011 02:22 PM
Sigil 0.3.4 / Problème CSS entre Sigil et iPad	Grivels	Software	10	07-03-2011 09:06 AM

07-18-2019, 08:32 PM	#2
lumpynose Wizard Posts: 1,086 Karma: 6719822 Join Date: Jul 2012 Device: Palm Pilot M105	As a simple test I used the "Twisty" example from here since it doesn't use javascript: https://cloudinary.com/blog/creating_html5_animations I saved the epub file and then opened it in Adobe Digital Dimensions on my PC and it did animate. I opened it in calibre's ebook viewer and it did not animate. I sent it to a Kobo Forma and it did not animate. I would think that it would not be attractive on an ereader with an e-ink display since e-ink is slow. Using an epub app on Android might fare better, assuming the app supports animations (Android e-reader apps tend to be fairly dodgy with what they support).

07-19-2019, 02:58 AM	#4
Josh Aenon Junior Member Posts: 7 Karma: 10 Join Date: Jul 2019 Location: Nigeria Device: Adobe Acrobat	Thanks alot lumpynose but can i get the sample epub file you did with the animation let me try it out in my own app epub reader?

07-19-2019, 03:08 AM	#5
Josh Aenon Junior Member Posts: 7 Karma: 10 Join Date: Jul 2019 Location: Nigeria Device: Adobe Acrobat	@Diapdealer if am correct you are trying to say sigil accepts HTML5 and CSS 3 codes and can export them as epub 3?

07-19-2019, 06:40 AM	#7
KevinH Sigil Developer Posts: 8,764 Karma: 6000000 Join Date: Nov 2009 Device: many	Yes, Sigil supports generating epub3, css3, html 5 to the same extent the Chrome browser does, but that is not the point DiapDealer was trying to make. He was trying to point out that each e-reader implements their own viewer so if you produce a proper epub3, there is no guarantee that a specific reader supports the features you are choosing to use.

07-19-2019, 06:16 PM	#11
Josh Aenon Junior Member Posts: 7 Karma: 10 Join Date: Jul 2019 Location: Nigeria Device: Adobe Acrobat	Thanks alot guys i appreciate

07-19-2019, 07:50 PM	#12
jackie_w Grand Sorcerer Posts: 6,251 Karma: 16539642 Join Date: Sep 2009 Location: UK Device: ClaraHD, Forma, Libra2, Clara2E, LibraCol, PBTouchHD3	In case anyone is interested, that Twisty.epub attached in DiapDealer's post #8 does display its animation in Android epub apps Bookari and Gitden.

07-19-2019, 07:56 PM	#13
Josh Aenon Junior Member Posts: 7 Karma: 10 Join Date: Jul 2019 Location: Nigeria Device: Adobe Acrobat	What if you want to build an app that can read it's animations, what and what do you need to know, and what are the essentials?

07-20-2019, 05:07 AM	#15
DiapDealer Grand Sorcerer Posts: 28,571 Karma: 204127028 Join Date: Jan 2010 Device: Nexus 7, Kindle Fire HD	This really isn't the right venue for "how do I design an app?" discussions.

Advert

Advert