Raphael rset selector

[failure13]

Let's say i have code like:

<div class="btn-group">

    <button type="button" class="btn btn-link btn-sm btn-avatar dropdown-toggle" data-toggle="dropdown">
        <img src="http://placehold.it/30x30" alt="30x30" class="img-circle">
        <span class="caret"></span>
    </button>

    <ul class="dropdown-menu">
        <li><a href="#" class="dropdown-header">Name</a></li>
        <li><a href="#"><span class="svg24 iSettings"></span> Settings</a></li>
        <li><a href="#"><span class="svg24 iMessage"></span> Messages <span class="badge">9</span></a></li>
        <li><a href="#"><span class="svg24 iHelp"></span> Help</a></li>
        <li class="divider"></li>
        <li><a href="#"><span class="svg24 iLogout"></span> Logout</a></li>
    </ul>

</div>


    // dropdown hover
    $('.dropdown-menu li a span').hover(function() {
        TweenMax.to(this, 0.35, {className:'+=hover'});
        TweenMax.to(this.rset, 0.35, {raphael:{fill: '#FC6608'}});
    }, function() {
        TweenMax.to(this, 0.3, {className:'-=hover'});
        TweenMax.to(this.rset, 0.3, {raphael:{fill: '#2b2b2b'}});
    });

But what if i want to hover li itself, and then trigger rset animation of it's children or some other div at all, like for example in this case i would think of something like $(a span).this.rset but it doesn't work.

How should i talk with raphael through GSAP in such case?

 

[jamiejefferson]

Your example seems incomplete - I don't see any Raphael code there, and what's an rset?... anyway is your question just about writing jQuery selectors? Our focus on this forum is not jQuery support, but I'll hazard a guess and assume a modification like this could work?

$('.dropdown-menu li').hover(function() {
    var span = $(this).find('a span');
    TweenMax.to(span, 0.35, {className:'+=hover'});
    TweenMax.to(span[0].rset, 0.35, {raphael:{fill: '#FC6608'}});
}

If I've misunderstood the question could you please provide a complete example (preferable somewhere live, like codepen) so we can avoid the guesswork.

[failure13]

Yes, you guessed exactly right Jamie!

 

And rset if i'm correct is shortcut for raphael.set, you've teached me tricks like that in the past to create sets that can be modified with GSAP later:

    // minimum vector size
    var seedOfLife = 48;

    // core svg draw function
    function flowerOfLife(e, circle) {
        var svg = [];
        svg['w'] = e.width();
        svg['h'] = e.height();
        svg['coef'] = svg['w'] / seedOfLife;
        if (circle == true) {
            svg['cc'] = seedOfLife * 0.5;
            svg['cr'] = svg['cc'] - 3;
        }
        return svg;
    };

    $('.iLogout').each(function() {
        var svg = flowerOfLife($(this));
        var paper = Raphael(this, svg['w'], svg['h']);
        paper.setStart();
        paper.path('M 29 9.7 L 29 15 C 30.4 15.7 31.7 16.5 32.8 17.7 C 35.2 20 36.5 23.2 36.5 26.5 C 36.5 29.8 35.2 33 32.8 35.3 C 30.5 37.7 27.3 39 24 39 C 20.7 39 17.5 37.7 15.2 35.3 C 12.8 33 11.5 29.8 11.5 26.5 C 11.5 23.2 12.8 20 15.2 17.7 C 16.3 16.5 17.6 15.7 19 15 L 19 9.7 C 11.8 11.9 6.5 18.6 6.5 26.5 C 6.5 36.2 14.3 44 24 44 C 33.7 44 41.5 36.2 41.5 26.5 C 41.5 18.6 36.2 11.9 29 9.7 L 29 9.7Z M 21.5 4 L 26.5 4 L 26.5 24 L 21.5 24 L 21.5 4Z')
            .attr({'fill':'#4d4d4d','stroke':'none'});
        this.rset = paper.setFinish();
        this.rset.transform('s'+ svg['coef'] +','+ svg['coef'] +',0,0');
    });

Again, sorry for not stricktly GSAP question, but it's all connected, and not obvious, so i think i could help anyone later anyway!

[jamiejefferson]

Right, I guess that was me... silly memory 

[failure13]

I've found that such code creates jumpy effect before tween, i mean like if there was no fill at all, and than in fades from nothing to color for both hover-in and hover-out:

 

See the Pen xcLuf by failure13 (@failure13) on CodePen

 

If i use span[0].rset[0] to go directly for first raphael layer, it do job fine, fades from current color to desired...

Any ideas of how to avoid such effect with whole rset?

 

And also if anybody knows good way to tint multilayer raphael object with some color easy and fast, and than fade back to original colors - it would be super-cool

[jamiejefferson]

From the RaphaelPlugin API

 

RaphaelPlugin doesn't support tweening Raphael "sets" (which are basically like groups of Raphael objects). To tween a set, you should loop through its elements and create a tween for each one.

 

You need to modify your code to this

$('.list li').hover(function() {
  var span = $(this).find('span');
  var rset = span[0].rset;
  for(var i = rset.length-1; i >= 0; i--) {
    TweenMax.to(rset[i], 0.95, {raphael:{fill: '#FC6608'}});
  }
}, function() {
  var span = $(this).find('span');
  var rset = span[0].rset;
  for(var i = rset.length-1; i >= 0; i--) {
    TweenMax.to(rset[i], 0.9, {raphael:{fill: '#2b2b2b'}});
  }
});

If you want to go back to original colors, you'll need to either save them somewhere to create new tweens to() them, or save a reference to the original tween and reverse() it.

[Rodrigo]

Maybe create a timeline with all the instances at zero seconds and play/reverse the timeline in the over/out events respectively.

$('.iLogout').each(function() {
  //all the Raphael code here
  var tl = new TimelineLite({paused:true});
  //loop through the elements
  for(var i = 0; i < this.rset.length; i++)
    {
      tl.to(this.rset[i], 0.95, {raphael:{fill: '#FC6608'}},0);
    }
  // add the timeline to the span element
  this.hoverTween = tl;
});

// dropdown hover
$('.list li').hover(function() {
    var span = $(this).find('span');
    //reference and play the timeline
    span[0].hoverTween.play();
}, function() {
    var span = $(this).find('span');
    //reference and reverse the timeline
    span[0].hoverTween.reverse();
});

[failure13]

jamiejefferson

Oh...That explains, thank you!

 

rhernando

And this is pretty elegant solution for saving colors!