Reformatting Javascript for x

Eyoael · November 21, 2017, 12:49pm

I have the following javascript that i’m trying to run on my site, but it doesn’t work. My question is how can i write this so that it runs? The javascript in question is structured the following way:

var callout1_location = 1,
    callout2_location = 0,
    callout3_location = 3;

$( ".js-infographic__callout1" ).click(function() {
var tl = new TimelineMax();

    if (callout1_location == 1) {
          tl.to(".js-infographic__callout-wrapper", 1, {rotation:120}, 0)
          .to(".js-infographic__callout1", 1, {rotation:-120, backgroundColor:"#D0D465"}, 0)
          .to(".js-infographic__callout1 path", 1, {fill:"white"}, 0)
          .to(".js-infographic__callout2", 1, {rotation:-120, backgroundColor:"white"}, 0)
          .to(".js-infographic__callout2 path", 1, {fill:"#D0D465"}, 0)
          .to(".js-infographic__callout3", 1, {rotation:-120, backgroundColor:"white"}, 0)
          .to(".js-infographic__callout3 path", 1, {fill:"#D0D465"}, 0)
          .call(function(){ callout1_location = 2 }, 0)
          .call(function(){ callout2_location = 3 }, 0)
          .call(function(){ callout3_location = 1 }, 0)
          .to(".js-infographic__description1", 1, {y:50, opacity:1}, 0)
          .to(".js-infographic__description2", 0.5, {y:100, opacity:0}, 0)
          .to(".js-infographic__description3", 0.5, {y:100, opacity:0}, 0)
          .to(".js-infographic__description2", 0, {y:0}, 1)
          .to(".js-infographic__description3", 0, {y:0}, 1);

    }

    if (callout1_location == 3) {
          tl.to(".js-infographic__callout-wrapper", 1, {rotation:120}, 0)
          .to(".js-infographic__callout1", 1, {rotation:-120, backgroundColor:"#D0D465"}, 0)
          .to(".js-infographic__callout1 path", 1, {fill:"white"}, 0)
          .to(".js-infographic__callout2", 1, {rotation:-120, backgroundColor:"white"}, 0)
          .to(".js-infographic__callout2 path", 1, {fill:"#D0D465"}, 0)
          .to(".js-infographic__callout3", 1, {rotation:-120, backgroundColor:"white"}, 0)
          .to(".js-infographic__callout3 path", 1, {fill:"#D0D465"}, 0)
          .call(function(){ callout1_location = 2 }, 0)
          .call(function(){ callout2_location = 1 }, 0)
          .call(function(){ callout3_location = 3 }, 0)
          .to(".js-infographic__description1", 1, {y:50, opacity:1}, 0)
          .to(".js-infographic__description2", 0.5, {y:100, opacity:0}, 0)
          .to(".js-infographic__description3", 0.5, {y:100, opacity:0}, 0)
          .to(".js-infographic__description2", 0, {y:0}, 1)
          .to(".js-infographic__description3", 0, {y:0}, 1);
    }

});


$( ".js-infographic__callout2" ).click(function() {
var tl = new TimelineMax();

    if (callout2_location == 0) {
          tl.to(".js-infographic__callout2", 1, {backgroundColor:"#D0D465"}, 0)
          .to(".js-infographic__callout2 path", 1, {fill:"white"}, 0)
          .call(function(){ callout1_location = 1 }, 0)
          .call(function(){ callout2_location = 2 }, 0)
          .call(function(){ callout3_location = 3 }, 0)
          .to(".js-infographic__description1", 0.5, {y:100, opacity:0}, 0)
          .to(".js-infographic__description2", 1, {y:50, opacity:1}, 0)
          .to(".js-infographic__description3", 0.5, {y:100, opacity:0}, 0)
          .to(".js-infographic__description1", 0, {y:0}, 1)
          .to(".js-infographic__description3", 0, {y:0}, 1);
    }
  
    if (callout2_location == 1) {
          tl.to(".js-infographic__callout-wrapper", 1, {rotation:0}, 0)
          .to(".js-infographic__callout1", 1, {rotation:0, backgroundColor:"white"}, 0)
          .to(".js-infographic__callout1 path", 1, {fill:"#D0D465"}, 0)
          .to(".js-infographic__callout2", 1, {rotation:0, backgroundColor:"#D0D465"}, 0)
          .to(".js-infographic__callout2 path", 1, {fill:"white"}, 0)
          .to(".js-infographic__callout3", 1, {rotation:0, backgroundColor:"white"}, 0)
          .to(".js-infographic__callout3 path", 1, {fill:"#D0D465"}, 0)
          .call(function(){ callout1_location = 1 }, 0)
          .call(function(){ callout2_location = 2 }, 0)
          .call(function(){ callout3_location = 3 }, 0)
          .to(".js-infographic__description1", 0.5, {y:100, opacity:0}, 0)
          .to(".js-infographic__description2", 1, {y:50, opacity:1}, 0)
          .to(".js-infographic__description3", 0.5, {y:100, opacity:0}, 0)
          .to(".js-infographic__description1", 0, {y:0}, 1)
          .to(".js-infographic__description3", 0, {y:0}, 1);
    }

    if (callout2_location == 3) {
          tl.to(".js-infographic__callout-wrapper", 1, {rotation:0}, 0)
          .to(".js-infographic__callout1", 1, {rotation:0, backgroundColor:"white"}, 0)
          .to(".js-infographic__callout1 path", 1, {fill:"#D0D465"}, 0)
          .to(".js-infographic__callout2", 1, {rotation:0, backgroundColor:"#D0D465"}, 0)
          .to(".js-infographic__callout2 path", 1, {fill:"white"}, 0)
          .to(".js-infographic__callout3", 1, {rotation:0, backgroundColor:"white"}, 0)
          .to(".js-infographic__callout3 path", 1, {fill:"#D0D465"}, 0)
          .call(function(){ callout1_location = 1 }, 0)
          .call(function(){ callout2_location = 2 }, 0)
          .call(function(){ callout3_location = 3 }, 0)
          .to(".js-infographic__description1", 0.5, {y:100, opacity:0}, 0)
          .to(".js-infographic__description2", 1, {y:50, opacity:1}, 0)
          .to(".js-infographic__description3", 0.5, {y:100, opacity:0}, 0)
          .to(".js-infographic__description1", 0, {y:0}, 1)
          .to(".js-infographic__description3", 0, {y:0}, 1);
    }

});


$( ".js-infographic__callout3" ).click(function() {
var tl = new TimelineMax();

    if (callout3_location == 1) {
          tl.to(".js-infographic__callout-wrapper", 1, {rotation:-120}, 0)
          .to(".js-infographic__callout1", 1, {rotation:120, backgroundColor:"white"}, 0)
          .to(".js-infographic__callout1 path", 1, {fill:"#D0D465"}, 0)
          .to(".js-infographic__callout2", 1, {rotation:120, backgroundColor:"white"}, 0)
          .to(".js-infographic__callout2 path", 1, {fill:"#D0D465"}, 0)
          .to(".js-infographic__callout3", 1, {rotation:120, backgroundColor:"#D0D465"}, 0)
          .to(".js-infographic__callout3 path", 1, {fill:"white"}, 0)
          .call(function(){ callout1_location = 3 }, 0)
          .call(function(){ callout2_location = 1 }, 0)
          .call(function(){ callout3_location = 2 }, 0)
          .to(".js-infographic__description1", 0.5, {y:100, opacity:0}, 0)
          .to(".js-infographic__description2", 0.5, {y:100, opacity:0}, 0)
          .to(".js-infographic__description3", 1, {y:50, opacity:1}, 0)
          .to(".js-infographic__description2", 0, {y:0}, 1)
          .to(".js-infographic__description1", 0, {y:0}, 1);
    }

    if (callout3_location == 3) {
          tl.to(".js-infographic__callout-wrapper", 1, {rotation:-120}, 0)
          .to(".js-infographic__callout1", 1, {rotation:120, backgroundColor:"white"}, 0)
          .to(".js-infographic__callout1 path", 1, {fill:"#D0D465"}, 0)
          .to(".js-infographic__callout2", 1, {rotation:120, backgroundColor:"white"}, 0)
          .to(".js-infographic__callout2 path", 1, {fill:"#D0D465"}, 0)
          .to(".js-infographic__callout3", 1, {rotation:120, backgroundColor:"#D0D465"}, 0)
          .to(".js-infographic__callout3 path", 1, {fill:"white"}, 0)
          .call(function(){ callout1_location = 3 }, 0)
          .call(function(){ callout2_location = 1 }, 0)
          .call(function(){ callout3_location = 2 }, 0)
          .to(".js-infographic__description1", 0.5, {y:100, opacity:0}, 0)
          .to(".js-infographic__description2", 0.5, {y:100, opacity:0}, 0)
          .to(".js-infographic__description3", 1, {y:50, opacity:1}, 0)
          .to(".js-infographic__description2", 0, {y:0}, 1)
          .to(".js-infographic__description1", 0, {y:0}, 1);
    }

});

thai · November 21, 2017, 12:55pm

Hi There,

Please make sure you’ve included the TimelineMax library.

After that updating your custom JS to this:

jQuery(document).ready(function($) {
	var callout1_location = 1,
    callout2_location = 0,
    callout3_location = 3;

	$( ".js-infographic__callout1" ).click(function() {
	var tl = new TimelineMax();

	    if (callout1_location == 1) {
	          tl.to(".js-infographic__callout-wrapper", 1, {rotation:120}, 0)
	          .to(".js-infographic__callout1", 1, {rotation:-120, backgroundColor:"#D0D465"}, 0)
	          .to(".js-infographic__callout1 path", 1, {fill:"white"}, 0)
	          .to(".js-infographic__callout2", 1, {rotation:-120, backgroundColor:"white"}, 0)
	          .to(".js-infographic__callout2 path", 1, {fill:"#D0D465"}, 0)
	          .to(".js-infographic__callout3", 1, {rotation:-120, backgroundColor:"white"}, 0)
	          .to(".js-infographic__callout3 path", 1, {fill:"#D0D465"}, 0)
	          .call(function(){ callout1_location = 2 }, 0)
	          .call(function(){ callout2_location = 3 }, 0)
	          .call(function(){ callout3_location = 1 }, 0)
	          .to(".js-infographic__description1", 1, {y:50, opacity:1}, 0)
	          .to(".js-infographic__description2", 0.5, {y:100, opacity:0}, 0)
	          .to(".js-infographic__description3", 0.5, {y:100, opacity:0}, 0)
	          .to(".js-infographic__description2", 0, {y:0}, 1)
	          .to(".js-infographic__description3", 0, {y:0}, 1);

	    }

	    if (callout1_location == 3) {
	          tl.to(".js-infographic__callout-wrapper", 1, {rotation:120}, 0)
	          .to(".js-infographic__callout1", 1, {rotation:-120, backgroundColor:"#D0D465"}, 0)
	          .to(".js-infographic__callout1 path", 1, {fill:"white"}, 0)
	          .to(".js-infographic__callout2", 1, {rotation:-120, backgroundColor:"white"}, 0)
	          .to(".js-infographic__callout2 path", 1, {fill:"#D0D465"}, 0)
	          .to(".js-infographic__callout3", 1, {rotation:-120, backgroundColor:"white"}, 0)
	          .to(".js-infographic__callout3 path", 1, {fill:"#D0D465"}, 0)
	          .call(function(){ callout1_location = 2 }, 0)
	          .call(function(){ callout2_location = 1 }, 0)
	          .call(function(){ callout3_location = 3 }, 0)
	          .to(".js-infographic__description1", 1, {y:50, opacity:1}, 0)
	          .to(".js-infographic__description2", 0.5, {y:100, opacity:0}, 0)
	          .to(".js-infographic__description3", 0.5, {y:100, opacity:0}, 0)
	          .to(".js-infographic__description2", 0, {y:0}, 1)
	          .to(".js-infographic__description3", 0, {y:0}, 1);
	    }

	});


	$( ".js-infographic__callout2" ).click(function() {
	var tl = new TimelineMax();

	    if (callout2_location == 0) {
	          tl.to(".js-infographic__callout2", 1, {backgroundColor:"#D0D465"}, 0)
	          .to(".js-infographic__callout2 path", 1, {fill:"white"}, 0)
	          .call(function(){ callout1_location = 1 }, 0)
	          .call(function(){ callout2_location = 2 }, 0)
	          .call(function(){ callout3_location = 3 }, 0)
	          .to(".js-infographic__description1", 0.5, {y:100, opacity:0}, 0)
	          .to(".js-infographic__description2", 1, {y:50, opacity:1}, 0)
	          .to(".js-infographic__description3", 0.5, {y:100, opacity:0}, 0)
	          .to(".js-infographic__description1", 0, {y:0}, 1)
	          .to(".js-infographic__description3", 0, {y:0}, 1);
	    }
	  
	    if (callout2_location == 1) {
	          tl.to(".js-infographic__callout-wrapper", 1, {rotation:0}, 0)
	          .to(".js-infographic__callout1", 1, {rotation:0, backgroundColor:"white"}, 0)
	          .to(".js-infographic__callout1 path", 1, {fill:"#D0D465"}, 0)
	          .to(".js-infographic__callout2", 1, {rotation:0, backgroundColor:"#D0D465"}, 0)
	          .to(".js-infographic__callout2 path", 1, {fill:"white"}, 0)
	          .to(".js-infographic__callout3", 1, {rotation:0, backgroundColor:"white"}, 0)
	          .to(".js-infographic__callout3 path", 1, {fill:"#D0D465"}, 0)
	          .call(function(){ callout1_location = 1 }, 0)
	          .call(function(){ callout2_location = 2 }, 0)
	          .call(function(){ callout3_location = 3 }, 0)
	          .to(".js-infographic__description1", 0.5, {y:100, opacity:0}, 0)
	          .to(".js-infographic__description2", 1, {y:50, opacity:1}, 0)
	          .to(".js-infographic__description3", 0.5, {y:100, opacity:0}, 0)
	          .to(".js-infographic__description1", 0, {y:0}, 1)
	          .to(".js-infographic__description3", 0, {y:0}, 1);
	    }

	    if (callout2_location == 3) {
	          tl.to(".js-infographic__callout-wrapper", 1, {rotation:0}, 0)
	          .to(".js-infographic__callout1", 1, {rotation:0, backgroundColor:"white"}, 0)
	          .to(".js-infographic__callout1 path", 1, {fill:"#D0D465"}, 0)
	          .to(".js-infographic__callout2", 1, {rotation:0, backgroundColor:"#D0D465"}, 0)
	          .to(".js-infographic__callout2 path", 1, {fill:"white"}, 0)
	          .to(".js-infographic__callout3", 1, {rotation:0, backgroundColor:"white"}, 0)
	          .to(".js-infographic__callout3 path", 1, {fill:"#D0D465"}, 0)
	          .call(function(){ callout1_location = 1 }, 0)
	          .call(function(){ callout2_location = 2 }, 0)
	          .call(function(){ callout3_location = 3 }, 0)
	          .to(".js-infographic__description1", 0.5, {y:100, opacity:0}, 0)
	          .to(".js-infographic__description2", 1, {y:50, opacity:1}, 0)
	          .to(".js-infographic__description3", 0.5, {y:100, opacity:0}, 0)
	          .to(".js-infographic__description1", 0, {y:0}, 1)
	          .to(".js-infographic__description3", 0, {y:0}, 1);
	    }

	});


	$( ".js-infographic__callout3" ).click(function() {
	var tl = new TimelineMax();

	    if (callout3_location == 1) {
	          tl.to(".js-infographic__callout-wrapper", 1, {rotation:-120}, 0)
	          .to(".js-infographic__callout1", 1, {rotation:120, backgroundColor:"white"}, 0)
	          .to(".js-infographic__callout1 path", 1, {fill:"#D0D465"}, 0)
	          .to(".js-infographic__callout2", 1, {rotation:120, backgroundColor:"white"}, 0)
	          .to(".js-infographic__callout2 path", 1, {fill:"#D0D465"}, 0)
	          .to(".js-infographic__callout3", 1, {rotation:120, backgroundColor:"#D0D465"}, 0)
	          .to(".js-infographic__callout3 path", 1, {fill:"white"}, 0)
	          .call(function(){ callout1_location = 3 }, 0)
	          .call(function(){ callout2_location = 1 }, 0)
	          .call(function(){ callout3_location = 2 }, 0)
	          .to(".js-infographic__description1", 0.5, {y:100, opacity:0}, 0)
	          .to(".js-infographic__description2", 0.5, {y:100, opacity:0}, 0)
	          .to(".js-infographic__description3", 1, {y:50, opacity:1}, 0)
	          .to(".js-infographic__description2", 0, {y:0}, 1)
	          .to(".js-infographic__description1", 0, {y:0}, 1);
	    }

	    if (callout3_location == 3) {
	          tl.to(".js-infographic__callout-wrapper", 1, {rotation:-120}, 0)
	          .to(".js-infographic__callout1", 1, {rotation:120, backgroundColor:"white"}, 0)
	          .to(".js-infographic__callout1 path", 1, {fill:"#D0D465"}, 0)
	          .to(".js-infographic__callout2", 1, {rotation:120, backgroundColor:"white"}, 0)
	          .to(".js-infographic__callout2 path", 1, {fill:"#D0D465"}, 0)
	          .to(".js-infographic__callout3", 1, {rotation:120, backgroundColor:"#D0D465"}, 0)
	          .to(".js-infographic__callout3 path", 1, {fill:"white"}, 0)
	          .call(function(){ callout1_location = 3 }, 0)
	          .call(function(){ callout2_location = 1 }, 0)
	          .call(function(){ callout3_location = 2 }, 0)
	          .to(".js-infographic__description1", 0.5, {y:100, opacity:0}, 0)
	          .to(".js-infographic__description2", 0.5, {y:100, opacity:0}, 0)
	          .to(".js-infographic__description3", 1, {y:50, opacity:1}, 0)
	          .to(".js-infographic__description2", 0, {y:0}, 1)
	          .to(".js-infographic__description1", 0, {y:0}, 1);
	    }

	});
});

Let us know how it goes!

Eyoael · November 22, 2017, 3:48pm

Hi,

I have not been able to figure out how to include the Timelinemax library. I have been over to greenstocks website but i just can’t seem to figure out how to do it. What i really want to do is to have something similar as this https://codepen.io/mrowka3d/pen/bWZGWL?limit=all&page=13&q=infographic on my site. Can you just simply guide me on how to add the Timeline library.

Thanks

jade · November 22, 2017, 6:12pm

Hi there,

Please try loading it though the child theme’s functions.php file then add this code:

/**
 * Enqueue scripts and styles.
 */

add_action( 'wp_enqueue_scripts', 'load_scripts' ); 
 
function load_scripts() {	
	wp_enqueue_script( 'TimelineMax', 'https://cdnjs.cloudflare.com/ajax/libs/gsap/1.19.1/TweenMax.min.js', array(), '1.0.0', true );
}

Hope this helps.

Eyoael · November 22, 2017, 11:15pm

Thanks jade it works.

paul.r · November 23, 2017, 6:00am

On behalf of my colleague, you’re welcome. Cheers!

system · December 3, 2017, 6:00am

This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.