Jump to content
Search Community

GreenSock last won the day on April 21

GreenSock had the most liked content!

GreenSock

Administrators

  • Posts

    23,151

  • Joined

  • Last visited

  • Days Won

    817

 Content Type 

Everything posted by GreenSock

489
490
491
...
916
Page 490 of 916  
  1. GreenSock
    Browser support for clip-path isn't great, and it's even worse for animated clip-paths unfortunately. Looks like a Chrome bug that can't be worked around (as far as I know at least). I wish I had better news for you. If you need advanced masking, you might want to look into canvas or pure SVG (rather than an SVG mask on a regular DOM element).
  2. GreenSock
    Can you elaborate on what exactly you mean by "each element's offset"? Offset from where? Do you mean their progress along the path?
  3. GreenSock
    No problem. Happy to help. Good luck with your project.
  4. GreenSock
    Is this more like what you want?: http://codepen.io/anon/pen/woWeXR?editors=0010 Keep in mind that tweenTo() accepts either a number (in seconds, as the time you want to tween the playhead to), or a string (label where the playhead should animate to). It looks like you were trying to feed in a progress value (which is always between 0 and 1). So I just multiplied that value you had by the duration to get the correct number. I also used tweenTo() to initially just make the timeline animate to that first dot. Is that what you wanted?
  5. GreenSock
    You loaded TweenLite and CSSPlugin only in that second example. You forgot to load TimelineLite. Remember, TweenMax has a bunch of common tools INSIDE of it, like TweenLite, CSSPlugin, TimelineLite, TimelineMax, BezierPlugin, RoundPropsPlugin, etc. That's why the first one worked - you were loading TweenMax. Does that clear things up?
  6. GreenSock
    Have you tried adding a very slight rotation? Some browsers try to "snap" to whole pixels in many situations (they're trying to be helpful, but it looks jerky when animating), but if you add a little rotation (even 0.5 degrees or something), it can force that to be disabled.
  7. GreenSock
    I have very good news for you. We're getting close to releasing CustomEase and CustomWiggle which will make this effect SUPER easy to create and tweak. Both tools are available to Club GreenSock members already. Here's a fork of your codepen, using CustomWiggle (which leverages CustomEase under the hood): http://codepen.io/anon/pen/xROOwZ?editors=0010 Here's another demo that shows various "types" of wiggles: http://codepen.io/GreenSock/pen/LRqkOr?editors=0010 And of course you can tweak the number of wiggles too. To learn about CustomEase, check out this pre-release video: Does that help?
  8. GreenSock
    I assume this is what you were looking for: http://codepen.io/anon/pen/aBdxMM?editors=0011 Right?
  9. GreenSock
    It always warms my heart to read responses like yours, philip. The folks around these forums (especially the moderators) are amazing at pitching in and helping folks with a positive tone (nobody shames people here for asking "dumb" questions or anything like that). It's a privilege to have them here. I realize that in this particular thread it was me providing some input, but your response reminded me of others I've heard in the past about our whole community here, and the credit goes to our generous moderators (and admins like Carl of course). Anyway, thanks again for the kind words, and good luck with the project.
  10. GreenSock
    Howdy @HGStudio. You're correct - we don't have Draggable in ActionScript. I'm curious - what caused you to choose Flash over HTML5/JS for this project? I'm not criticizing at all - just wondering so that I can better understand the decisions developers make. We saw a HUGE shift to HTML5/JS several years ago and almost the entire Flash user base that we served years ago made that jump and clearly communicated to us that it's where they wanted our help as well. So that's where all our resources are focused now. Anyway, sorry there's not a simple solution for you regarding Draggable in Flash. I really wish I had one to offer you.
  11. GreenSock
    I completely missed the fact that you posted this in the Flash forum, not HTML/JS. Sorry about that. There is no ModifiersPlugin for ActionScript, but you could probably adapt the demo for use in ActionScript and just tap into an onUpdate to modify the values. Unfortunately, we don't actively support the ActionScript tools anymore since almost everyone shifted to HTML5/JS a few years back and made it clear that that's where they wanted us to focus our energy. Anyway, hopefully the concepts demonstrated in the demo are helpful.
  12. GreenSock
    I guess the short answer to your question is "no" (there's not pre-baked GSAP animations that just automatically fire off when you add a class) However, it should be relatively easy to just tweak a little code wherever you're adding your class, kinda like: //OLD: $("#yourElement").addClass("newClass"); //NEW: TweenMax.to("#yourElement", 1, {className:"+=newClass"}); Or, of course, you could whip together your own functions that make it as simple as feeding in a particular class and it'll fire off that tween for you. Once you get the hang of how the JS stuff works, it can really open a world of possibilities for you in terms of flexibility For the record, I don't generally recommend tweening to class names because there's a slight performance hit on the very first render of that tween (because it has to compare all the styles and isolate the ones that need to change). It's typically better (performance-wise) to specify the properties you want to animate directly in the tween instead, but I totally recognize that some people prefer to chuck everything in CSS for their workflow which is fine too - I just wanted to offer the caveat because I obsess about performance. You'd probably never even notice a difference unless you're animating hundreds of things simultaneously and they all start at the same time using className tweens. Happy tweening!
  13. GreenSock
    Have you tried getBoundingClientRect()? That's a method that's available on any DOM element (not related to Draggable). See https://developer.mozilla.org/en-US/docs/Web/API/Element/getBoundingClientRect If you're looking for the actual x/y transform values, you can get those on the Draggable instance (it has "x" and "y" properties), or using element._gsTransform.x and element._gsTransform.y; Does that answer your question?
  14. GreenSock
    Here's a demo that I whipped together for you that leverages ModifiersPlugin to do the bouncing: http://codepen.io/GreenSock/pen/QGyyyd/?editors=0010 So you can animate x/y to any values you want, way beyond the boundaries, and it'll just modify things on-the-fly to keep x/y inside the ranges you specify and do all the bouncing. All the heavy lifting is done inside that modifier function which you can reuse as much as you want.
  15. GreenSock
    It looks like the problem has to do with the A-Frame library stuff and the fact that it doesn't actually treat the attribute like a true string attribute. If you element.getAttribute("rotation"), you'll get an OBJECT (not a string) that has x, y, and z properties. Furthermore, if you alter those, it apparently doesn't trigger an update in the view. But you could setAttribute() and put together the string like this: http://codepen.io/anon/pen/ENVprL?editors=0010 So in short, this is unrelated to GSAP - it's just an oddity in the way that library is handling attributes. Does that clear things up?
  16. GreenSock
    Hi Philip. There are no "dumb" questions around here - don't worry about that. GSAP can certainly animate to/from class names, but the specific question you're asking sounds much more like a ScrollMagic one than a GSAP one. I'm just not very familiar with ScrollMagic (we didn't author that), but it might be as simple as adding a className tween. Maybe try that and then if you have more ScrollMagic-specific questions, ask the author on github or something. It always helps to have a simple reduced test case too, like in codepen. Happy tweening!
  17. GreenSock
    Sounds like you just need to implement the logic using math, that's all. Sorta like (not real code, and this assumes you start out with them all absolutely positioned with their top/left edges aligned): var tl = new TimelineLite({delay:1}); var gap = 10; //pixels between each var stagger = 0.15; var x = 0; for (var i = 1; i < elements.length; i++) { x += (elements[i-1].offsetWidth + gap) - elements[i].offsetWidth; tl.to(elements[i], 1, {x:x, ease:Power3.easeInOut}, i * stagger); } You could easily tuck that into a function and parameterize it so that you can apply the logic in multiple scenarios.
  18. GreenSock
    Absolutely. There are many, many ways to do this sort of thing, but it's a little difficult for me to answer you without seeing the context you're working in. Do you have a reduced test case in codepen or jsfiddle maybe? Even if it's just tween1 - I want to see how you're structuring things or else I risk giving you another answer like my previous one that I thought addressed your concern but totally didn't because I didn't understand the context or the specific goal. Curious: why are you doing any hit detection at all instead of just animating to the wall and sequencing another tween upon completion, etc.? Also curious: are you familiar with the ModifiersPlugin? http://greensock.com/docs/#/HTML5/GSAP/Plugins/ModifiersPlugin/
  19. GreenSock

    .kill

    GreenSock replied to KerryRuddock's topic in GSAP

    I didn't have time to sift through all the code either, but it certainly smells like a logic issue. I noticed that you've got two tweens set up for each object, one for x and rotation and then the other for y and rotation. So you've got redundant rotation. You've also got both onCompletes pointed at the same function. That function seems to be handling stuff for both x and y. I could be wrong (because I really didn't have much time to dig into everything), but it sure looks like you've got logic issues in there; one call to moveTarget() results in 2 onComplete calls that each call moveTarget() again, thus you'd get exponentially more and more calls happening and potential conflicts. Does that help at all? Like Carl said, an even more reduced test case would certainly help identify things quicker.
  20. GreenSock
    Well, it's applied correctly in the sense that you're calling it on an animation, but the key here is WHEN you call it. In your example, you're just calling it immediately after the tween is created, so there's virtually no point in doing that. You'd want to invalidate() whenever you actually need to clear out the values that were in there from when the tween started running. For example, if your window resizes, you could call invalidate() at that time. That way, on the very next render the tween is going to re-record starting values and the "vw" and "vy" stuff will be based on the size of the window at that point. Make more sense now?
  21. GreenSock
    There are a bunch of ways to approach this. Here's one that uses function-based values: .staggerTo(".element1, .element2, .element3", 1, {x: function(i) { return "+=" + (i * 30); }, ease:Power3.easeInOut}, 0.15, "frame1+=1"); Or use a function that does all the repetitive stuff for you and you just feed in the variables. Does that help?
  22. GreenSock
    There's an invalidate() method that you can call on any tween or timeline that essentially flushes any stored starting values and forces the animation to re-initialize on the very next render. Just beware that, for example, if you have a to() tween that finishes and then you invalidate(), that doesn't change the playhead position nor does it force it back to the original values. To do that, you can just animation.progress(0).invalidate(). Does that help?
  23. GreenSock
    Good question. There are so many choices, all of which have strengths and weaknesses. When you did the spritesheet thing, did you generate it from After Effects or Flash or something like that? Just curious. Strictly speaking, I'd venture to guess that PixiJS is going to deliver better performance overall, though it may be more tricky to debug than SVG. And of course SVG is probably easier to scale and make responsive, but perhaps PixiJS has good options for that too (I don't have much experience with it myself but I hear great things). A spritesheet approach to such a long/complex animation strikes me as...well...very kb-heavy. So many frames, you know? So to make things lighter, it might be better to do it with SVG/PixiJS and animate things with GSAP (using timelines of course, modularizing your code in functions that spit back timelines that can be nested in a parent timeline for ultimate flexibility and maintainability).
  24. GreenSock
    Is this what you're looking for?: http://codepen.io/anon/pen/rWVbar?editors=0010 Notice there's some commented-out code that you can uncomment to see a more advanced effect that's made possible by some tools we'll be releasing soon. There are other ways to do this like with the ModifiersPlugin, so let us know if the simple bounce isn't what you were looking for.
  25. GreenSock
    Answered on the duplicate StackOverflow post: http://stackoverflow.com/questions/40462528/gsap-managing-multiple-tweens-and-timelines-at-once/40482218#40482218
489
490
491
...
916
Page 490 of 916  
×
×
  • Create New...