Jump to content
Search Community

Raphael hover for multiple icons

failure13 test
Moderator Tag

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

Here's my example:

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

 

What i want is just the function right at the end of js tab to work, i mean this one:

	$('.signs32').hover(function() {
		TweenMax.to($(this), 0.2, {raphael:{fill: '#222222'}});
	}, function() {
		TweenMax.to($(this), 0.35, {raphael:{fill: '#F5782E'}});
	});

But i absolutely don't understand how to target each icon more specific...
The goal is just to change color of each mouseover element hovered at the time, which belongs to common class .signs32.

 

Can somebody help me please? :)

Link to comment
Share on other sites

This isn't really related to GSAP at all, but to target a Raphael SVG you need to have a reference to the Raphael object to tween, not the DOM element that contains it. I guess it's a bit of a 'flaw' in the API, but that's how Raphael works. You can do something like this to save the reference for tweening:

////// VECTOR ICONS & SVG //////

$('.product1').each(function(i) {
  var paper = Raphael(this, 32, 32);
  this.raphael = paper.path(...)
                      .attr({fill: '#F5782E', stroke: 'none'});
});
$('.product2').each(function(i) {
  var paper = Raphael(this, 32, 32);
  this.raphael = paper.path(...)
                      .attr({fill: '#F5782E', stroke: 'none'});
});
$('.product3').each(function(i) {
  var paper = Raphael(this, 32, 32);
  this.raphael = paper.path(...)
                      .attr({fill: '#F5782E', stroke: 'none'});
});

$('.signs32').hover(function() {
  TweenMax.to(this.raphael, 0.2, {raphael: {fill: '#222222'}});
}, function() {
  TweenMax.to(this.raphael, 0.35, {raphael: {fill: '#F5782E'}});
});
As a side note, you don't need to be calling $(this) so often.

  this is a reference to the DOM element.

  $(this) attaches jQuery methods to that element.

  $(this)[0] gets the first DOM element in the collection (in this case, it's this again).

Unless you need to call an actual jQuery method on the element, like $(this).html('blah'), then you can just use this and save the extra overhead each time.

  • Like 2
Link to comment
Share on other sites

jamiejefferson

Hey, thank you very much, that helped a lot!

And sorry for non GSAP, i just thought it could be connected, like maybe i need to target somehow an array or stagger, or something like that...

 

GSAP works very good with raphael i must say!

 

And to complement their conjuction, i've found this cool site, which allows you to convert any .svg to raphael code, very cool script!

http://irunmywebsite.com/raphael/SVGTOHTML_LIVE.php

 

But i still got little question about it, hopefully you can help:

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

here i updated pen, and right at the end of js if you will outcomment this line:

TweenMax.to($('.rocket').raphael, 1, {raphael:{ty: -500}, ease:Power1.easeInOut, repeat: 1, yoyo: true, delay: 1.4});

It won't work... I don't understand why, logically it should, coz everything else works by the same concept you mentioned above, i guess...

 

And also here is more complex raphael, which have tow objects: circle with outline and twitter sign:

$('.twitterCircle').each(function(i) {
	var paper = Raphael(this, 64, 64)
        this.raphael = paper.circle(32, 32, 30).attr({fill: '#FFFFFF', stroke: '#F5782E'});
	this.raphael = paper.path('M26.492,9.493c-0.771,0.343-1.602,0.574-2.473,0.678c0.89-0.533,1.562-1.376,1.893-2.382c-0.832,0.493-1.753,0.852-2.734,1.044c-0.785-0.837-1.902-1.359-3.142-1.359c-2.377,0-4.306,1.928-4.306,4.306c0,0.337,0.039,0.666,0.112,0.979c-3.578-0.18-6.75-1.894-8.874-4.499c-0.371,0.636-0.583,1.375-0.583,2.165c0,1.494,0.76,2.812,1.915,3.583c-0.706-0.022-1.37-0.216-1.95-0.538c0,0.018,0,0.036,0,0.053c0,2.086,1.484,3.829,3.454,4.222c-0.361,0.099-0.741,0.147-1.134,0.147c-0.278,0-0.547-0.023-0.81-0.076c0.548,1.711,2.138,2.955,4.022,2.99c-1.474,1.146-3.33,1.842-5.347,1.842c-0.348,0-0.69-0.021-1.027-0.062c1.905,1.225,4.168,1.938,6.6,1.938c7.919,0,12.248-6.562,12.248-12.25c0-0.187-0.002-0.372-0.01-0.557C25.186,11.115,25.915,10.356,26.492,9.493')
		.attr({fill: '#F5782E', stroke: 'none'}).transform('t17,16 s1.4');
});

$('.signs64').hover(function() {
	TweenMax.to(this.raphael, 0.2, {raphael:{fill: '#FFFFFF'}});
}, function() {
	TweenMax.to(this.raphael, 0.35, {raphael:{fill: '#F5782E'}});
});

I want to change color of circle fill to orange and twitter to white on hover, but not sure how to target circle and twitter sign separately.

I've tried stuff like this.raphael.paper.circle that was bad guess..

 

As a side note, you don't need to be calling $(this) so often.
  this is a reference to the DOM element.
  $(this) attaches jQuery methods to that element.
  $(this)[0] gets the first DOM element in the collection (in this case, it's this again).
Unless you need to call an actual jQuery method on the element, like $(this).html('blah'), then you can just use this and save the extra overhead each time.

 

Well, absolutely, that would be extremely handy, but i've heard somewhere that if you won't target as $(this) instead of just this everywhere you could, it could give you trouble with older IE (which i sadly had to deal with :( ), is this incorrect?

Link to comment
Share on other sites

1. You can't access the property of a DOM element directly on the jQuery collection like that. 2 options:

$('.rocket').prop('raphael')
// or
$('.rocket')[0].raphael

2. this.raphael = paper.circle saves the circle element in the raphael property. It's then immediately overwritten with paper.path... Perhaps you could use a Raphael set, but it's really up to you how you do it. There's a ton of stuff in the Raphael API and I'm not even close to familiar with it, so I've no idea if this is a smart way to do this:

$('.twitterCircle').each(function(i) {
  var paper = Raphael(this, 64, 64);
  paper.setStart();
  paper.circle(...)
  paper.path(...);
  this.rset = paper.setFinish();
});

$('.signs64').hover(function() {
  TweenMax.to(this.rset[0], 0.2, {raphael:{fill: '#00FF00'}}); // circle
  TweenMax.to(this.rset[1], 0.2, {raphael:{fill: '#0000FF'}}); // path
});

3. I am not aware of any problems with this. It is just a DOM element i.e. regular javascript. Unless you are referring to the cross-browser compatibility jQuery adds for stuff like .html(), then I don't understand how it could have troubles in IE at all. GreenSock is built on pure javascript and works perfectly with regular DOM elements. And, if you pass it a jQuery collection, it grabs all of the original DOM elements from it and does all of it's tricks directly on those...

  • Like 3
Link to comment
Share on other sites

jamiejefferson

Awesome man, thank you so much!

Everything works perfectly now :)

 

 

There's a ton of stuff in the Raphael API and I'm not even close to familiar with it, so I've no idea if this is a smart way to do this

Well, that is absolutely true, when i read raphael docs and watch examples code...

Well let's just say if you want to work effectively with Raphael, you need to be very deep rooted with js.

Not trivial stuff in there, unlike gsap, which seems to be very friendly for everyone!

 

 

Unless you are referring to the cross-browser compatibility jQuery adds for stuff like .html()

 

Could you please give some little example of what exactly you mean by this and what exactly those cross-browser compatibility problems could be in such case would be?

 

I'm very much concerned about everything which touch cross-browser topic, and want to be sure of what i'm doing in this field.

Link to comment
Share on other sites

I wasn't suggesting there would be any cross browser issues in just using a DOM element, attaching a value to it, passing it to GSAP etc. In the case of .html() e.g. $(element).html("<div>blah</div>"), the pure javascript way is something like: element.innerHtml = "<div>blah</div>"

innerHtml hasn't always been supported by all browsers, so by using the jQuery .html() method it makes sure that innerHtml exists first, and if it doesn't falls back to some other method (you can read the jQuery source code if you want to see how it works).

 

Whatever you normally do in jQuery, continue doing that and you'll have all the transparent cross-browser support you always had. I just wanted to point out that specifically $(this) is wasteful if you aren't doing it to access some jQuery functionality. Raphael and GSAP are not reliant on jQuery, and work perfectly well with the original DOM element.

 

You'll find much better and more informative material on blogs and stackoverflow about this stuff.

  • Like 2
Link to comment
Share on other sites

  • 4 weeks later...

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.
×
×
  • Create New...