demo issue

[procmail]

Hi,

In your demo (http://morphist.fyianlai.com/), if one chooses "fadeInDownBig" as animation in, and then for animation out, an effect from the "Attention Seekers" section (eg tada), then the animation stops. The next object will not be rotated in.

This occurs not only for "fadeInDownBig", but also for any of the "* Entrances" effects as animation in.

Edit:
Randomly trying, it seems the combination lightSpeedIn and bounceOut has the same problem as well.

[MrSaints]

Thank you for the report.

I identified the problem a while back, but I hadn't got the chance to refactor the source (root of the problem) - see #1 . I'll find time to do so in the coming week.

Anyway, the problem is caused by the animateOut CSS class being overwritten by the animateIn class in some instances. Thus, no animationend event is fired to continue the animation cycle.

It can be eradicated by simply removing the animateIn class before the animateOut one is applied like so (2nd line):

this.children.eq(this.prev)
    .removeClass(this.settings.animateIn)
    .addClass(this.settings.animateOut)
    .one("webkitAnimationEnd mozAnimationEnd MSAnimationEnd oanimationend animationend", function() {
        $(this).removeClass();
        $that.animate();
    });

[MrSaints]

Temporary fix applied 0c972e4.

Let me know if you encounter any problems.
Thanks again!

[procmail]

Sorry for the late response.

Works fine now, and thanks for the quick fix.

[procmail]

Hi,

Sorry, it's me again.

In the demo if I choose Flash and Flash, or Tada and Tada, or Bounce and Bounce, etc, the demo stops working.

[MrSaints]

Hey @procmail,

Thanks again for the report.

I'm aware of this. It's because I haven't updated the JS plugin file for the demo itself.
I'll resolve it ASAP and get back to you.

Many thanks again 👍

[procmail]

Hi Ian,

You're welcome.

The reason I reported it was because I noticed it on my own web pages despite using the latest Morphist plugin, which was why I went to test on your demo site.

Looking forward to your fix :)

Regards,

Eric

On 14 Jan 2015, at 1:01 am, Ian Lai [email protected] wrote:

Hey @procmail,

Thanks again for the report.

I'm aware of this. It's because I haven't updated the JS plugin file for the demo itself.
I'll resolve it ASAP and get back to you.

Many thanks again

—
Reply to this email directly or view it on GitHub.

[MrSaints]

Hi again @procmail,

I've resolved the issue in f3f3105 (master) and 4d152fd (gh-pages).

Many thanks again for the report.

It turned out to be an interesting issue which only occurs when the in and out animation types are the same. As we are technically reapplying the same animation class, browser reflow was not triggered and as a result, the out animation was not fired causing the cycle to terminate prematurely.

I added a check to force browser reflow if the animation types are the same (although I think this is quite uncommon in production use, nevertheless, it's there).

Thanks again!

[procmail]

Hi Ian,

Sorry to bother you again.

On my own pages, using v2.0.1, the following happens when I choose bounce-bounce and tada-tada animations, in Safari 8.0.2

1. first item animates fine, then animates out
2. second item doesn’t show up at all.

However, it seems to be showing fine in Chrome.

Also, your demo page Preview tweets aren’t showing at all on Safari, but works fine on Chrome. I’m not sure if this happened prior to your latest fix as I didn’t use Safari to browse the demo page previously.

Regards,

Eric

On 17 Jan 2015, at 11:11 am, Ian Lai [email protected] wrote:

Hi again @procmail https://github.com/procmail,

I've resolved the issue in f3f3105 f3f3105 (master) and 4d152fd 4d152fd (gh-pages).

Many thanks again for the report.

It turned out to be an interesting issue which only occurs when the in and out animation types are the same. As we are technically reapplying the same animation class, browser reflow was not triggered and as a result, the out animation was not fired causing the cycle to terminate prematurely.

I added a check to force browser reflow if the animation types are the same (although I think this is quite uncommon in production use, nevertheless, it's there).

Thanks again!

—
Reply to this email directly or view it on GitHub #2 (comment).

[MrSaints]

Hey @procmail, it's no bother at all! Thank you so much for the reports and pull request.
I haven't gotten a chance to install Safari to try it out, but I'll look into it ASAP 😝