Jump to content
Search Community

Leaderboard

Popular Content

Showing content with the highest reputation on 05/15/2018 in all areas

  1. There are a few ways you can do this ... one simple way is to set a global boolean, modify it within the click handler, and then modify it within the timeline's onComplete callback.
    4 points
  2. In addition to @Shaun Gorneau's excellent advice, GSAP also has some built-in methods for this type of check. https://greensock.com/docs/TweenMax/static.isTweening https://greensock.com/docs/TimelineMax/isActive() Happy tweening.
    3 points
  3. Hi and welcome to the GreenSock forums, I added code similar to yours to a fork of one of @PointC's demos. It appears to work just fine snapping to increments of 50px Please do your best to provide a very basic example of what you are doing in an online, editable environment like CodePen, jsFiddle, plunkr, etc. To edit the demo above: click "Run Pen" click "edit on CodePen click "fork" replace code in demo above with the least amount of code possible to illustrate the issue. if you can replicate the problem without Angular that would be fantastic. save demo send us the link Hopefully once we can see your demo in an online environment that allows us to easily, view, test and share we will be able to provide some more assistance.
    3 points
  4. You don't need to use GWD for DoubleClick. These are the steps you need: https://support.google.com/richmedia/answer/3526354 Full documentation: https://support.google.com/richmedia/answer/2691686 Hope it helps!
    3 points
  5. This was a fun little challenge. Here's another technique that uses what I call a "chopped ease" (it's a fork of Craig's): Normally an ease goes from 0 to 1 of the course of the tween, but here I'm creating a new ease for each tween that basically scales that value down. That way, you use a normal tween as if it's going along the whole path, but since the ease is chopped (well, scaled I guess), it'll go only partially to the end of the path (according to however much we chop). Probably more performant this way and more concise. Nice job @Carl and @PointC. Hope you don't mind me offering an alternate solution.
    3 points
  6. Interesting. Just saw that there's a DOMPoint, and it will work with a DOMMatrix almost exactly like my SVG example. I guess it doesn't matter if it's a 2d or 3d matrix since it will do the math for you. https://developer.mozilla.org/en-US/docs/Web/API/DOMMatrix/DOMMatrix
    3 points
  7. Hi @puffywuffer Welcome to the forum and thanks for joining Club GreenSock. Looks like I'm a bit slow so @Carl has whooped me and already given you the answer. I did see your question earlier and was tinkering with a demo, but got sidetracked until now. It's pretty much the same idea as Carl's demo, but it might be helpful so I'll throw it out here for you. Happy tweening and welcome aboard.
    3 points
  8. Hi and welcome to the forums. That sounds like a good idea to use MorphSVG to get the bezier data of a path and tween all the elements along the same path. Here is a demo that shows something similar (without svg). Each element is tweened along the same path. Then a timeline is built that tweens the progress() of those tweens to progressively increasing values: With so many elements (ellipses) as you have you probably would want to build a loop that handles most of the heavy lifting. The key for this to work is to have the elements all start at the beginning of the path.
    3 points
  9. Hi and welcome to the GreenSock forums, We have a tool called Draggable which lets you drag things: https://greensock.com/draggable The things you drag have a hitTest() method which allows you to test if the thing you are dragging is overlapping another thing by a certain amount. Here is a basic demo showing how it works. Drag the colored rectangles over the drop area. If you release over the drop area they will stick, if you release outside the drop area they will go back. I'd recommend you experiment with the technique and try overlaying some "drop area" elements (with very low opacity) on your map.
    2 points
  10. Okay, looks like you have the DrawSVG part working now. If you want to animate from a solid fill to a gradient on a path, you'll want to animate the stop-color of your gradient. Here's a quick example. See how it's not actually animating the fill of the path, but rather the stop-color of the gradient? The path fill is always the gradient. We're just changing the gradient stops to the same color. Does that help? Happy tweening.
    2 points
  11. Well, I can't speak for Carl (because he's way smarter than I am), but I always enjoy a lesson from Jack's JavaScript University. Sometimes the lessons even get through my thick skull. That's pretty neat Jack. I wouldn't have figured that out with a thousand attempts. I thought this question was an interesting technique and a fun challenge. I'm somewhat surprised it hasn't come up before now, but maybe it has and I just missed it. It could be quite handy in some situations. Thanks for the lesson.
    2 points
  12. Thanks for the help and for the warm welcome!
    2 points
  13. MDN says it's non-standard, but it's just in draft. https://drafts.fxtf.org/geometry/
    2 points
  14. Hmmm... I dunno. Are you still doing electron based apps? What I did above will probably only work for regular SVG elements. However, a new feature is the DOMMatrix, which looks like it was added to Chrome 61. I haven't tried it yet, but that should work for any type of any element. *In theory* https://developer.mozilla.org/en-US/docs/Web/API/DOMMatrix But if you can get a 2d matrix... matrix(a,b,c,d,e,f); Then you should be able to get a transformed corner like this. You of course would need to do that for every corner. var x = matrix.a * corner.x + matrix.c * corner.y + matrix.e; var y = matrix.b * corner.x + matrix.d * corner.y + matrix.f;
    2 points
  15. It's pretty easy if you can get the matrix. SVG provides the easiest way to get a matrix. a = topLeft; b = topRight; c = bottomRight; d = bottomLeft; var r = element.getBBox(); var p = svg.createSVGPoint(); var matrix = svg.getScreenCTM().inverse().multiply(element.getScreenCTM()); p.x = r.x; p.y = r.y; var a = p.matrixTransform(matrix); p.x = r.x + r.width; p.y = r.y; var b = p.matrixTransform(matrix); p.x = r.x + r.width; p.y = r.y + r.height; var c = p.matrixTransform(matrix); p.x = r.x; p.y = r.y + r.height; var d = p.matrixTransform(matrix); A demo where I use that to match up the positions of different SVG elements.
    2 points
  16. Hi @gaggo With the scrollTo plugin, you can scroll to an element ID, but the snap is going to need a number. If all the elements are the same size, it would be pretty easy to use a function and snap to a value, but I'm assuming the elements won't be the same size. I think a fairly easy approach would be to loop through your elements and get their offsetTop distance and create your snap array from those values. Maybe something like this? Others may have additional suggestions, but that's the first thing that came to my mind. Happy tweening.
    2 points
  17. Nah, I bet you'd never notice a difference at all. Not even a little bit. We've designed things to be very efficient, even the feature detection stuff (most of that runs only once when GSAP loads). Let me put it this way: if you look at the overall load that an animation puts on the system, I'd guess that GSAP only accounts for a small portion (2-15%?) whereas the rest is eaten up by browser rendering (reflow, repaint, etc.). So even if we eeked out 5% more performance in GSAP (and there's no way it'd be that high because browser/feature detection is probably well under 1%), the overall gain you'd see would be tiny (5% of 2-15% is 0.1%-0.75%). So even with exaggerated numbers, you're seeing less than 1% improvement. In reality, it'd probably be closer to 0.01%. Nobody will notice that. Good question though!
    1 point
  18. Hi @jh2k314 Welcome to the forum. I'm not sure I understand the desired outcome here. DrawSVG only works with strokes and none of your paths have a stroke. Your demo is also missing the DrawSVG plugin. For SVG paths, you'd want to use 'fill' instead of 'background'. Or were you trying to change the background of the parent div? I couldn't quite tell what should be happening in the second tween on the timeline. If you could provide some more details about what you'd like to happen, we can point you in the right direction. Happy tweening.
    1 point
  19. That works! The nice thing about using a matrix to get the coordinates is that it will handle other transforms like scale. Maybe @GreenSock will consider adding transform methods like that to the CSSPlugin.
    1 point
  20. Hi @alfianridwan, I just managed to do it. lol. here you go buddy. https://codepen.io/miksv/project/full/DkPbev/
    1 point
  21. Howdy, Brad. I can't imagine that DoubleClick would require that ads be built in GWD. That'd be pretty shocking. I know that a ton of ad designers/developers like yourself love building things with GSAP alone, and I also know that DoubleClick (and every major ad network) not only accepts GSAP-based ads but GSAP is the only robust animation library that is whitelisted from file size calculations. So I'd be very surprised if you ran into any problems with pushing a GSAP-based ad through any of Google's ad channels. But again, I can't speak in any official capacity because I'm not Google and I don't really know much about their policies/requirements these days. Have you asked them directly? Perhaps one of the other ad gurus around here can chime in, like @ohem, @Oliver16Years, @davi, @volcanoflash, or @somnamblst. Good luck with the project!
    1 point
  22. Hey all. Thanks again. I had to take a week off from screens after we launched that site. Glad you like the site. A lot of effort went into it.
    1 point
  23. Ah, okay. Well, you could also just use roundProps and simplify things a bit: That's probably a bit more performant as well. Does that help?
    1 point
  24. That's totally normal. Not all browsers run at a perfect 60fps all the time. There are MANY factors that go into that (computer performance, other background tasks, etc.). That has nothing to do with GSAP, by the way. I'd strongly recommend never writing code that assumes a certain number of onUpdates or requestAnimationFrame ticks. Well, I suppose there could be some rare situations where it'd be appropriate but it's extremely uncommon. Can you help us understand why you're trying to build something that's dependent on a certain number of onUpdates? If you want to animate to a value but never quite reach it, can't you simply adjust the target value (reduce it slightly)?
    1 point
  25. Hi @robsarna Welcome to the forum and thanks for joining Club GreenSock. First, there are no such things as stupid questions. We're all on different points of our learning journey. The site in your post is using canvas for their blobs which would probably be the better choice for a full screen animation like that. That being said, there's no harm in trying it with SVG to see how it performs. The secret with goo and blobs with SVG is the filter. The important part from Chris's demo is this: <filter id="goo"> <feGaussianBlur in="SourceGraphic" stdDeviation="8" result="blur" /> <feColorMatrix in="blur" mode="matrix" values="1 0 0 0 0 0 1 0 0 0 0 0 1 0 0 0 0 0 21 -9" result="cm" /> </filter> You could create a full screen SVG with some circles and animate them randomly. When they collide the filter will take care of the rest for you. I made something similar with goo in this demo: You said your full screen attempts have not worked well so I'm assuming you have something you could show us? If you would put that into a demo, we could take a look at it for you. Here's some info about that: Hopefully that helps a bit. Welcome to the community and happy tweening.
    1 point
  26. Hi and welcome to the GreenSock forums, Thanks for the demo. Very helpful. An important thing to keep in mind is that you can only animate properties that the browsers and various CSS and SVG specifications allow you to. The target of your tween is an svg <path> and paths don't have left or color properties. In your demo, try adding this css: #lettere { color:black; left:100px; } You will notice that it won't have any affect on the svg path. However you can change the position of a path by applying a css transform like transform:translateX(100px); to do that in GSAP you would just animate the x value. To change the color of a path you would animate it's fill var logo = document.getElementById("lettere"); TweenLite.to(logo, 2, {x:100, fill:"black"});
    1 point
  27. Hi @Vinod Welcome to the forum. You'll need to use 'x' instead of 'left' with your SVG and 'fill' instead of 'color'. Your distance of 524 will also be outside the viewBox. Please try this: TweenLite.to(logo, 2, {x:100, fill:"black"}); Hopefully that helps, Happy tweening.
    1 point
  28. Here's a quick demo you can tinker with to get some ideas. It's the weekend so it's nothing fancy. Happy tweening
    1 point
  29. Hi @piyush walia If I understand your question correctly, I'd recommend using clearProps rather than jQuery's removeAttr() method. I think if you change your reset function a bit, you should see the desired behavior. Please try this: function reset(){ TweenLite.set(".block_1, .av2", {clearProps:"all"}); $(".block_1").addClass('block_2').removeClass('block_1'); $(".av2").addClass('block_1').removeClass('block_2'); }; Hopefully that helps. Happy tweening.
    1 point
  30. Maybe something simple? TweenMax.set(plane, {scaleY:-1}); Just a thought. Happy tweening.
    1 point
  31. One thing you could do is replace the text in the element itself then you would be free to do whatever you want as far as css goes. It's late so I'm not going to try and get into giving an example right now, however... You could animate the change with the text plugin. https://greensock.com/TextPlugin. And here's a link with various techniques for swapping text https://css-tricks.com/swapping-out-text-five-different-ways/
    1 point
  32. You might want to keep an eye on this one: https://spiritapp.io/ (we aren't directly involved in that, but it looks interesting). We've heard of a few other ones that may be in the works from others, but nothing solid yet.
    1 point
  33. I was playing around with this old effect from my Flash days, maybe this could help you get started: http://codepen.io/funkybudda/pen/oXqwGm
    1 point
  34. I saw this tweet today: https://twitter.com/MiguelCamba/status/560806390210363393asking about whether the Web Animations API will ultimately make GSAP obsolete, so I figured I'd offer a few quick thoughts here and invite others to chime in if they'd like. For those who don't know, the "Web Animations" spec I'm talking about is described here: http://www.w3.org/TR/web-animations/ I think it's a great initiative by some browsers to address quite a few major deficiencies in the current crop of animation technologies that exist inside the browser. For example, if the spec is adopted, you'd be able to create tweens and timelines that have a lot of the controls that GSAP users have enjoyed for years (play(), pause(), resume(), reverse(), etc.). Awesome. Big step forward for the native browser. Web Animations also aims to unify some pieces of SVG animation capabilities and CSS animation capabilities. Again, bravo. I have spoken to some of the editors of the spec (super smart, and super nice guys) who have consistently maintained that they don't see Web Animations as competing with tools like GSAP. Instead, they're intended to be complimentary. They recognize that tools like GSAP offer a lot of sugar on top that makes things far more practical for real-world animators. So if Web Animations get adopted by all the major browsers (and that's not guaranteed - only Firefox, Chrome and Opera have said they'll adopt them last time I heard), tools like GSAP could leverage them under the hood where appropriate to potentially get a speed boost or additional capabilities. Excellent. Why not just use Web Animations instead of GSAP? I don't mean this to sound critical of Web Animations, but since we're being asked to explain why/where GSAP fits in, allow me to point out a few important factors to keep in mind: Animate scale, rotation, skew, and position independently - this is a BIG deal for real-world animators, and since the Web Animations spec is built on top of the CSS spec which shoves them all into a single "transform" property, it's impossible to manage them in a truly independent fashion. GSAP, on the other hand, makes it easy. I had a long talk with the editors about this a while back, and although they really wanted to find a solution, none of us were able to find one because of the need to maintain backward-compatibility with the CSS spec. So a tool like GSAP is necessary to get robust independent control. Transforms are definitely the future of animation because they can be GPU-accelerated and don't affect document flow (better than "top" and "left"). Compatibility - GSAP works back to IE6. Web Animations aren't fully implemented in any browser today, but are partially implemented in Chrome and Opera. Microsoft may never implement them. Not sure about Apple either. There is a polyfill that's considered "beta", but when I tested it there were huge performance problems and garbage collection bugs that crashed the browser in my tests. It didn't seem ready for production use. Keep in mind that the spec itself is in flux, so you may write code today that'd break when the spec gets finalized. Works beyond the DOM - GSAP can be used to animate pretty much anything JavaScript can touch including canvas library objects, generic objects, or whatever. The Web Animations spec is for DOM elements. Solve SVG (and other browser) bugs and inconsistencies - GSAP solves problems with things like transform-origin behavior and harmonizes it across browsers. See http://css-tricks.com/svg-animation-on-css-transforms/Web Animations don't solve problems like that. GSAP "just works" where standards fail. Plugins and conveniences for real-world problems - there are all sorts of problems that animators face and GSAP solves. The spec won't do that. For example, overwrite management, physics, scrolling, relative values, directionalRotation (clockwise, counter-clockwise or shortest), rounding, labels, etc. More easing options - GSAP offers RoughEase, SlowMo, and more. See http://greensock.com/ease-visualizer/ One of the biggest promises of Web Animations is that it'll tap into the browser's native power to make things perform better, like layerizing things and shoving them to the GPU efficiently. I sure hope that happens and that it translates into real-world gains. GSAP already does some of that by leveraging 3D matrices during tweens, although I'd bet it could be faster if it was done directly by the browser. The problem is that in tests I've done with CSS animations (which use the same engine under the hood), they really weren't much faster in most cases, and JS was often faster. I know, it sounds crazy. JS execution is super fast these days (when written well). But if the browsers do indeed make things faster with Web Animations, that'd be amazing and GSAP can just tap into that under the hood. Again, I don't mean to criticize the Web Animations spec at all - I think it's a cool initiative and I hope the browsers get better and better an animation. The more tools they give us, the more GreenSock will leverage them and create even more refined tools for that special breed of top-notch animator out there who needs to solve real-world problems. GSAP + Web Animations could be a great combo eventually. And I'm confident that Web Animations won't supplant GSAP. Feel free to correct me about any assertions above. I'm admittedly no expert on the Web Animations spec.
    1 point
  35. This is a forum specifically for GreenSock's GSAP library. Carl's solution only needs GSAP to accomplish this - jquery is used for a bit of selection and event management, but this isn't required. You can use regular javascript document.getElementById and onclick etc to trigger the tweens. If you don't even want to utilise the GSAP library however, then you might have better luck on a more general javascript forum. We're focused on providing help and support to the GSAP library here.
    1 point
×
×
  • Create New...