I have been experimenting with Animate.CSS and basic Jquery to add animations to elements coming on and off the screen. However, a problem I have encountered is that there is noticeable lag, especially when there is a background slideshow running simultaneously. I have been researching alternative methods to address this issue.
One solution I am considering is using Opacity and TranslateZ to control how elements enter and exit the page.
I am seeking suggestions on how to modify the code below to reduce lag during animations:
//Screen 7 Start
//Highest Planned College
$( "#screen7" ).hide()
$(".buttonsQuestion7").click(function() {
$('#screen7').addClass('animated slideOutUp');
$('#screen7').fadeOut()
$( "#screen8" ).show()
$( "#screen8" ).addClass('animated slideInUp');
});