JavaScript animation

Daniele Giampà · 09-20-2024, 05:43 PM

Hello

I want to create a scroll animation for an EPUB3 e-book.

The animation activates a tarot card that generates a text.
I have a web version here: https://www.edgedpub.com/The_Two_Fis...chapter-2.html

I copied the code files into an EPUB3 document and edited them.
According to EPUB Checker, there aren't any mistakes.
Sadly, the JS animation doesn't work. I can't scroll and the cards don't generate the texts.

See the EPUB3 document here: https://edgedpub.com/sample_work_7.php

Many thanks

Daniele

RbnJrg · 09-21-2024, 09:41 AM

Quote:

Originally Posted by Daniele Giampà

Hello

I want to create a scroll animation for an EPUB3 e-book.

The animation activates a tarot card that generates a text.
I have a web version here: https://www.edgedpub.com/The_Two_Fis...chapter-2.html

I copied the code files into an EPUB3 document and edited them.
According to EPUB Checker, there aren't any mistakes.
Sadly, the JS animation doesn't work. I can't scroll and the cards don't generate the texts.

See the EPUB3 document here: https://edgedpub.com/sample_work_7.php

Many thanks

Daniele

I answered your question yesterday but I don't know why my answer was deleted. I will write again what I wrote.

Your script doesn't work because has errors. If you open your epub in -for example- Sigil and select the chapter_01.xhtml file and enable the "Inspector", you'll see the errors. Instead of your script, you should use something like:

1) At the beggining of the script:

Code:

window.addEventListener("load", Starting);

2) After that, you have to define the Starting function; something like:

Code:

function Starting() {
   var element = document.querySelector(".tarot-cards");
   element.addEventListener("scroll", myScrollFunction);
   window.removeEventListener("load", Starting);
}

3) After that, you need to define your myScrollFunction:

Code:

function myScrollFunction() {
    let textContents = document.querySelectorAll(".text-content");
    textContents.forEach(function (content, index) {
        let card = document.querySelector(".tarot-cards").children[index];
        let rect = card.getBoundingClientRect();
        if (rect.top < window.innerHeight && rect.bottom >= 0) {
           content.classList.add("active");
        }
        else {
          content.classList.remove("active");
       }
  });    
}

4) Finally, delete in chapter_01.xhtml file the <script>...</script> tag at the end, and instead of that, link the script at the [head] section with:

Code:

  <script type="text/javascript" src="../Misc/tarot.js" ></script>

Also, the "tarot-cards" class is not well defined. You should use, instead of "%", to employ "vh" to define heights (also in your "text-content" class). And also you'll have issues with the margins and height you are using; try with the property "box-sizing: border-box". And maybe is not the better to apply the property "display: flex" also to <body>; maybe it could be a better idea to employ for "tarot-cards" a grid of two columns (one for images and one for the text). Things that work nice on html pages, they can not work properly under epub.

Daniele Giampà · 09-23-2024, 11:06 AM

Thank you for your help!

I edited the files, but I am afraid the scroll animation is not working.
Also, in the console, I read: failed to load resource...

Please, see the screenshots attached.
The new version is here:
https://edgedpub.com/sample_work_7.php

DNSB · 09-23-2024, 08:02 PM

One item that may be causing issues is that you are creating an ePub2 document and JavaScript support was added in ePub3.

RbnJrg · 09-24-2024, 12:36 AM

Quote:

Originally Posted by Daniele Giampà

Thank you for your help!

I edited the files, but I am afraid the scroll animation is not working.
Also, in the console, I read: failed to load resource...

Please, see the screenshots attached.
The new version is here:
https://edgedpub.com/sample_work_7.php

Yes, what DNSB said is the cause of your issue. You have built your epub as epub2 and javascript is only supported by epub3

Also, in your class "tarot-card" you have the following property:

Code:

height: vh15;

That won't work

You should use:

Code:

height: 15vh;

With the above property, you will have defined the height of the section to scroll as 15% of the height of the screen. Also change the height in the "text-section" class as "height: 15vh" (without quotes of course).

DNSB · 09-24-2024, 12:54 AM

After using Sigil's ePub2 to ePub3 conversion tool and correcting the vh15 to 15vh, it does seem to work in Sigil's preview window and Thorium but the card size seems rather small. I ended up increasing to 25% and 40vh in the CSS style.

I've attached an image from Sigil's preview screen of what I see.

RbnJrg · 09-24-2024, 01:42 PM

My solution:

The_Two_Fishermen (1)_epub3.epub

This is an epub3 (with only the chapter_01.xhtml file in sake of simplicity), that shows an alternative method to do the things.

Click image for larger version

Name: Scroll1.jpg
Views: 36
Size: 45.4 KB
ID: 210980

Click image for larger version

Name: Scroll2.jpg
Views: 35
Size: 44.7 KB
ID: 210981

Click image for larger version

Name: Scroll3.jpg
Views: 33
Size: 42.1 KB
ID: 210982

Click image for larger version

Name: Scroll4.jpg
Views: 33
Size: 42.6 KB
ID: 210983

Click image for larger version

Name: Scroll5.jpg
Views: 33
Size: 41.3 KB
ID: 210984

Daniele Giampà · 09-24-2024, 04:15 PM

Bummer! I didn't see that it's epub.02

Where is the format converter in Sigil?

I modified my files. It's working now.
I am just struggling with the scrolling.
It stops after the second card.

Many thanks!

RbnJrg · 09-24-2024, 05:17 PM

Quote:

Originally Posted by Daniele Giampà

Bummer! I didn't see that it's epub.02

Where is the format converter in Sigil?

I modified my files. It's working now.
I am just struggling with the scrolling.
It stops after the second card.

Many thanks!

The method you employed needs more tunning to be implemented on epub; it can work fine on web pages but on epubs you also.would need to add a sync between the two scrolling. Watch the alternative method I posted, that works fine on epubs, and also sync the scrolling of the cards and the asociated text. Because of the sync, you don't need to hide text.

To convert an epub2 to epub3 in Sigil you need to install the epub3-itizer plugin.

https://www.mobileread.com/forums/sh....php?p=2973066

Daniele Giampà · 11-01-2024, 01:43 PM

Hello

I have been playing a little with the animation, and I am afraid there are still two issues.

1) I have a hard time finding the right size for the card box. It is always either too high or too small.

2) The texts linked to each card don't appear when scrolling. I can scroll the part with the cards and the texts, but they don't move simultaneously.

The idea behind this work is that the cards generate text related to it. The various texts should, therefore, be invisible and only turn visible when the respective card appears in the card box.

I have uploaded the latest version of this work on my web page https://edgedpub.com/sample_work_7.php

Many thanks for your help.

Daniele

RbnJrg · 11-02-2024, 06:23 PM

Quote:

Originally Posted by Daniele Giampà

Hello

I have been playing a little with the animation, and I am afraid there are still two issues.

1) I have a hard time finding the right size for the card box. It is always either too high or too small.

2) The texts linked to each card don't appear when scrolling. I can scroll the part with the cards and the texts, but they don't move simultaneously.

The idea behind this work is that the cards generate text related to it. The various texts should, therefore, be invisible and only turn visible when the respective card appears in the card box.

I have uploaded the latest version of this work on my web page https://edgedpub.com/sample_work_7.php

Many thanks for your help.

Daniele

And what about I posted in:

https://www.mobileread.com/forums/sh...26&postcount=7

As I said, things that work on a web page, they can not work under epub. This is one of those cases. In my solution images and text are sync, that is problematic in an epub with the original js.

Daniele Giampà · 11-04-2024, 10:00 PM

Thank you, Ruben.
I have good and bad news.

I edited the code using Cursor AI Code Editor and the animation in Chapter 1 works. It was a matter of finding the right dimensions for the container and the cards.

I then created a new animation for Chapter 2 using Cursor, but somehow the functions of the two chapters got mixed and I had to stop.

The animation in Chapter 2 is click-based and the first card appears on the reverse side. When clicked, the card turns, the corresponding text appears and the next card appears on the reverse side. The animation goes on and on in this same way.

I could use just one animation, but it is too much fun to experiment with the EPUB3 format.

09-20-2024, 05:43 PM	#1
Daniele Giampà Member Posts: 17 Karma: 20 Join Date: Jan 2024 Location: London Device: none	JavaScript animation Hello I want to create a scroll animation for an EPUB3 e-book. The animation activates a tarot card that generates a text. I have a web version here: https://www.edgedpub.com/The_Two_Fis...chapter-2.html I copied the code files into an EPUB3 document and edited them. According to EPUB Checker, there aren't any mistakes. Sadly, the JS animation doesn't work. I can't scroll and the cards don't generate the texts. See the EPUB3 document here: https://edgedpub.com/sample_work_7.php Many thanks Daniele

09-23-2024, 11:06 AM	#3
Daniele Giampà Member Posts: 17 Karma: 20 Join Date: Jan 2024 Location: London Device: none	Thank you for your help! I edited the files, but I am afraid the scroll animation is not working. Also, in the console, I read: failed to load resource... Please, see the screenshots attached. The new version is here: https://edgedpub.com/sample_work_7.php Attached Thumbnails

09-24-2024, 12:54 AM	#6
DNSB Bibliophagist Posts: 41,125 Karma: 158160884 Join Date: Jul 2010 Location: Vancouver Device: Kobo Sage, Libra Colour, Lenovo M8 FHD, Paperwhite 4, Tolino epos	After using Sigil's ePub2 to ePub3 conversion tool and correcting the vh15 to 15vh, it does seem to work in Sigil's preview window and Thorium but the card size seems rather small. I ended up increasing to 25% and 40vh in the CSS style. I've attached an image from Sigil's preview screen of what I see. Attached Thumbnails Last edited by DNSB; 09-24-2024 at 01:01 AM.

09-24-2024, 04:15 PM	#8
Daniele Giampà Member Posts: 17 Karma: 20 Join Date: Jan 2024 Location: London Device: none	Bummer! I didn't see that it's epub.02 Where is the format converter in Sigil? I modified my files. It's working now. I am just struggling with the scrolling. It stops after the second card. Many thanks! Attached Thumbnails

Thread Tools	Search this Thread
Show Printable Version Email this Page	Search this Thread: Advanced Search

09-23-2024, 08:02 PM	#4
DNSB Bibliophagist Posts: 41,125 Karma: 158160884 Join Date: Jul 2010 Location: Vancouver Device: Kobo Sage, Libra Colour, Lenovo M8 FHD, Paperwhite 4, Tolino epos	One item that may be causing issues is that you are creating an ePub2 document and JavaScript support was added in ePub3.

09-24-2024, 01:42 PM	#7
RbnJrg Wizard Posts: 1,611 Karma: 8399999 Join Date: Mar 2013 Location: Rosario - Santa Fe - Argentina Device: Kindle 4 NT	My solution: The_Two_Fishermen (1)_epub3.epub This is an epub3 (with only the chapter_01.xhtml file in sake of simplicity), that shows an alternative method to do the things.

11-01-2024, 01:43 PM	#10
Daniele Giampà Member Posts: 17 Karma: 20 Join Date: Jan 2024 Location: London Device: none	Hello I have been playing a little with the animation, and I am afraid there are still two issues. 1) I have a hard time finding the right size for the card box. It is always either too high or too small. 2) The texts linked to each card don't appear when scrolling. I can scroll the part with the cards and the texts, but they don't move simultaneously. The idea behind this work is that the cards generate text related to it. The various texts should, therefore, be invisible and only turn visible when the respective card appears in the card box. I have uploaded the latest version of this work on my web page https://edgedpub.com/sample_work_7.php Many thanks for your help. Daniele

11-04-2024, 10:00 PM	#12
Daniele Giampà Member Posts: 17 Karma: 20 Join Date: Jan 2024 Location: London Device: none	Thank you, Ruben. I have good and bad news. I edited the code using Cursor AI Code Editor and the animation in Chapter 1 works. It was a matter of finding the right dimensions for the container and the cards. I then created a new animation for Chapter 2 using Cursor, but somehow the functions of the two chapters got mixed and I had to stop. The animation in Chapter 2 is click-based and the first card appears on the reverse side. When clicked, the card turns, the corresponding text appears and the next card appears on the reverse side. The animation goes on and on in this same way. I could use just one animation, but it is too much fun to experiment with the EPUB3 format.

Similar Threads
Thread	Thread Starter	Forum	Replies	Last Post
Page Animation gone?	Maverynthia	Viewer	3	06-10-2021 08:25 AM
Is there a way to disable the animation?	MarjaE	Calibre Companion	2	12-11-2020 06:59 PM
ibooks and animation	corblimey	ePub	1	03-07-2014 06:48 PM
Animation in ebook	LooneyAnimator	General Discussions	3	12-15-2013 06:15 PM
IQ Adroid animation just keeps going.	UrbanNightmare	PocketBook	8	03-08-2011 06:17 PM