Jump to content

Search In
  • More options...
Find results that contain...
Find results in...

GreenSock last won the day on July 24 2019

GreenSock had the most liked content!


  • Posts

  • Joined

  • Last visited

  • Days Won


Everything posted by GreenSock

  1. It looks like you just have some numbers wrong, like an extra frame. Try this: TweenMax.to('.character2', .25, {repeat: -1, yoyo: true, repeatDelay: .15, x: -600, ease:SteppedEase.config(2)});
  2. I'm not sure I totally understand the effect you're after, but your code does look like it alternates between things properly. But if your objects are on top of each other, you can just fade the TOP one in and out (no need to do anything to the other one). See what I mean? Here's a demo with your original solution as well as an alternate with them on top of each other: https://codepen.io/GreenSock/pen/ba21de611a64c80765c74e7c03f31415?editors=0010 Does that help at all?
  3. Another article I'd highly recommend is: https://css-tricks.com/writing-smarter-animation-code/ Let us know if things are still fuzzy. We'd be happy to help. Enjoy!
  4. Welcome to the forums, @prabhath. I read your question a few times and I don't understand what you're asking. Do you have a GSAP-specific question we can help with?
  5. Anytime! Thanks for being a Club GreenSock member, @merlin
  6. I'm not quite sure what it's supposed to look like, but perhaps the problem is that you've got TWO paths inside the <clipPath>, but you don't want/need the "#morphTo" in there. In other words, it's using both of those paths for clipping simultaneously. You could just drop the "#morphTo" inside a <defs> or you could feed the string in directly. Either way. Is this more like what you wanted?: https://codepen.io/GreenSock/pen/085ba2d7914407e064c8be254f971af6
  7. Sure, have you tried playing with the "throwResistance" property? That should give you what you need
  8. Glad to hear you got a solution. Unfortunately, that solution isn't at all what I was suggesting, and there seem to be some issues with the theory and math in there but I just don't have the time to troubleshoot it all or deliver a smoothed-out one. This is definitely beyond the scope of the kind of GSAP-specific help we offer in these forums. If you still need some help on a consulting basis, feel free to PM me. Or maybe someone else has time to dig in and craft a solution for ya. Congrats on getting this far, though! I know it's a tricky challenge
  9. Welcome to the forums, @mrrobot993. We'd be happy to help with any GSAP-specific questions here, but we just don't have the resources to analyze a live site and then develop full tutorials explaining how they achieved a particular effect. Was there a GSAP question we could answer for you? Happy tweening!
  10. GreenSock

    Width Calc

    Nice job @Visual-Q! If you want to respect easing, you could just use this.ratio instead of tween.progress(): TweenMax.to('.img-wrapper', 5, { width: 1, modifiers: { width: function() { return ('calc(' + (this.ratio * 100) + '% + ' + this.ratio * 4 + 'rem)'); } }, ease:Power4.easeOut }); ?
  11. Good catch, @PointC. And yes, @knalle, I just added a note to the docs. Cheers!
  12. I like the SteppedEase approach, but if you really need to limit the entire update of a tween to a certain FPS, you could do something like this: https://codepen.io/GreenSock/pen/2b4554531b20a9876dac381beea741e2 Here's the utility function I whipped together, so you can just pass a tween/timeline instance in, along with the desired FPS, and it'll do it all for you: function throttleAnimation(animation, fps) { var ticker = TweenLite.ticker, time = ticker.time, frameLength = 1 / fps, frame = 0, update = function() { var newTime = ticker.time - time, newFrame = ~~(newTime / frameLength); if (frame !== newFrame) { frame = newFrame; animation.time(newTime); if (animation.progress() === 1) { ticker.removeEventListener("tick", update); } } }; animation.pause(); ticker.addEventListener("tick", update); } Does that help?
  13. Are you trying to make the black dot go to each colored dot in a linear or a curved path? I'm trying to figure out why you're using BezierPlugin. First, a few notes about why your current codepen wasn't working: It doesn't make sense to "correlate" the progress in there. correlating is for positional values like x, y, z or top, left where the measurements must factor in them all. Like the distance between two points is the diagonal between the x,y and x,y points. So don't add "progress" in that list. You mixed x, y, and progress in every object in the bezier, thus you were literally telling GSAP to try setting a "progress" value on the element itself (along with x and y). Obviously the DOM element doesn't have a "progress" value, so that won't work Again, you were telling GSAP to set "x" and "y" properties of a timeline (along with progress). Timelines don't have x or y properties, so that can't work. The progress value was animating correctly through each of those values, but they're weighted. In other words, think of an array of x,y points, some of which are very close together and some of which are far apart, and you ask BezierPlugin to animate an object along a path through those points - typically you wouldn't want it to split up the time EQUALLY between each point because that'd make it go really slow between the close points, and really fast between the far-apart points. See what I mean? So BeizerPlugin does a bunch of work to smooth all that out for you. Therefore, when you animated through the progress values, the same thing happened which is what made it SEEM linear. It was doing its job It sounds like you were expecting it to split the time equally. If I understand your goal correctly (and I probably don't), it's definitely a non-trivial task but it's doable. You could plot a path (like an SVG) using the progress value and maps it to the proportional spot on the timeline, smooth it (to prevent jerky changes in speed) and feed that into a CustomEase. It's definitely beyond the scope of the free help we offer in these forums. If you still need help and would like to chat about hiring us on a consulting basis to help knock this out, feel free to PM me. Or perhaps someone else here wants to chime in with an answer (which would be great). Good luck with the project!
  14. Excellent. Glad to hear you figured out a solution. I'd still be happy to take a peek if you've got a reduced test case. Maybe I made a mistake somewhere in my code and I just don't see it right now. ? Thanks for being a Club GreenSock member!
  15. Hm, is there any chance you could provide a reduced test case in codepen or something? I'd love to see what's going on in-context. No, it doesn't default to any particular direction at all. It just tweens the values normally. So, for example, if you're tweening from rotation:20 to rotation:50, it'd go one direction, but if you're going from rotation:20 to rotation:-10, it'd go the other direction. Again, I'd love to help once I can see a demo. It's just really tough to troubleshoot blind
  16. Wow, that's pretty unusual for someone to be feeding in matrix values like that. The problem is that internally those matrices must be decomposed into the various parts like x, y, scaleX, scaleY, rotation, skewX, etc. so that they can be interpolated properly. If you've ever tried tweening the values inside of a matrix, you'll see how weird it looks whenever rotation is involved. For directional rotation to be used, obviously you need to actually define a rotation value (not a matrix). So you need a way of busting apart that matrix. If you don't have your own method for doing that (it can get pretty complex), you could craft a reusable function that piggy-backs on GSAP's capabilities like this: //take a matrix, decompose it into each piece (x, y, scaleX, rotation, etc.) and make sure that rotation has the "_short" suffix to make it go in the shortest direction. The third parameter is optional - it's where you'd define all the other vars values like ease and whatever else you'd normally feed into your tween. function transformVars(element, matrix, vars) { vars = vars || {}; var tween = TweenLite.to(element, 1, {transform:matrix}).progress(1), t = tween.target._gsTransform, props = {x:0, y:0, scaleX:1, scaleY:1, rotation:0, skewX:0}, p; for (p in props) { vars[p] = t[p]; } vars.rotation += "_short"; tween.progress(0).kill(); return vars; } //usage: TweenMax.to(element, 2, transformVars(element, "matrix(-.45127661, -.10921767, -.09499633, .41718125, -40.591503, 187.74884)", {ease:Power2.easeInOut})); Does that help?
  17. Ha. Yeah, I'm so used to associating React with animating regular DOM elements but you're right - if it's Pixi then no CSSPlugin is needed. @mogwai can you provide a reduced test case so we can take a peek?
  18. Welcome to the forums, @mogwai. We'd love to help, but just seeing a snippet of code doesn't really help - we need to see the issue in context. Would you please provide a reduced test case in codepen or stackblitz or something like that? It kinda sounds like maybe you have something else controlling that animation rather than just GSAP (like something is fighting with GSAP)? Totally a guess. You seem to have defined the ease correctly, though I don't see any imports nor do I see if you're correctly loading CSSPlugin (which would be necessary to animate CSS-related properties).
  19. I'm a little fuzzy on what you're asking too, but @PointC is correct - timeScale() merely affects the way that its parent timeline plays it. If you want to calculate its duration in a way that factors in timeScale, you'd simply do: var scaledDuration = animation.duration() / animation.timeScale();
  20. Hi @parserError. Welcome to the forums. I don't understand your question. Can you clarify? Is it a GSAP-specific question? I'm not familiar with "wavify()".
  21. You don't actually want it to be contingent on exactly 1px away, do you? Like...what if it's 0.5px away, what progress (decimal) would you expect? My guess is that you'd want something like this: function getProgress(x) { return (x % 200) / 200; } Just feed in an x value and it'll give you a 0-1 progress amount. Does that help?
  22. Hi @chwzr. Sorry, but these forums are for GSAP-related questions. Pop.svg isn't a GreenSock product. I'd recommend that you reach out to its author if you have questions regarding its implementation. But if you have any GSAP-specific questions, we'd love to help!
  23. I'm not sure I understand your question - when you say "switch to another tab" do you mean the circles, part1, part2, and part3? Or do you literally mean another tab of the browser? I definitely see a problem in your code: tweenLi[i].addEventListener('click',tweenAni()); When you put "()" after the function reference, it tells the browser to call that function immediately, so you're putting the RESULT of that function (whatever is returned) as the event listener which I'm sure isn't what you meant to do. Your tweenAni() function doesn't even return anything. It just creates and executes a timeline immediately. If your goal was to call tweenAni() whenever someone clicks on one of the elements in the tweenLi[] list, remove the "()" so you're just passing the function reference in. But again, I'm not really sure what you're trying to accomplish so that may not solve all the problems.
  24. Happy to help, @SammyC123! And yeah, I sometimes overcomplicate things myself. It happens to all of us
  25. Nah, you shouldn't need to tween the bounds - just tween the position of the target like this: https://codepen.io/GreenSock/pen/d96c86c16fe45612bb019207c1eb3b7b?editors=0010 Does that help?