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!