Search the Community
Showing results for tags 'raphael'.
Found 11 results
-
Note: This page was created for GSAP version 2. We have since released GSAP 3 with many improvements. While it is backward compatible with most GSAP 2 features, some parts may need to be updated to work properly. Please see the GSAP 3 release notes for details. Enables TweenLite and TweenMax to animate properties of Raphael JavaScript objects (see http://www.raphaeljs.com/). Raphael is a JavaScript framework that simplifies work with vector graphics on the web. For example: // creates canvas 550 × 400 at 10, 50 var paper = Raphael(10, 50, 550, 400); // creates rectangle at x = 50, y = 40, with a width of 200 and height of 100 var rect = paper.rect(50, 40, 200, 100); // sets the fill attribute of the rectangle to red (#f00) rect.attr("fill", "#f00"); // tween the fill to blue (#00f) and x to 100, y to 100, width to 100 and height to 50 over the course of 3 seconds using an ease of Power1.easeInOut TweenLite.to(rect, 3, {raphael:{fill:"#00f", x:100, y:100, width:100, height:50}, ease:Power1.easeInOut}); You can tween any of the properties that you would normally set using raphael's attr() method as well as the following transformation properties: rotation, scaleX, scaleY, skewX, skewY, tx and ty and even shortRotation which will rotate in the shortest direction to the destination value. tx and ty refer to the translation x and y properties (e and f from the element's matrix). This gives you a lot of control, even beyond what's easily accomplished through Raphael's own methods. Learn more in the RaphaelPlugin documentation. -
I'm looking at the Raphael FreeTransform tool on github and wondering if anyone has been able to successfully integrate that into GSAP via the Raphael Plugin. Need a FreeTransform tool and that one looks pretty good. Just don't want to do anything that causes conflicts with GSAP, etc. Also, really all I need is the ability to add selection handles that allow resize and rotate. I of course need drag but not sure if that will conflict with GSAPs draggable. Any insight from someone with experience in this would be greatly appreciated.
-
In the Codepen listed, I'm trying to tween a Snap.svg element with a dummy object. I first learned about this technique here: http://greensock.com/forums/topic/8604-snapsvg/ But... alas I have been unable to make it work. I'm not really sure why it's not working. For the record, I'm aware that Greensock has a Raphael plugin, but the project requirements commit me to using Snap.svg. I also just generally prefer Snap.svg and would LOVE to use my favorite tweening tool to make it work. I'm also aware that a forum user wrote a port for the Raphael plugin about a year ago... but there's been no recent activity on Github and I was unable to get it to work. Thanks for any and all help in advance!
-
I've been moving toward using Snap.svg over Raphael (both from Dmitry Baranovskiy) where Snap.svg is merely a fork of Raphael and dropping support for VML (old IE support). Now I'm wanting to insert some GreenSock magic dust to my SVG elements and I figured I'd just include the RaphaelPlugin and run a quick test. That played out well and seems to still work fine, but upon further fiddling I'm wondering if it's possible that there's actually more changes going from Raphael to Snap that is restricting me from doing more. For instance I can do a basic tween (that I believe I even pulled out of the RaphaelPlugin API docs) that works great. var rect = paper.rect(50, 250, 200, 100); rect.attr('fill', '#f00'); TweenLite.to(rect, 3, { raphael: { fill: '#00f', x: 100, y: 200, width: 100, height: 50 }, ease: Bounce.easeOut }); But when I try to do something a little more fancy like animating an SVG text node element, I get some errors coming out of the _getTransform method in the plugin. I'll let this jsfiddle do the rest of the explaining. Just comment/uncomment some lines to see expected/unexpected behavior, etc. My main question is whether or not the RaphaelPlugin should work with Snap just as well. If that's the case, is there any plans to port the RaphaelPlugin to work with Snap? (I believe it's gaining quite a bit of popularity) And actually now that I think about it, maybe I should even test a text node with Raphael to see if it's something that's just not in the plugin for Raphael either. I took a glance at the source of the RaphaelPlugin and noticed that there's a few places where the string "raphael_" is prepended, maybe we just need to know what that would be in Snap and voila? (Highly doubtful, it's never that easy ) All that said, I'm really hoping I'm simply not targeting something properly and I just need to make some minor adjustments to the fiddle.
-
So I'm doing some experimentation to see if I can find a use for SVG in my web game. I can tween SVG elements without a problem, but I cannot figure out how to remove them when I'm done. The typical this.target.parentNode.removeChild(this.target) isn't working for Raphael objects... so how do you do it?
-
Given an SVG image with two circles, #innerCircle and #outerCircle, and other elements I don't care as much about - I want to have an easy way to animate the arc of #outerCicle with maybe easein. Tried snap.svg but it doesn't animate well (which is a point of contention on SO), wanted to try Raphael but it doesn't handle existing SVGs, looked up svgjs but it is pending svg adoption in the RC milestones. (function () { var ocx = 0, ocy = 0, oca = 0; function describeArc(x, y, radius, startAngle, endAngle) { var start = polarToCartesian(x, y, radius, endAngle); var end = polarToCartesian(x, y, radius, startAngle); var arcSweep = endAngle - startAngle <= 180 ? "0" : "1"; var d = ["M", start.x, start.y, "A", radius, radius, 0, arcSweep, 0, end.x, end.y, "L", x, y, "Z"].join(" "); return d; } function polarToCartesian(centerX, centerY, radius, angleInDegrees) { var angleInRadians = (angleInDegrees - 90) * Math.PI / 180.0; return { x: centerX + (radius * Math.cos(angleInRadians)), y: centerY + (radius * Math.sin(angleInRadians)) }; } Polymer('character-hitpoints', { maxHealth: 0, maxHealthChanged: function () { // NotImplemented }, increment: function () { // NotImplemented }, ready: function () { var character = this.character; var h = this.$.hpRing; var t = {}; // load the svg fragment into the element Snap.load("hpcircle.svg", function (f) { var s = Snap(h); s.append(f); var n = s.select('#outerRing').node; var np = n.pathSegList[2]; var a = n.pathSegList[1]; ocx = np.x; ocy = np.y; oca = a.r1; t = s.select('#characterName'); t.node.textContent = character; t.node.x = ocx + 10; t.node.y = ocy; }) }, animRing: function (divRing) { var hpRing = Snap(divRing.toElement.shadowRoot.querySelector('#svg2')); var max = Math.floor(Math.random() * 359 + 1) Snap.animate(0, max, function (val) { hpRing.select('#outerRing').attr({ 'd': describeArc(ocx, ocy, oca, 0, max) }); }, 2000, mina.bounce, function (val) { console.log('Animate done'); }); } }); })(); The last bit, animRing, changes the arc, but doesn't actually animate with a bounce, it just flips to the new size. Any advice is welcome, I've got a dent where I've been banging my head against my desk.
-
First of all, I'm long time fan. Greensock is great! I've been using GSAP in one of my projects as a unified platform for animating both SVG and HTML. Up until recently, I'd been using Raphael as my SVG library. GSAP's RaphaelPlugin was a nice abstraction from the messy matrix math underlying transitions between transform states. I got spoiled using scaleX, scaleY, tx, ty, localPivot, etc. Recently, I switched fron Raphael to D3, both for the data-driven functionality but also for more direct access/control over my SVG elements. (D3 focuses on transformation of SVG, whereas Raphael introduces it's own, special representations.) The change has been refreshing, but I miss the added functionality of RaphaelPlugin--especially for times when I simply want to spin and scale SVG elements using transform without thinking about interpolation, etc. [i'm not exclusively making graphs, but also flying spaceships around, etc.] So I went back and looked at RaphaelPlugin, and it strikes me that you're very close to having a general purpose, library-agnostic SVG plug-in for GSAP. The very few Raphael-specific methods (e.g., matrix, bbox) in RaphaelPlugin are mirrored in the SVG spec (e.g., getCTM, getBBox). With a little hacking, I got a prototype (mostly) working fairly quickly. Is there any interest in the community for such a thing? Have GSAP staff thought about this?
-
Hello, I m working with http://raphaeljs.com/ javascript library for vector graphics , however i see TweenMax also contain one file RaphaelPlugin.min can someone please explain what is difference between both ? and which one i need to include in my files for creating and animating vectors ? Regards Tauseef Ahmed
-
Hi, I was wondering if there is any help out there to create a metaball effect with two 2D circles. I am using Raphael to create the 2D shapes. Is this something that needs to be done within Raphael? The effect I am going for is that there are a bunch of indicators moving vertically down a line at varying speeds. When they get close enough, I would like to animate them with a metaball effect so that the circles merge together and a number is displayed to show how many are in the cluster. Is there any help out there to construct something like this? The bezier plugin only does tweening "along a bezier path," if I am not mistaken - it won't do a shape tween using beziers?
-
Hello, I love your products and everything Greensock stands for. Your products are top-notch, and the customer service is as good as the Kinko's customer service is bad. GreenSock customer service is like "Bizzaro Kinko's Customer Service." In other works: GreenSock - "Totes Awesome Sauce" Kinko's - "The Hangover 2 & Indiana Jones 4, kind of awful" I am trying to come up with the most efficient and "zazzy-licious" way to put in the background of one of my website page, the scrolling code that you see on computer screens in the background of movies and tv shows. I'm not sure if I want just pure binary (1's and 0's) or letters and numbers. I figured that I would find about 500 ka-trillion Google results showing different ways of doing this in various languages, but alas, I didn't really find much of anything. I'm using the Greensock Javascript libraries (v.12) and the latest version of Raphael.Js. I don't really need anyone to show me how to do this, by providing a working example (at least, not yet). I'm really looking for a broad outline of the steps I would need to take to accomplish this task in the most code efficient and least taxing burden on the browser way possible. Any help would be greatly appreciated. Thanks, Sweet J
-
Hi, I'm trying to tween a Raphael set: var atomH1_1 = paper.set(); var atom_Circle1 = paper.circle(10, 10, 25).attr({id: 'circle1','gradient':'70-#00CC00-#00FF00','stroke-width': '0'}).data('id', 'circle1'); var atom_Circle2 = paper.circle(20, 20, 25).attr({id: 'circle2','gradient':'70-#0000CC-#0000FF','stroke-width': '0'}).data('id', 'circle2'); atomH1_1.push(atom_Circle1); atomH1_1.push(atom_Circle2); tween1 = TweenMax.to(atomH1_1, 0.3, {raphael:{'tx':100,'ty':100,'scaleX':0.5,'scaleY':0.5},ease:Power1.easeInOut, onComplete:nextStep}); But it seems it triggers an error in GreenSock (): TypeError: c is undefined file:///E:/the%20Factory/Vialight/06_www/js/greensock/plugins/RaphaelPlugin.min.js Line 13 When I use the Raphael animate, it works fine, (but that's not what I'm looking for): atomH1_1.animate({transform: "t100,100"}, 1000); Is it not possible to tween Raphael sets? Or what am I doing wrong? EDIT : I sort of solved the problem by using multiple targets in GreenSock: var mySet = [atom_Circle1,atom_Char1]; TweenMax.to(mySet, 2, {raphael:{'tx':100,'ty':100},ease:Power1.easeInOut});
