Controlling the scroll eventlistener

programming web dev
1

Hello.
I’m trying to control a ‘scroll’ eventlistener and I added some conditionals within the function it’s calling. But I’m not having success. It’s actually harder than I originally thought it would be to do this.
Any advice? Thanks!
~B
fx.js (1.1 KB)

2

I made it work. But, I’m sure there’s a better way to do this.

fx.js (1.1 KB)

3

The JS file shows up as a blank document when I try to click it. Can you post the relevant sections of code in the response? You can click on the </> button to format your code as…code! :stuck_out_tongue:

4

Hi Kirupa. Thank you!

indent preformatted text by 4 spaces

var qs = function(selector)
{
	return document.querySelector(selector);
}

// This specificity was an attempt to prevent the nested </H1> tag from scaling 
// along with the /header class="heads" tag 
var head = qs('.wrapper > .heads');


	//console.log("add event listener");
	window.addEventListener('scroll',stop, true); 
	
	
function stop()
{
	
	if(scrollY <= 1)
	{
		//console.log("attempting to remove event listener");
		window.removeEventListener('scroll',stop, true);
		//console.log("adding the animDown()");
		window.requestAnimationFrame(animDown);
		window.addEventListener('scroll',stop, true); 
	}
	
	else if(scrollY < 20)
	{    
	
		//console.log("adding the animUp()");
		window.requestAnimationFrame(animUp);
		
	}
}


var animUp = function()
{
	//console.log("running animUp!");

	head.animate(
		[
			{   
			    opacity: 0,
				transform:"none",
				backgroundColor:"#d2e59e"
			},
			{
				opacity: 1,
				transform:"scaleY(4)",
				backgroundColor: "red"
			}
		],
		{
			duration: 1000,
			easing: "ease-in-out",
			fill:"both"
		});
		
}


var animDown = function()
{
	//console.log("running animDown!");

	head.animate(
		[
			{
				opacity: 1,
				transform:"scaleY(4)",
				backgroundColor: "red"
			},
			{
				opacity: 0,
				transform:"none",
				backgroundColor:"#d2e59e"
			}
		],
		{
			duration: 400,
			easing: "ease-in-out",
			fill:"both"
		});
}
5

Do you have a live version of this by any chance? From the code, you are going to be running two animations depending on whether you’ve scrolled <=1 pixel or whether you’ve scrolled < 20 pixels. What I am not sure about is how many times the browser will call the animUp and animDown. The expected answer should just be 1 :slight_smile:

:hamburger:

6

Hi Kirupa. That’s the ideal implementation. But, no it’s calling the code each and every scroll event which is not ideal I know. The site is local & done in notepad++. I’m a purist ; )

https://drive.google.com/open?id=0B4Nz3Ll115dud2Zza0w3bDRsSXM

Thank you!
Brad

7

Ah! One way of preventing the code from running the animation multiple times is by using a variable to act as a signal. If that variable is set to true, your animation code will not run more than once. If that variable were to be set to false, your animation code will run. As part of your animation code running, its variable will be set to true to avoid it from running again. I should warn you that I haven’t tested the following code snippet - only created it on the fly to highlight how it might work :stuck_out_tongue:

var qs = function(selector) {
  return document.querySelector(selector);
}

// This specificity was an attempt to prevent the nested </H1> tag from scaling
// along with the /header class="heads" tag
var head = qs('.wrapper > .heads');


//console.log("add event listener");
window.addEventListener('scroll', stop, true);

var animDownPaused = true;
var animUpPaused = true;


function stop() {
    if (scrollY <= 1) {
        //console.log("attempting to remove event listener");
        window.removeEventListener('scroll', stop, true);
        //console.log("adding the animDown()");
        window.requestAnimationFrame(animDown);
        window.addEventListener('scroll', stop, true);
    } else {
      animDownPaused = true;
    }

    if (scrollY < 20) {
        //console.log("adding the animUp()");
        window.requestAnimationFrame(animUp);
    } else {
      animUpPaused = true;
    }
}


var animUp = function() {
    //console.log("running animUp!");

    if (animUpPaused) {
      animUpPaused = false;

      head.animate(
          [{
              opacity: 0,
              transform: "none",
              backgroundColor: "#d2e59e"
          }, {
              opacity: 1,
              transform: "scaleY(4)",
              backgroundColor: "red"
          }], {
              duration: 1000,
              easing: "ease-in-out",
              fill: "both"
          });
    }
}


var animDown = function() {
    //console.log("running animDown!");

    if (animDownPaused) {
      animDownPaused = false;

      head.animate(
          [{
              opacity: 1,
              transform: "scaleY(4)",
              backgroundColor: "red"
          }, {
              opacity: 0,
              transform: "none",
              backgroundColor: "#d2e59e"
          }], {
              duration: 400,
              easing: "ease-in-out",
              fill: "both"
          });
      }
}

Notice how I am using the animDownPaused and animUpPaused variables to act as the mechanism I described to prevent your code from running the animation more than once when you are scrolling under 20 pixels or 1 pixel :slight_smile:

Does this help?