So I finally got this animation up and running but when the animation runs it jerks the user to the top of the page and I'd like to prevent that from happening
I only found one instance of this problem, but it was with jquery not js: JQuery animation makes page jump to top
and the solution unfortunately isn't applicable.
Here's a video example of what's going on.
https://www.loom.com/share/c01501a08221486fba09da1b3e6c362f
Here's all my code for the page.
edit: new code works but isn't smooth animation
edit: Got it! Below snippet works. Thanks.
function printDays() {
var today = new Date();
var business_days = 2;
var deliveryDate = today;
var total_days = business_days;
for(var days=1; days <= total_days; days++) {
deliveryDate = new Date(today.getTime() + (days *24*60*60*1000));
if(deliveryDate.getDay() == 0 || deliveryDate.getDay() == 6) {
total_days++
}
}
var deliveryDayNumber = deliveryDate.getDay();
var deliveryDay = ["Sunday","Monday","Tuesday","Wednesday","Thursday","Friday","Saturday"]
[deliveryDayNumber];
const months = [
'January',
'February',
'March',
'April',
'May',
'June',
'July',
'August',
'September',
'October',
'November',
'December'
];
const monthIndex = deliveryDate.getMonth();
const monthName = months[monthIndex];
const deliveryNumber = deliveryDate.getDate();
const formatted = `${deliveryDay} - ${monthName} ${deliveryNumber}`;
document.getElementById("deliveryEstimateDay").innerHTML = formatted;
}
printDays()
setTimeout(function(){
document.getElementById('deliveryDiv').style.transform = 'translatex(0vw)';
}, 100);
document.getElementById("deliveryDiv").style.transitionDuration = "500ms";
#deliveryDiv{
position: relative;
transform: translateX(100vw);
}
<div class="buttonbox">
<h4 class="paragraph">Free Delivery: </h4>
<div id="deliveryDiv">
<h3 id="deliveryEstimateDay" class="paragraph">
-
</h3>
</div>
<a class="link" href="checkout.html"><button class="actionbutton">Buy Now →</button></a>
<hr class="dividermid">
</div>