on click show and hide tooltip

[anusky]

Could I create on click event and show and hide a tooltip with greensock?

I am relative new with banner animation and I am creating an info icon who shows on click a tooltip information and again when you click hide the tooltip.

 

Thank you!

 

 

 

[Carl]

Hi and welcome to the GreenSock forums.

 

Yes, GSAP is more than capable of showing and hiding a tooltip. 

Its is preferred that you accompany your question with a CodePen demo so that we can better see where you are having trouble with GSAP.

However, this should be pretty easy to show the basics:

 

var banner = document.querySelector(".box");

//create a tween that is paused and reversed.
var tween = TweenLite.from(".tooltip", 0.2, {y:20, scale:0.5, autoAlpha:0, paused:true});
tween.reverse();


//every time you click toggle the reversed state 
banner.onclick = function() {
  tween.reversed(!tween.reversed());
}

 

http://codepen.io/GreenSock/pen/BKjNjZ?editors=0010

 

For basic banners you probably want all clicks to drive to the site you are advertising but I imagine you have something more complex in mind.

[anusky]

Thanks for the quick answer!

Actually your tip was not working for me, probably because I am just starting with greensock and I could understand properly whats going on...Although for me your explanation was really clear!

However, I found a solution for my click apper/dissappear which is working!!!

 

Anyway Im really interestend in find other posibilities!!!!!!!

 

Guys your are making a great job!!!!!!!

var info = $("#icon");

function appear() {
    TweenLite.to("#info", moveTime, {autoAlpha:1});
    info.one('click', disappear);
    
}

function disappear() {
    TweenLite.to("#info", moveTime, {autoAlpha:0});
    info.one('click', appear);
    
}

info.one('click', appear);

[ajhalls]

Not sure why I couldn't make the example work either, but I had a bunch of tooltips and wanted it to find the nearest one and make it visible. Then if you click a different one, it will fade any previous ones and bring in the current.

$(".ExpandingTipsLink").unbind('click').click(newOptionsTooltip);

function newOptionsTooltip(e) {
    TweenLite.to(".ExpandingTips", 0.1, {scale:0.5, autoAlpha:0});
    var tooltip = $(this).parent().parent().parent().find(".ExpandingTips");
    if (tooltip.attr("data-visibility") === "1"){
         tooltip.attr("data-visibility", 0);
        TweenLite.to(tooltip, 0.3, {y:20, scale:0.5, autoAlpha:0});
    }else{
          tooltip.attr("data-visibility", 1);
        TweenLite.to(tooltip, 0.3, {y:-20, scale:1, autoAlpha:1});
    }
}