1
\$\begingroup\$

Screenshot of light and dark icons

I have six tiles that I am animating on hover. The tiles invert from light to dark on mouseover and back to light on mouseout. My goal is for the inversion of the tile happen seemlessly and smoothly. Currently there is a bug when you hover over the image itself, and not just the tile bc the mouse exits the tile when on the image.

I feel like my code is very repetitive and am hoping to reduce the amount of lines by adding variables to the functions that would allow me to use logic to show and hide the images.

(function($) {

	// Set variables
    var $pain1 = $("#pain1"),
    	$pain2 = $("#pain2"),
    	$pain3 = $("#pain3"),
    	$pain4 = $("#pain4"),
    	$pain5 = $("#pain5"),
    	$pain6 = $("#pain6");


	function hideDarkIcons(){
		// Set variables
	    var p1 = $("#pain1 .pp-dark"),
	    	p2 = $("#pain2 .pp-dark"),
	    	p3 = $("#pain3 .pp-dark"),
	    	p4 = $("#pain4 .pp-dark"),
	    	p5 = $("#pain5 .pp-dark"),
	    	p6 = $("#pain6 .pp-dark");

	    var tl = new TimelineLite();

		    tl.to(p1, 0, {autoAlpha:0}, 'hideDark'),
		    tl.to(p2, 0, {autoAlpha:0}, 'hideDark'),
		    tl.to(p3, 0, {autoAlpha:0}, 'hideDark'),
		    tl.to(p4, 0, {autoAlpha:0}, 'hideDark'),
		    tl.to(p5, 0, {autoAlpha:0}, 'hideDark'),
		    tl.to(p6, 0, {autoAlpha:0}, 'hideDark');
	}

	//Call function on load
	hideDarkIcons();


	$pain1.mouseenter(function(event) {
		// Set variables
		var d1 = $("#pain1 .pp-dark"),
			l1 = $("#pain1 .pp-light");
				
		var tl1 = new TimelineMax();
			tl1.to(d1, 0, {autoAlpha: 1, ease:Power3.easeOut}, 'fadeIn'),
			tl1.to(l1, 0, {autoAlpha: 0, ease:Power3.easeOut}, 'fadeIn');
	});

	$pain1.mouseout(function(event) {
		// Set variables
		var d1 = $("#pain1 .pp-dark"),
			l1 = $("#pain1 .pp-light");
				
		var tl1 = new TimelineMax();
			tl1.to(d1, 0, {autoAlpha: 0, ease:Power3.easeOut}, 'fadeOut'),
			tl1.to(l1, 0, {autoAlpha: 1, ease:Power3.easeOut}, 'fadeOut');
	});



	$pain2.mouseenter(function(event) {
		// Set variables
		var d1 = $("#pain2 .pp-dark"),
			l1 = $("#pain2 .pp-light");
				
		var tl1 = new TimelineMax();
			tl1.to(d1, 0, {autoAlpha: 1, ease:Power3.easeOut}, 'fadeIn'),
			tl1.to(l1, 0, {autoAlpha: 0, ease:Power3.easeOut}, 'fadeIn');
	});

	$pain2.mouseout(function(event) {
		// Set variables
		var d1 = $("#pain2 .pp-dark"),
			l1 = $("#pain2 .pp-light");
				
		var tl1 = new TimelineMax();
			tl1.to(d1, 0, {autoAlpha: 0, ease:Power3.easeOut}, 'fadeOut'),
			tl1.to(l1, 0, {autoAlpha: 1, ease:Power3.easeOut}, 'fadeOut');
	});


	$pain3.mouseenter(function(event) {
		// Set variables
		var d1 = $("#pain3 .pp-dark"),
			l1 = $("#pain3 .pp-light");
				
		var tl1 = new TimelineMax();
			tl1.to(d1, 0, {autoAlpha: 1, ease:Power3.easeOut}, 'fadeIn'),
			tl1.to(l1, 0, {autoAlpha: 0, ease:Power3.easeOut}, 'fadeIn');
	});

	$pain3.mouseout(function(event) {
		// Set variables
		var d1 = $("#pain3 .pp-dark"),
			l1 = $("#pain3 .pp-light");
				
		var tl1 = new TimelineMax();
			tl1.to(d1, 0, {autoAlpha: 0, ease:Power3.easeOut}, 'fadeOut'),
			tl1.to(l1, 0, {autoAlpha: 1, ease:Power3.easeOut}, 'fadeOut');
	});


	$pain4.mouseenter(function(event) {
		// Set variables
		var d1 = $("#pain4 .pp-dark"),
			l1 = $("#pain4 .pp-light");
				
		var tl1 = new TimelineMax();
			tl1.to(d1, 0, {autoAlpha: 1, ease:Power3.easeOut}, 'fadeIn'),
			tl1.to(l1, 0, {autoAlpha: 0, ease:Power3.easeOut}, 'fadeIn');
	});

	$pain4.mouseout(function(event) {
		// Set variables
		var d1 = $("#pain4 .pp-dark"),
			l1 = $("#pain4 .pp-light");
				
		var tl1 = new TimelineMax();
			tl1.to(d1, 0, {autoAlpha: 0, ease:Power3.easeOut}, 'fadeOut'),
			tl1.to(l1, 0, {autoAlpha: 1, ease:Power3.easeOut}, 'fadeOut');
	});


	$pain5.mouseenter(function(event) {
		// Set variables
		var d1 = $("#pain5 .pp-dark"),
			l1 = $("#pain5 .pp-light");
				
		var tl1 = new TimelineMax();
			tl1.to(d1, 0, {autoAlpha: 1, ease:Power3.easeOut}, 'fadeIn'),
			tl1.to(l1, 0, {autoAlpha: 0, ease:Power3.easeOut}, 'fadeIn');
	});

	$pain5.mouseout(function(event) {
		// Set variables
		var d1 = $("#pain5 .pp-dark"),
			l1 = $("#pain5 .pp-light");
				
		var tl1 = new TimelineMax();
			tl1.to(d1, 0, {autoAlpha: 0, ease:Power3.easeOut}, 'fadeOut'),
			tl1.to(l1, 0, {autoAlpha: 1, ease:Power3.easeOut}, 'fadeOut');
	});


	$pain6.mouseenter(function(event) {
		// Set variables
		var d1 = $("#pain6 .pp-dark"),
			l1 = $("#pain6 .pp-light");
				
		var tl1 = new TimelineMax();
			tl1.to(d1, 0, {autoAlpha: 1, ease:Power3.easeOut}, 'fadeIn'),
			tl1.to(l1, 0, {autoAlpha: 0, ease:Power3.easeOut}, 'fadeIn');
	});

	$pain6.mouseout(function(event) {
		// Set variables
		var d1 = $("#pain6 .pp-dark"),
			l1 = $("#pain6 .pp-light");
				
		var tl1 = new TimelineMax();
			tl1.to(d1, 0, {autoAlpha: 0, ease:Power3.easeOut}, 'fadeOut'),
			tl1.to(l1, 0, {autoAlpha: 1, ease:Power3.easeOut}, 'fadeOut');
	});



})(jQuery);
/*** PAIN POINTS ***/
.painpoint {
	border: 1px solid $brand-color-6;
	margin: 0 auto;
	border-radius: 20px;
	box-shadow: 0 3px 5px 0 rgba(0,0,0,0.08);
 	transition: all 0.3s ease-in-out;
 	min-height: 20em;
	
	&:hover {  
		box-shadow: 0 5px 15px 2px rgba(0, 0, 0, 0.1);
		background-color: $brand-color-2;
		cursor: pointer;

		img {
			background-color: #fff;
			transition: all 0.3s ease-in-out;
			//mix-blend-mode: multiply;
		}

		p {
			color: #fff;
			transition: all 0.3s ease-in-out;
		}
	}

 	p {
 		position: absolute;
 		left: 0;
 		bottom: 25%;
 		font-family: $dinot;
 		font-weight: 700;
 		font-size: 1.2em;
		color: $brand-color-1;
		margin: 0 auto;
		padding: 1em 4em;
		text-align: center;
 	}

 	img {
 		position: absolute;
 		left: 37.5%;
 		top: 15%;
		background-color: $brand-color-1;
		padding: 1em;
		margin: 0 auto;
		border-radius: 20px;
 	}
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/1.20.4/TweenMax.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<section class="container">
        <div class="row">
            <div class="col-lg-4">
                <div id="pain1" class="painpoint">
                    <img class="pp-light" src="/dist/images/icon1.png"/>
                    <img class="pp-dark" src="/dist/images/icon1-dark.png"/>
                    <p>How do I know what roles I will hire for in the future?</p>
                </div>
            </div>
           <div class="col-lg-4">
                <div id="pain2" class="painpoint">
                    <img class="pp-light" src="/dist/images/icon2.png"/>
                    <img class="pp-dark" src="/dist/images/icon2-dark.png"/>
                    <p>Do I have the right talent to lead my company through digital transformation?</p>
                </div>
            </div>
            <div class="col-lg-4">
                <div id="pain3" class="painpoint">
                    <img class="pp-light" src="/dist/images/icon3.png"/>
                    <img class="pp-dark" src="/dist/images/icon3-dark.png"/>
                    <p>How can I better engage the workforce today and plan for tomorrow?</p>
                </div>
            </div>
        </div>
        <div class="row">
           <div class="col-lg-4">
                <div id="pain4" class="painpoint">
                    <img class="pp-light" src="/dist/images/icon3.png"/>
                    <img class="pp-dark" src="/dist/images/icon3-dark.png"/>
                    <p>Will robots replace me at work?</p>
                </div>
            </div>
            <div class="col-lg-4">
                <div id="pain5" class="painpoint">
                    <img class="pp-light" src="/dist/images/icon1.png"/>
                    <img class="pp-dark" src="/dist/images/icon1-dark.png"/>
                    <p>How do I know what digital skills I need to develop?</p>
                </div>
            </div>
            <div class="col-lg-4">
                <div id="pain6" class="painpoint">
                    <img class="pp-light" src="/dist/images/icon2.png"/>
                    <img class="pp-dark" src="/dist/images/icon2-dark.png"/>
                    <p>I want to learn more, but where do I begin?</p>
                </div>
            </div>
        </div>
    </section>

\$\endgroup\$

closed as off-topic by Dannnno, Sᴀᴍ Onᴇᴌᴀ, Stephen Rauch, Ben Steffan, Peter Taylor Mar 13 '18 at 11:19

This question appears to be off-topic. The users who voted to close gave this specific reason:

  • "Code not implemented or not working as intended: Code Review is a community where programmers peer-review your working code to address issues such as security, maintainability, performance, and scalability. We require that the code be working correctly, to the best of the author's knowledge, before proceeding with a review." – Sᴀᴍ Onᴇᴌᴀ, Stephen Rauch, Ben Steffan, Peter Taylor
If this question can be reworded to fit the rules in the help center, please edit the question.

1
\$\begingroup\$

I hope I did understand your problem and code correctly:

  • there's a light and a dark version of an image
  • on mouse over the dark version should fade in
  • on mouse out the dark version should fade out

Now, my question is: What do you need all the JavaScript for?

You can achieve this easily with CSS only - no need for jQuery or GSAP:

.painpoint {
  position: relative;
}

.img {
  position: absolute;
}

.img.m--dark {
  opacity: 0;
  transition: all 0.3s ease-in-out;
}

.painpoint:hover .img.m--dark:last-child {  
  opacity: 1;
}
<div class="painpoint">
  <img class="img" src="http://via.placeholder.com/350x150"/>
  <img class="img m--dark" src="http://via.placeholder.com/350x150/000000"/>
</div>

Hopefully, this is going to simplify your code.

\$\endgroup\$
  • \$\begingroup\$ Im using JS bc eventually clicking a tile will start an animation and there will be a scroll effect along with some sort of visual que. I have added an image to show the inversion effect. \$\endgroup\$ – FlySpaceAge Mar 7 '18 at 17:23
  • \$\begingroup\$ @FlySpaceAge I see, but the click triggers something different and not the image change. So you could still go with this simple solution. It should work fine with the example images you've added to the question. If you only have icons, you could consider using SVGs and SVG animation to simply invert the color, instead of loading two images. \$\endgroup\$ – insertusernamehere Mar 7 '18 at 17:29
  • \$\begingroup\$ Unfortunately my CMS does not allow SVG. Inititally, I was hoping to use mix blend mode multiply. But I understand how simple your version is. I just need to save out two images for each tile instead of using css and html to build the tile? Thank you! \$\endgroup\$ – FlySpaceAge Mar 7 '18 at 17:32
  • \$\begingroup\$ @FlySpaceAge I don’t know what the exact result of GSAP‘s mix blend mode multiply is, but some things can be done with CSS filters as well. And of course, anything else should still be HTML, like the texts etc. You can change the text color or background color as well using CSS transitions. \$\endgroup\$ – insertusernamehere Mar 7 '18 at 17:56

Not the answer you're looking for? Browse other questions tagged or ask your own question.