Animate-it clashing with Materalize Date-Picker - html

Question

There's a weird issue that I had popped into a few days ago, but still cannot find a suitable solution as to how best to go about fixing it. I am currently creating a website where-in I need a certain date-picker to be used (Materalize Date-Picker).
https://codepen.io/Shadow1209/pen/oWvxav
//HTML
<div class="col-md-5 horizontal">
<div class="">
<form class="contact-form form">
<fieldset class="fieldset">
<legend class="legend">Some Form</legend>
<input type="text" name="Name" placeholder="Name" class="textbox">
<input type="text" name="Surname" placeholder="Surname" class="textbox surname">
<input type="email" name="Email" placeholder="Email" class="textbox">
<input type="text" name="Phone" placeholder="Phone Number" class="textbox phone">
<input type="date" name="Start Date" placeholder="Start Date" class="textbox datepicker">
<input type="date" name="End Date" placeholder="End Date" class="textbox datepicker">
<textarea name="Enquiry" placeholder="Enquiry" class="textbox textarea"></textarea>
<button type="submit" name="Submit" class="form-button">Some Button</button>
</fieldset>
</form>
</div>
</div>
<div class=" col-md-5 horizontal">
<div class=" ">
<form class="contact-form form">
<fieldset class="fieldset">
<legend class="legend">Some Form</legend>
<input type="text" name="Name" placeholder="Name" class="textbox">
<input type="text" name="Surname" placeholder="Surname" class="textbox surname">
<input type="email" name="Email" placeholder="Email" class="textbox">
<input type="text" name="Phone" placeholder="Phone Number" class="textbox phone">
<input type="date" name="Start Date" placeholder="Start Date" class="textbox datepicker">
<input type="date" name="End Date" placeholder="End Date" class="textbox datepicker">
<textarea name="Enquiry" placeholder="Enquiry" class="textbox textarea"></textarea>
<button type="submit" name="Submit" class="form-button">Some Button</button>
</fieldset>
</form>
</div>
</div>
//CSS
.horizontal
{
display:inline-block;
}
//JS
.horizontal
{
display:inline-block;
}
There you can find an example of code that I just quickly arranged to display the "normal" way that the date-picker is supposed to work; basically once the start-date or end-date is clicked on, the pop-up takes over the viewport and centers itself there.
However, once I added animations to the project by means of Animate-it in order to include scrolling animations, issues arose, where the date-picker would suddenly no longer cover the viewport, but rather just the section (form) itself, as can be seen here:
(To add animations, I added the animatedParent and animateOnce classes to the outer container, and the animated fadeInDown classes to the inner containers, as described by the code-creator)
https://codepen.io/Shadow1209/pen/QvLEEB
<div class="animatedParent animateOnce col-md-5 horizontal">
<div class="animated fadeInDown">
<form class="contact-form form">
<fieldset class="fieldset">
<legend class="legend">Some Form</legend>
<input type="text" name="Name" placeholder="Name" class="textbox">
<input type="text" name="Surname" placeholder="Surname" class="textbox surname">
<input type="email" name="Email" placeholder="Email" class="textbox">
<input type="text" name="Phone" placeholder="Phone Number" class="textbox phone">
<input type="date" name="Start Date" placeholder="Start Date" class="textbox datepicker">
<input type="date" name="End Date" placeholder="End Date" class="textbox datepicker">
<textarea name="Enquiry" placeholder="Enquiry" class="textbox textarea"></textarea>
<button type="submit" name="Submit" class="form-button">Some Button</button>
</fieldset>
</form>
</div>
</div>
<div class="animatedParent animateOnce col-md-5 horizontal">
<div class="animated fadeInDown">
<form class="contact-form form">
<fieldset class="fieldset">
<legend class="legend">Some Form</legend>
<input type="text" name="Name" placeholder="Name" class="textbox">
<input type="text" name="Surname" placeholder="Surname" class="textbox surname">
<input type="email" name="Email" placeholder="Email" class="textbox">
<input type="text" name="Phone" placeholder="Phone Number" class="textbox phone">
<input type="date" name="Start Date" placeholder="Start Date" class="textbox datepicker">
<input type="date" name="End Date" placeholder="End Date" class="textbox datepicker">
<textarea name="Enquiry" placeholder="Enquiry" class="textbox textarea"></textarea>
<button type="submit" name="Submit" class="form-button">Some Button</button>
</fieldset>
</form>
</div>
</div>
I have even tried changing from Animate-It to Wow Animations, but the problem stayed the same.
While investigating the code, I found out that, should I remove the classes 'animated', 'fadeInDown', and the newly automatically added 'go' class, the issue goes away. This in turn made me think that maybe a way to work around the issue would be to create an on click event that removes the classes from the parent container once a date-selector field has been clicked on, however this does not really seem like a solution to the issue and more of a work-around.
My question would be, "Is there a good way to go about fixing the issue rather than having to resort to creating a work-around?"
Thank you for any help.