Tutorial: https://www.youtube.com/watch?v=Fmsrx82FwBY
<script src="<https://cdnjs.cloudflare.com/ajax/libs/protonet-jquery.inview/1.1.2/jquery.inview.min.js>"></script>
<script>
// © Code by T.RICKS, <https://www.tricksdesign.com/>
// You have the license to use this code in your projects but not redistribute it to others
// Stagger your animation
$(".trigger").each(function (i) {
var $item = $(this);
setTimeout(function() {
$item.click();
}, 200*i);
// delays the next animation by 200 milliseconds
});
// TRIGGERS
// Wait before playing animation
setTimeout(() => {
// Put the play below this line
}, 800);
// Play animation when something is clicked
$( ".your-button-class" ).click(function() {
// Put the play below this line
});
// Play animation when hovered in
$( ".your-button-class" ).mouseenter(function() {
// Put the play below this line
});
// Play animation when hovered out
$( ".your-button-class" ).mouseleave(function() {
// Put the play below this line
});
// Play animation when scrolled into view
$('#heading-container').one('inview', function(event, isInView) {
if (isInView) {
// Put the play below this line
} else {
}
});
</script>