I would like to have an simple animation for text, but the animation should start when the user is scrolled to the element.
I found this Fade in letter by letter with JQuery and modified like this:
(function($) {
//get the welcome msg element
var $all_msg = $('#welcome_msg');
//get a list of letters from the welcome text
var $wordList = $('#welcome_msg').text().split("");
//clear the welcome text msg
$('#welcome_msg').text("");
//loop through the letters in the $wordList array
$.each($wordList, function(idx, elem) {
//create a span for the letter and set opacity to 0
var newEL = $("<span/>").text(elem).css({
opacity: 0
});
//append it to the welcome message
newEL.appendTo($all_msg);
//set the delay on the animation for this element
newEL.delay(idx * 20);
// Var for scrolling
var hT = $('#welcome_msg').offset().top,
hH = $('#welcome_msg').outerHeight(),
wH = $(window).height(),
wS = $(this).scrollTop();
$(window).scroll(function() {
if (wS > (hT+hH-wH)){
//animate the opacity back to full 1
newEL.animate({
opacity: 1
}, 1100);
}
});
});
})( jQuery );
Sadly it's not working. What am I doing wrong?
You have to get scroll top inside the window scroll handler not outside of it
(function($) {
//get the welcome msg element
var $all_msg = $('#welcome_msg');
//get a list of letters from the welcome text
var $wordList = $('#welcome_msg').text().split("");
//clear the welcome text msg
$('#welcome_msg').text("");
//loop through the letters in the $wordList array
$.each($wordList, function(idx, elem) {
//create a span for the letter and set opacity to 0
var newEL = $("<span/>").text(elem).css({
opacity: 0
});
//append it to the welcome message
newEL.appendTo($all_msg);
//set the delay on the animation for this element
newEL.delay(idx * 20);
// Var for scrolling
var hT = $('#welcome_msg').offset().top,
hH = $('#welcome_msg').outerHeight(),
wH = $(window).height();
//console.log(hT,hH, wH);
$(window).scroll(function() {
wS = $(this).scrollTop();
//console.log(wS, hT+hH-wH);
if (wS > (hT+hH-wH)){
//animate the opacity back to full 1
newEL.animate({
opacity: 1
}, 1100);
}
});
});
})( jQuery );<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div style="height:800px">section with height to scroll</div>
<div id="welcome_msg">Welcome to the example snippet</div>