Jump to content
GreenSock

failure13

Raphael rset selector

Warning: Please note

This thread was started before GSAP 3 was released. Some information, especially the syntax, may be out of date for GSAP 3. Please see the GSAP 3 migration guide and release notes for more information about how to update the code to GSAP 3's syntax. 

Recommended Posts

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?

 

Link to comment
Share on other sites

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.
  • Like 1
Link to comment
Share on other sites

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!

Link to comment
Share on other sites

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

Link to comment
Share on other sites

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 :)

Link to comment
Share on other sites

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.

  • Like 2
Link to comment
Share on other sites

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();
});
  • Like 1
Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.
×