check if element has class in timelinemax

[mary92]

Hey,

'

I would like to change position of element ".hotspot"  based on their additional classes ("hotspot-left", "hotspot-right"). Here's the example to give you the general idea (of course jQuery function hasClass doesn't work):

 

$(".hotspot").hover(over, out);

TweenMax.set(".popup", { autoAlpha: 0 } );

 

function over(){

var overTl = new TimelineMax();

overTl

.to($(this).hasClass("hotspot-left"), 0.5, { x: -20, ease: Power2.easeIn } )

.to($(this).hasClass("hotspot-right"), 0.5, { x: 20, ease: Power2.easeIn } )

.to($(this).find(".icon .group"), 0.3, { fill: "#fff", ease: Power3.easeIn } )

.to($(this).find(".popup"), 0.3, { autoAlpha: 1, ease: Power4.easeIn } )

.fromTo($(this).find(".copy"), 0.3, { y: -20, autoAlpha: 0 }, { y: 0, autoAlpha: 1 } )

}

 

Also, I want to run first two tweens of TimelineMax at the same time - can do this by adding 0 at the end, as I remember?

 

Thanks in advance! 

 

 

[Shaun Gorneau]

Hi @mary92,

 

`$(this).hasClass("hotspot-left")` will return true or false, not an element. If you want to add to the timeline conditionally, you can wrap that tween in an if statement.

 

$(".hotspot").hover(over, out);
TweenMax.set(".popup", { autoAlpha: 0 } );
 
function over(){
	
	var overTl = new TimelineMax();

	if( $(this).hasClass("hotspot-left") ){
		overTl.to( $(this) , 0.5 , { x: -20, ease: Power2.easeIn } )
	}

	if( $(this).hasClass("hotspot-right") ){
		overTl.to( $(this) , 0.5, { x: 20, ease: Power2.easeIn } )
	}

	overTl
	.to($(this).find(".icon .group"), 0.3, { fill: "#fff", ease: Power3.easeIn } )
	.to($(this).find(".popup"), 0.3, { autoAlpha: 1, ease: Power4.easeIn } )
	.fromTo($(this).find(".copy"), 0.3, { y: -20, autoAlpha: 0 }, { y: 0, autoAlpha: 1 } )
  
}

 

 

Hope this helps!

 

[mary92]

Oh, so a condition. All right, thanks a lot @Shaun Gorneau