Jump to content
Search Community

anthonygreco last won the day on March 21 2015

anthonygreco had the most liked content!

anthonygreco

Members

  • Posts

    74

  • Joined

  • Last visited

  • Days Won

    4

 Content Type 

Everything posted by anthonygreco

2
3
Page 3 of 3  
  1. anthonygreco
    I am attempting to animate opacities of several elements and experiencing some performance issues. Some preface... I'm using Snap.svg and have ported the RaphaelPlugin for Snap in my fork of GreenSock (https://github.com/anthonygreco/GreenSock-JS/blob/master/src/uncompressed/plugins/SnapPlugin.js) so generally speaking if anyone has experience with the RaphaelPlugin, any info you may have on the matter should be at least mostly relevant, though anyone with experience with GSAP may have just as valuable input. Now for the problem at hand. I have roughly 1500 different path elements on a page in which no more than 400+/- of them are animated at any one point and only animating their opacity via staggerTo shows the other simple animations choppy. The most interesting part is that the 400 or so path elements don't seem to be choppy, but the simple animation is. My first question is simple; I may have more afterward but for now.... are there any idiosyncrasies to staggerTo that I may not be aware of from a performance perspective? Eventually, I'll probably rebuild what I've done in a JSFiddle to get more specific circumstances available for assistance, but right now I'm more interested in the overall larger picture and any optimization guidelines anyone may have.
  2. anthonygreco
    Ahhh, I was adding the offset in the internal timeline instead of the main timeline. I swear sometimes just asking the question helps me answer my own issues. lol Will update this with a new fiddle shortly. WORKING UPDATED FIDDLE HERE
  3. anthonygreco
    I thought I had offsets working yesterday, and I can't see that I've made any relative changes, but for some reason the offsets aren't working as expected. This fiddle has an offset on the last two items (which are in the same index in the params array and therefore added to the timeline together) but the offset doesn't seem to be offsetting, instead it seems there's a delay at the end of that timeline. You can visually see it best by watching the progress slider or moving the offset to one of the middle timelines (i.e. id == 'line2' or 'line3') you can see the "delay" in the animation itself. Am I just doing something silly here again? (::smh:: at the undefined error above ) FYI, for anyone else who stumbles upon this post, this latest fiddle, while issues still exist with the offset does resolve some other display bugs found in the previous fiddle I discovered after adding the slider.
  4. anthonygreco
    There it is... grouping items in the json to align multiples, offsetting where needed, everything seems functional. Thanks alot Jack!
  5. anthonygreco
    AHHH!!! My hero! LMAO. Thanks man, I literally just came back to the post to say I found the same. Damn antsy, impatient programmers! ::looks at himself:: Clearly I have a bit of cleanup to do, but this is a working example for anyone else that comes along. http://jsfiddle.net/anthonygreco/4Fqnw/ Thanks again Jack! And keep up the great work with GSAP! We're all very grateful. EDIT: Once again I jumped the gun , got a couple issues to work out here, but I'll be sure to post an updated fiddle upon completion as this took me a bit of time to figure out so hopefully it'll help someone else in the future.
  6. anthonygreco
    Blast. I do see what you're getting at. Looks like I'll need to rethink this entire thing then since the method is what's actually doing the progressive path animation of the strokes. I'll be fiddling on a fork of the fiddle I posted here so if anyone else comes across this and feels like taking a stab they can. Thanks for the quick reply Jack! Any other ideas/suggestions are greatly appreciated. EDIT: So the animatePath method actually does return the path animation tween (and shows it's a tween object upon logging it) but when I remove the anonymous function encapsulation I get an error: Uncaught Cannot add undefined into the timeline; it is not a tween, timeline, function, or string. Updated Fiddle Here
  7. anthonygreco
    Works fine for me in Chrome 32, Firefox 27 & Safari 7 on OS X. What OS/browser are you using??
  8. anthonygreco
    Hi all, I've recently created a long animation by way of manually adding a whole bunch of individual tweens to one timeline along with delays so that everything lines up. I've since realized that nested timelines is the better way to this, especially since 98%of the animation I'm building is extremely sequential, though I should say that there are some places I'd like one timeline to overlap another, but I believe I can simply use an offset (instead of delays) on individual timelines that need a slight shift forward or back in the timeline. So i understand the concept here, but in my implementation I'm not getting sequential animation of the sequence. Instead I see everything run at once in sync. Here's a jsfiddle showing how I'm building the individual and main timelines. It may seem like there's a lot going on, but you can probably disregard most of the first few vars at the top of the fiddle (which are just param data and drawing methods), the timeline specific logic is at the bottom. I should state, that while there are two of the "banners" displayed there, which should animate sequentially, the elements of the banner should also be sequential. Looking at the structure of the json data (arrays split based on where they should live in a nested timeline) you'll see I want the first line (top left corner) to animate then the top box line and the bottom box line together then the text and the last line (bottom right corner) animate. Making a total of 3 timelines for each banner. Again, I know there may be a bit of code here but I've stripped this down as far as I can get without leaving all of the aspects in for everyone to understand what the goal is. Feel free to ask me for me questions for more clarity anywhere, etc.
  9. anthonygreco
    Update. I believe I have this working. Though i haven't thoroughly tested everything yet it seems the only thing I've had to alter so far is the way Dmitry handles matrices. In Raphael there was a matrix property on an Element with helper methods attached to it too (like invert()). In Snap to get a matrix I'm doing element.attr('transform').localMatrix (though we also get .globalMatrix, .diffMatrix, among some others) and to handle the inversion there's some proto methods. I'll let this fiddle explain it further. I'll be forking GreenSock either later tonight or tomorrow and see if I can further test etc and once I feel good about it I can create a pull request or something for Jack or whomever to approve/alter/etc. Question, if the changes are so small (so far only about 3 lines have changed) would you want to create another plugin (SnapPlugin) or make the Raphael one handle both? I'd imagine a new plugin but would love input from anyone.
  10. anthonygreco
    Agreed Carl, they are quite similar. While I'll be creating a mock object as I've done in the past I am also looking at more of the innards of the RaphaelPlugin and the first issue I'm noticing in the _getTransform method is the transformation matrix. Looks like in Raphael (docs: http://raphaeljs.com/reference.html#Element.matrix) matrix was a readily available property on the element which doesn't exist in Snap (search docs for matrix: http://snapsvg.io/docs/), but certainly there's a way to get that data from an element. There appears to be a way to manipulate matrices, but I haven't determined how to read the current matrix yet. There's a few things I'm not too sure of in the plugin, but I'm going to take a close look at the template plugin and see if I can see more of what's going on "inside the sock". Is there possibly a specific plugin someone could recommend that has a very straight forward connection to the rest of TweenMax/Lite that would be best to look at to analyze and get a better picture overall? If I make any progress on porting to Snap I'll be sure and report back as well.
  11. anthonygreco
    Agreed, pretty sure it was you who brought up the "dummy object" solution in a previous post of mine for a progressive path animation and that little trick has found it's way into a couple of nice places in my codebase already. So many thanks for that elegant solution. Is there any advantage to having a plugin then? Other than not having to create a "mock object" to use a guide for the element(s) animating? I'm sure Carl or Jack will respond to the plugin specifics when they can. Thanks again Rodrigo!
  12. anthonygreco
    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.
  13. anthonygreco
    Duh, because there's only two items added to the timeline with the first one starting at 0! That makes sense now. Thanks for the ASCII drawing for a clear explanation. I would've had issue with you using Paint too. lol
  14. anthonygreco
    I don't believe I'm following you. If both values are 0 and 4 for relative and absolute. What's the difference between the two? I would expect relative (i.e. using '+=') would mean 2 seconds after the previous animation in the timeline. Does that make my question clearer?
  15. anthonygreco
    Excellent! Thank you both for the examples as well as the link to the changelist. I'm working on adding functions that are run to progressively draw a path (using Snap.svg but shouldn't be specific to the issue I'm having --I believe, correct me if I'm wrong--) and then chaining them (with or without a delay in some cases). I've built this in a "native" fashion, and now I'm trying to accomplish the same thing with TimelineLite. Here's a fiddle with my native approach using callbacks and setTimeout for the delays: http://jsfiddle.net/anthonygreco/j23E3/ and here's where I'm trying to use TimelineLite: http://jsfiddle.net/anthonygreco/V38fR/ Anyone have any thoughts on what I may be missing here? Edit: Upon further fiddling it looks like I just need to be able to pass parameters which I can do by wrapping the animatePath method with the parameters in an anonymous function. Unless anyone has any other suggestions on passing parameters for a method that's added to a timeline. I'll update this again with a new jsfiddle once I have it all hashed out. Edit: So that totally works, but it seems I've lost the delay aspect of the timeline. Here's a new fiddle: http://jsfiddle.net/anthonygreco/m937Y/ Edit: Sorry for the multi-edits. It looks like I can set delays absolutely, but relative delays don't work. But this makes things a bit less manageable, as the fiddle is merely a proof-of-concept for a larger more complex animation. Fiddle with absolutes: http://jsfiddle.net/anthonygreco/BYrLN/
  16. anthonygreco
    I recently ran across an example where someone used the insertMultiple method but looking at the docs I don't see that method anywhere. Can someone point me to where this is in the documentation?
  17. anthonygreco
    Totally understandable. I'm also in the process of moving to Snap.svg which is a fork from the creator of Raphael that basically drops the VML rendering so IE 6,7, & 8 support is lost ( yay) in favor of gaining more svg capabilities across modern browsers. Either way, thanks for fiddling, it did give me a bit more insight as to other potential approaches.
  18. anthonygreco
    Ok, it took me a while but I've hacked away at this to find a way for the progression to be handled without a clear method having to be called on the paper, so that it'd be possible to draw multiple paths progressively at the same time. Once again though, I can't seem to find out how to accomplish the same thing via GSAP. Here's a fiddle showing how I'm handling the progression without the clear, a simple test theory showing that I feel this could be a possible solution, and my attempt via GSAP. Rodrigo... pick up the bat phone! lol
  19. anthonygreco
    Looks like someone fiddled with my fiddle. Turns out simply adding shape.length = 0; resolves the easing issue. New fiddle here. EDIT: Didn't notice before but whoever fiddled also changed one other aspect. The calculation of the offset in the drawLine method doesn't use the tween.progress(). Changing: offset = obj.pathLength * tween.progress(); to: offset = pathLength * (shape.length / pathLength); seems to work. Not quite sure why the progress method doesn't work though.
  20. anthonygreco
    Thanks for the reply rhernando! Duh, totally forgot TweenMax has everything. Still not sure why the easing doesn't seem to work in the first fiddle in my previous post though. Also, I have considered using multiple canvases, but foresee it becoming a bit messy. Though it's still my fallback option, I already have a method in the second fiddle in my previous post to draw without the clear method, just not sure how that'll work when using TweenMax for the animation yet as the previous native vs GSAP fiddle Carl helped out with.
  21. anthonygreco
    Thanks you Carl for providing the GSAP way! This actually brought a few things into perspective for me. A couple things though. First, I'm not sure the easing is being used. I forked your fiddle and added the EasePack plugin (since I realized it was missing to begin with) but that didn't seem to help. New fiddle here. Second, I'm also currently looking at a way to draw a path without using the clear() method on the paper with the goal being that I'd be able to draw one shape via a path, then convert that into a standard shape after the animation completes (which I'm not sure how I'd address just yet, but figure that's a common task in Raphael), then "chain" the next path animation, continuing until all animations have been drawn to the screen and converted to shapes that could then be scaled on window resize. Here's a fiddle of where I am with that if you feel like another challenge. My main question though is in regard to the easing, as I understand the other aspects may be out of the scope of what you guys want to support via the forum. Thanks again to you and all the guys here at Greensock!
  22. anthonygreco
    Perfect! Thank you both for the thorough explanation of what the root of the issue was. And Jonathon, thanks for the JSFiddle example proving that. Great community here. I'll definitely be sticking around.
  23. anthonygreco
    Wondering if there's a way to get around a "popping" issue I'm seeing in CSS animations. It seem to happen when handling the animation both natively and via gsap cssplugin. I did some googling and found this post which seems to fix it in native css animation, but when i try the same technique in gsap i still see the same issue. Here's the post on stackoverflow for the native fix and here's a jsfiddle showing that it works well and finally here's a jsfiddle of the same thing via gsap. Any thoughts on why this is happening and/or how I may go about resolving it?
  24. anthonygreco
    Hello GSAP! I'm trying to accomplish this same thing via Raphael. I can progressively draw a basic path with Raphael but I'm having issue trying to incorporate TweenLite/Max. Normally I'd go straight to StackOverflow for this but there seems there may already be a focused community right here! I've used most of the examples in this post as reference so I won't go on about what I'm trying to accomplish etc. The jsfiddle here should be pretty straight forward. I'm hoping I'm just missing something entirely silly... I've been looking at soooo many different js canvas/svg drawing libraries in the last 5 days my head is spinning so maybe my head is just still stuck in another framework. Any thoughts on what I'm not doing right here?
2
3
Page 3 of 3  
×
×
  • Create New...