We Keep Coding

On a scroll to activate animation event, how to make the animation NOT to play again when scrolling back up

In my website, I have a series of animated full width blocks that will be activated on a scrolling event, the problem is that the animation will play again if the user decides to scroll up to the previous block, how can I make each block to stay once the animation is played during the first time scrolling down event? Thanks!
Here is the Fiddle, any help will be much appreciated!
var $animation_elements = $('.animatedelements');
var $window = $(window);
var cont = 0;
const MULTIPLIER = 300; //millis
function check_if_in_view() {
var window_height = $window.height();
var window_top_position = $window.scrollTop();
var window_bottom_position = (window_top_position + window_height + 15);
$.each($animation_elements, function() {
var $element = $(this);
var element_height = $element.outerHeight();
var element_top_position = $element.offset().top;
var element_bottom_position = (element_top_position + element_height);
//check to see if this current container is within viewport
if ((element_bottom_position >= window_top_position) &&
(element_top_position <= window_bottom_position)) {
if($element.is($('div').parent()) && !$element.hasClass('fadeInUp')) {
cont++;
var delay = MULTIPLIER * cont;
$element.addClass('fadeInUp');
//Pause animation.
$element.addClass('paused');
setTimeout(function() {
//Start animation
$element.removeClass('paused');
cont--;
}, delay);
}else {
$element.addClass('fadeInUp');
}
} else {
$element.removeClass('fadeInUp');
}
});
}
$window.on('scroll resize', check_if_in_view);
$window.trigger('scroll');

Scroll a specific element inside container using JS or jQuery

I have huge sidebar element and when the page is scrolled sidebar point to the current element that is in a viewport. But sometimes active element is out of sidebar visible space i.e below or above borders. And then the user needs to scroll manually to be able to see active element.
I want to try use logic for determining if the active element is out sidebar visible space and auto scroll if needed.
$(window).on('scroll', function () {
var scrollTop = $(this).scrollTop();
var container = $('#sectionMenu');
var containerHeight = container.height();
$(data).each(function () {
var topDistance = $(this).offset().top - 250;
var id = $(this).attr('id');
var elem = $('#_' + id);
if ((topDistance) < scrollTop && (topDistance + $(this).height() * 0.95) > scrollTop) {
if (autoScrollFlag) {
if (!elem.hasClass('sideBarActive')) {
var scrollPosition = elem.offset().top - container.offset().top;
removeActiveMenuItems(data);
elem.addClass('sideBarActive');
if (containerHeight < scrollPosition) {
// TODO automated scroll
}
}
}
autoScrollFlag = 1;
}
});
});

The solution that has worked for me was like this.
if (containerHeight < scrollPosition) {
container.animate({
scrollTop: '+=100px'
}, 800);
}

execute jquery function for each element containing class

The below function mostly works - it moves the backgrounds as I need, however I would like the function to run on any element with a class of "animate", rather than having to call each element down the bottom. I tried $('.animate').load(function(){}; but it just wont work... Thanks
JAVASCRIPT
$(window).load(function(){
(function(){
$.fn.move = function(){
var $this = $(this);
var offset = $this.offset().top;
var start = 0;
var end = offset + $this.height();
var speed = $this.attr("speed");
return this.each(function(){
$(window).bind('scroll', function() {
var windowPos = $(window).scrollTop();
if((windowPos >= start) && (windowPos <= end)) {
var newCoord = windowPos * speed;
$this.css({'background-position': '0 '+ newCoord + 'px'});
};
});
});
};
})(jQuery);
$('.animate').move();
});
HTML
<div class="welcome_6"></div>
<div class="welcome_5"></div>
<div class="welcome_4"></div>
<div class="welcome_3"></div>
<div class="welcome_2 animate" speed="-1"></div>
<div class="welcome_1 animate" speed="0"></div>
EDIT:
When I scroll the page the elements move according to the scroll location. Each element moves at a different speed (set as html attribute). This code moves them all at the same speed.. I'm assuming the $('.animate') should be somewhere up the top replacing the $.fn.move but i cant figure it out..

Should be $('.animate') instead of $('animate') note the dot at the start of the query which says to the jQuery that you are looking for a class.

I think the issue is with the way you are using the immediately invoked function inside the load function and you are passing in jQuery at the bottom and not into the immediately invoke function. This will update the background position as long as you script tag is placed after the jquery script tag
Here is a link to js fiddle:
UPDATE: https://jsfiddle.net/kriscoulson/pnrx34wp/1/
I do not have your exact code for styling so I improvised but if you inspect the elements the background position is being updated;
AND UPDATE :
$.fn.move = function() {
var $this = $(this);
var offset = $this.offset().top;
var start = 0;
var end = offset + $this.height();
return this.each(function(index, element) {
var $element = $(element);
var speed = $element.attr("speed");
$(window).bind('scroll', function() {
var windowPos = $(window).scrollTop();
if ((windowPos >= start) && (windowPos <= end)) {
var newCoord = windowPos * speed;
$element.css({
'background-position': '0 ' + newCoord + 'px'
});
};
});
});
};
$(document).ready(function() {
$('.animate').move();
});
EDIT: Your 'this' binding was off and your speed was declared outside of the this.each

Animation continues after once trigged by scroll

I made a bar chart only with CSS and a animation from low to up that works well, however I want to run only when trigged by scroll.
Somehow the animation after trigged by the scroll does not stop, it keeps running.
look in the inspect element the latest bar.
jquery
// Bar Chart Animation
function barChart(){
$("#demographicsBars li .bar").each( function( key, bar ) {
var percentage = $(this).data('percentage');
$(this).animate({
'height' : percentage + '%'
}, 1000, function() {
$('.viewerDemographics #demographicsBars li .bar').css('overflow','inherit');
});
});
};
// Scroll Call Animation
$(window).scroll(function () {
$('.viewerDemographics').each(function () {
var imagePos = $(this).offset().top;
var imageHeight = $(this).height();
var topOfWindow = $(window).scrollTop();
if (imagePos < topOfWindow + imageHeight && imagePos + imageHeight > topOfWindow) {
barChart();
} else {
}
});
});
jsfiddle

It's because you're asking it to.
http://jsfiddle.net/g6r1vngh/1/
Tell JS it hasn't been drawn
// Bar Chart Animation
var barChartDrawn = false;
Set it to true when it runs
function barChart(){
barChartDrawn = true;
Don't do any of those calculations, or run the function, if it's true
$(window).scroll(function () {
if (barChartDrawn) return;

making a function works on specific widths

I am trying to make this function works only when the screen size is above 1024px.
//Parallax background image
var velocity = 0.5;
function update(){
var pos = $(window).scrollTop();
$('.parallax').each(function() {
var $element = $(this);
var height = $element.height();
$(this).css('background-position', '40%' + Math.round((height - pos) * velocity) + 'px');
});
};$(window).bind('scroll', update); update();
Here is what I have tried to do:
//Parallax background image
var velocity = 0.5;
$(window).on("ready resize", function() {
if ($(window).width() < 770) {
function update(){
var pos = $(window).scrollTop();
$('.parallax').each(function() {
var $element = $(this);
var height = $element.height();
$(this).css('background-position', '40%' + Math.round((height - pos) * velocity) + 'px');
});
};});$(window).bind('scroll', update); update();
I really don't know what I am doing wrong...

You haven't stated what the problem you're coming across is. If it's "my code doesn't work", then perhaps you should check your syntax first. Your braces are messed up.
//Initialize velocity and empty update function
var velocity = 0.5;
var update = function () {};
//When window is ready (content loaded) OR resized, execute the following function
$(window).on("ready resize", function () {
if ($(window).width() >= 1024) { //Check if window width is 1024px wide or larger
update = function () { //Set update to run this function when executed.
var pos = $(window).scrollTop(); //Get scrollbar position https://api.jquery.com/scrollTop/
//For each element with 'parallax' class, execute the following function
$('.parallax').each(function () {
var $element = $(this); //Get the current parallax-classed element
var height = $element.height(); //Save the current height of this element
//Set the CSS of this parallax-classed element set the background position
$(this).css('background-position', '40% + ' + Math.round((height - pos) * velocity) + 'px');
});
};
} else { //Execute if screen width is < 1024px
update = function () {}; //Set update to do nothing
}
});
//When window is scrolled through, run the update function
$(window).bind('scroll', update);
//update();
Last line is unnecessary, as resize will handle function value, and scroll will handle the execution.
You were missing a + or - within the background-position setting.
So for example, if the result of your Math.round() was "30", then Javascript would interpret that line as $(this).css('background-position', '40%30px'); which obviously would cause issues. I'm sure you wanted it to say something like $(this).css('background-position', '40% + 30px');.