Why is this happening (Tweenmax TimeLine)

JavaScript
1

Hi,

So I have this code:

var toggleInfo = function(){
	var info = new TimelineLite();
	$('.info-open').click(function(e){
		e.preventDefault();
		info.to('.info', 0, { css: { className: "-=display-none"}, immediateRender:false});
		info.to('.info', 0, { css: { className: "+=flex"}, immediateRender:false});
		info.from('.info', 0.4, { css: { transform: "scale(0.2) translateZ(0)", opacity: 0 }, ease: Power3.easeOut, force3D: "auto"});
		info.staggerFrom('.about span', 0.4, { css: { transform: "translateY(60px) translateZ(0)", opacity: 0}, ease: Power3.easeOut, force3D: "auto"}, 0.1);
		info.staggerFrom('.contact li', 0.4, { css: { transform: "translateY(-30px) translateZ(0)", opacity: 0}, ease: Power3.easeOut, force3D: "auto"}, 0.1);
		info.from('.info-close', 0.2, { css: { transform: "translateY(-60px) translateZ(0)", opacity: 0}, ease: Power3.easeOut, force3d: "auto"});
	});
	$('.info-close').click(function(e){
		e.preventDefault();
		info.reverse().timeScale(2);
	});
}

And it works fine the first time i click the triggers. However, when I click “info-open” again after I have clicked “info-close”, it fires info.reverse(). This is an overlay im toggling and the first open and close works, but when i want to open it again it only fires the reverse animation thus closing the overlay.

Do I need to reset the function or something after “info-close” is clicked?

CODEPEN: http://codepen.io/ReGGae/pen/MwxwJa

2

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