Scroll Activated Animation - How to do it?

Vaadin 6 / 7 / 8
1

Hello,

as you can see those scroll activated animations everywhere, I wanted to try out something similar using Vaadin.

My first attempt was to include
WOW.js
 using a custom Servlet Implementation:

public class CustomServlet extends VaadinServlet {

    @Override
    protected void servletInitialized()
            throws ServletException {

        super.servletInitialized();

        getService().addSessionInitListener(new SessionInitListener() {

            @Override
            public void sessionInit(SessionInitEvent event)
                    throws ServiceException {

                event.getSession().addBootstrapListener(new BootstrapListener() {

                    @Override
                    public void modifyBootstrapFragment(BootstrapFragmentResponse response) {
                    }

                    @Override
                    public void modifyBootstrapPage(BootstrapPageResponse response) {
                        Element head = response.getDocument().head();

                        head.prependElement("script").attr("type", "text/javascript").append("new WOW().init();");
                        head.prependElement("script").attr("type", "text/javascript")
                            .attr("src", "https://rawgit.com/matthieua/WOW/master/dist/wow.js");

                        head.prependElement("script").attr("type", "text/css").attr("rel", "stylesheet")
                            .attr("src", "https://rawgit.com/daneden/animate.css/master/animate.css");

                    }
                });
            }
        });
    }
}

And then simply use a CustomLayout where the Dom-elements would have the appropriate CSS-classes. I thought this might work, as WOW.js discovers “live” if new elements are added to the DOM without any effort.

Unfortunately this does not seem to work (Exception in JavaScript console).

Has anyone an idea on how to accomplish this using Vaadin?

Thank you very much!

2

What JS exception do you get?

3

Actually I just saw that I had wrong code in the servlet modification I posted:

head.prependElement("script").attr("type", "text/css").attr("rel", "stylesheet").attr("src", "https://rawgit.com/daneden/animate.css/master/animate.css");

should be replaced with:

head.prependElement("link").attr("type", "text/css").attr("rel", "stylesheet").attr("href", "https://rawgit.com/daneden/animate.css/master/animate.css");

But it still doesn’t work.

With the new version of WOW.js I do not an exception anymore, but it simply does not work.
The elements style gets modified by WOW to be invisible, but unfortunately it does not appear on scroll.

It would be really great if this somehow works, because you could make a nice welcome page using those animations.

4

Hi again, sorry for the long delay.

Haven’t checked really how WOW.js works, but does it expect the BODY element to scroll, or can you attach it to any scrollable element? Since Vaadin UI’s scroll the .v-ui element instead of the BODY by default, that might be the source of problem.

5

Ah, i think you’re right, this might be the source of the problem (also see
https://github.com/matthieua/WOW/issues/65
).

Thank you for the hint, didn’t think about that!