Buttons with animation

Question

Hi

We use a lot a type of buttons that animate texts or images. The button has the animation Appear and once the animation/s happens we mark Show/hide buttons. In the new version doesn't work.

I've tried several things, but nothing works. For example, if I delete the animation Appear of the button, only works once because when I turn the page and go back to the page the button doesn't appear anymore.

Here are the document, an exportation with the 3.4.1 version and ID 2019 (it works here, but in my new computer [macOS Big Sur] I can't install this version, I don't now why) and an exportation with ID 2021 with the last version (doesn't work).

https://we.tl/t-S1pqEVcQfL

I use this kind of button at pages 03, 08, 11...

Furthermore, I attached a screenshot of another error message of In5.

Answer 1

Thank you for sending a link to your file, your output, and the error message.

For the button issue, I saw that all of the buttons are made of invisible rectangles (rectangles with no fill and no stroke), but they have an Appear animation preset applied. Because they are invisible, they don't need the Appear animation. Once I set the animation to None, then the buttons worked.

For the error message, we've been getting reports from M1 Mac users about that error. It appears that the content is still being exported. If you want to prevent the error message from appearing, then you can turn off Image Optimization.

I hope that helps.

Comments

Hi

Thanks for the answer.

We put animation to the invisible button because we want, once the animation happened, the user cannot press button again. 

As I told in my first message, if I delete the animation of the button and use hide/show buttons, only works once because when I turn the page and go back to the page the button doesn't appear anymore.

The problem is that we have a lot of previous work that is sometimes updated. From now on I will not put the animation.

---

If you want to be able to go to another page and then come back to the page with the content that is revealed after clicking the buttons, then you can add the following JavaScript in the Resources section of the export dialog:

$(document).on('pageRendered',function(){ 
    $('.activePage, .activePage .page-scale-wrap').removeAttr('data-ani-load').find('[data-ani][data-hidestart]').one('webkitAnimationStart msAnimationStart animationstart', function(e){
        $(this).removeAttr('data-hidestart').removeClass('hidden').attr('style', $(this).attr('style')+'display:block !important;');   
    }); 
});

---

Hi

Thank you very much for your answer.

I've tried the JavaScript and I almost have it with that, but I just want that when I return to the page, the transparent buttons can be pressed, not the texts that had come out when pressed.

---

I'm using page 11 as an example to make sure I understand correctly. It sounds like you would like the following:

• The 3 lines of gold text with a Fade In animation
• The invisible buttons over the text to be clickable, each with an action to play the Fade In animation for the corresponding black text
• After going to another page and coming back to page 11, the first two bullets above would be true again

If those are the case, then you can remove the Appear animation on the buttons and the Show/Hide action on each of the buttons. You also would not add the JavaScript above.

---

The M1 Mac Image Optimization issue has been fixed in the latest version of in5.