I am trying to animate a triangle at the bottom of the screen into view from the bottom when a specific class is applied to it.
css
.fade-in { bottom: -30px; }
.btn-visible.fade-in #top-btn-BG { bottom: 0; }
#top-btn a {
position: fixed;
z-index: 999;
padding: 30px 30px 25px 25px;
color: #707070;
bottom: 0; right: 0;
}
#top-btn-BG {
display: block;
position: fixed;
z-index: 950;
border-width: 0 0 125px 125px;
border-color: transparent transparent #fff transparent;
border-style: solid;
right: 0;
width: 0; height: 0;
-webkit-transform:rotate(360deg);
}
html
<div id="top-btn" class="flex fade-in">
<a href="javascript:void(0);" onclick="scrolltop();"><i class="fa fa-long-arrow-up fa-lg"></i></a>
<div id="top-btn-BG"></div>
</div>
php
jQuery(document).ready(function($){
// adjust this number to select when your button appears on scroll-down
var offset = 300,
scroll_top_duration = 3000,
// bind with the button link
$animation = $('.fade-in');
// apply animation
$(window).scroll(function(){
( $(this).scrollTop() > offset ) ? $animation.addClass('btn-visible') :
$animation.removeClass('btn-visible');
});
...
The code successfully adds the btn-visible class to .fade-in when the user scrolls, but I am struggling to get the animation to work. I need help figuring out where to apply transition css to ensure the entire #top-btn div animates up or down smoothly.