EDGE DPUB Posted January 31 Share Posted January 31 Hello I created an animation using GSAP for an EPUB3 document. The animation works fine on my web page, but not on the EPUB3 document. Is anybody familiar with this issue in EPUB3? I'll be happy to share more info and files. See the Pen BabrNKz by edgedpub (@edgedpub) on CodePen Link to comment Share on other sites More sharing options...
GSAP Helper Posted January 31 Share Posted January 31 Hm, your demo isn't even loading GSAP or MotionPathPlugin, but even when I fixed that, your code was referencing non-existent elements and throwing errors. I'm not familiar with EPUB3, sorry. If you'd like some help, please make sure you provide a minimal demo that clearly illustrates the issue (like that CodePen, but with proper markup and loading stuff). Once we see an isolated demo, we'll do our best to jump in and help with your GSAP-specific questions. ✅ Link to comment Share on other sites More sharing options...
EDGE DPUB Posted January 31 Author Share Posted January 31 13 minutes ago, GSAP Helper said: Hm, your demo isn't even loading GSAP or MotionPathPlugin, but even when I fixed that, your code was referencing non-existent elements and throwing errors. I'm not familiar with EPUB3, sorry. If you'd like some help, please make sure you provide a minimal demo that clearly illustrates the issue (like that CodePen, but with proper markup and loading stuff). Once we see an isolated demo, we'll do our best to jump in and help with your GSAP-specific questions. ✅ Thank you for the quick reply. It's working now. I took the xhtml file that I had on my desktop and replaced it with the other. The other was copied and pasted from the EPUB3 document. Link to comment Share on other sites More sharing options...
Rodrigo Posted January 31 Share Posted January 31 Hi, There is an error in your codepen. It's missing an element with this ID: animated-bg which seems kind of relevant due to all the places where you selected in your JS: document.getElementById("animated-bg").style.background = "linear-gradient(0deg, rgba(205, 237, 246, 1) 0%, rgba(36, 123, 160, 1) 100%)"; // same background colors used below in GSAP timeline; const animatedBg = document.getElementById("animated-bg"); animatedBg.appendChild(sun); gsap.to("#animated-bg", {...}); .to("#animated-bg", { background: "linear-gradient(0deg, rgba(205, 237, 246, 1) 0%, rgba(36, 123, 160, 1) 100%)", // how background-colors change; from dawn to late noon, duration: 10, }); I don't know which element of your HTML should have that ID so I didn't tried to add it to one. Happy Tweening! Link to comment Share on other sites More sharing options...
EDGE DPUB Posted January 31 Author Share Posted January 31 26 minutes ago, Rodrigo said: Hi, There is an error in your codepen. It's missing an element with this ID: animated-bg which seems kind of relevant due to all the places where you selected in your JS: document.getElementById("animated-bg").style.background = "linear-gradient(0deg, rgba(205, 237, 246, 1) 0%, rgba(36, 123, 160, 1) 100%)"; // same background colors used below in GSAP timeline; const animatedBg = document.getElementById("animated-bg"); animatedBg.appendChild(sun); gsap.to("#animated-bg", {...}); .to("#animated-bg", { background: "linear-gradient(0deg, rgba(205, 237, 246, 1) 0%, rgba(36, 123, 160, 1) 100%)", // how background-colors change; from dawn to late noon, duration: 10, }); I don't know which element of your HTML should have that ID so I didn't tried to add it to one. Happy Tweening! The animated background is a sunrise. It appears in Version 02: See the Pen BabrNzz by edgedpub (@edgedpub) on CodePen For some reason, in Codepen the shuffle button is missing. It should look like this: https://www.edgedpub.com/Tape_Mark_III/version-02.html Link to comment Share on other sites More sharing options...
Rodrigo Posted January 31 Share Posted January 31 Hi, Is this working as you expect or not? I see that you have the MotionPath Plugin but you're not using it anywhere. Also you can animate an object to rotate like the sun element you have now with GSAP without the need of an update callback: See the Pen bGKaMbo by GreenSock (@GreenSock) on CodePen Happy Tweening! Link to comment Share on other sites More sharing options...
EDGE DPUB Posted February 11 Author Share Posted February 11 The JavaScript animation works now! In the XHTML file, I moved the JS link from the <head> to the last line of the <body>. https://www.edgedpub.com/sample_work_6.php 1 Link to comment Share on other sites More sharing options...
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment
Create an account
Sign up for a new account in our community. It's easy!
Register a new accountSign in
Already have an account? Sign in here.
Sign In Now