Jump to content

All Activity

This stream auto-updates     

  1. Past hour
  2. Good catch, @PointC. And yes, @knalle, I just added a note to the docs. Cheers!
  3. Yesterday
  4. Ah yes, thatnk you. You are right I missed that! It happened with SVGOMG that optimized it "too much". A notice on this in the docs is better if the alternative is additional checks in convertToPath(), that has a negative impact on speed
  5. If you only specify the rx (or ry) attribute, the browser assumes the missing value is equal to the one you specified. I don't think I've ever used the convertToPath() method with a missing attribute like that so I've never seen that happen. @GreenSock should be along later with additional details. For now if you specify both the rx and ry attributes you should see the desired output. Happy tweening.
  6. I just noticed that a <rect> with the rx attribute is not converted to a <path> with the same appearance. <rect x="90" y="115" width="228" height="206" rx="23"/> Well, it depends on how you look at it. I guess it is intended behavior from GSAP but not what I expected. Perhaps it should be mentioned in the docs - also if other "basic" SVG shapes attributes are ignored.
  7. 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?
  8. Wow, never occured to me to pass an ease to cycle. Could do a lot of really cool stuff with that. As @PointC demonstrated the onUpdate isn't needed unless of course you intend to do more with the callback function.
  9. I'd go with a steppedEase. You can even use a stagger and cycle if you like. https://codepen.io/PointC/pen/qzNZjd Happy tweening.
  10. @Visual-Q This is definitely a great idea, but it appears that using stepped easing doesn't effect the onUpdate rate. I'm guessing it might be best to throttle inside my function as @elegantseagulls mentioned.
  11. @Filip Winiarski Thanks for posting! You could post a minimal demo on CodePen to exemplify you're approach if you'd like. I think it'd be more helpful for future onlookers.
  12. @Fakebook, I think your best bet would be to add a throttle function inside your `update` function (rather than trying to throttle GSAP's built in onUpdate or tick). If you're just going for the visual effect, @Visual-Q's solution is money!
  13. Hello and welcome. This question isn't very related to GSAP, but we'll try to help where we can. You're passing numberCol1 into every renderNumber function call, so it will always animate up to the value of numberCol1, which in the demo is 11 (it will go to 10 since it indexes at 0). I don't understand what data you'll be getting - why is the first entry different than the later entries? Will it always be in this format? Are you wanting all of the numbers to animate to their value with the same timing? How are you supposed to determine the index? Is it related to the number of entries (in this case 6)?
  14. Note sure about whether you can throttle a callback in that way, but you could probably make your tween behave the way you want with stepped Ease. https://greensock.com/docs/Easing/SteppedEase
  15. Hey, I've recently had to implement scroll with momentum/inertia. It's actually incredible simple: 1) animate scroll with basic linear tween with short duration (eg. .15 s) - let it be tween A 2) create second tween with easeOut ease and way longer duration (eg. 1 second)- let it be tween B 3) when user scrolls, use tween A - basic scroll movement 4) whenever user stops scrolling launch tween B - in my case it was a special zone (mouseover), but you can measure time from the last event and decide if user has stopped scrolling 5) whole magic is how to make smooth transition between both tweens - I made a timer measuring current speed of a scroll (delta of scrollX in 10ms) 6) use the delta result for the scrollTo amount value in tween B Result (cuts a little bit cuz of QuickTime murdering my old mac during a recording): https://www.dropbox.com/s/lbrpulht25vl0y6/tween.mp4?dl=0 It's that simple!
  16. Hello I am trying to animate numbers which I will get from an API while rendering it into viewport. I have tried to do so but in my case all the instance of numbers are getting updated but I want each number should be updated upto the value I have got from API. How can I achieve this? Here is what I have tried. https://codepen.io/patrickjane/pen/agNePM Thank You!
  17. I was curious if can set the rate that a specific tween fires onUpdate. Basically, I want to simulate a lower frame rate for a tween that is using onUpdate. I've seen that the TweenLite.ticker.fps(10) could work, but this seems to control the rate at all the tweens, and not just one specific tween. TweenMax.to("#lowFps", 3, { onUpdate: () => animate() }) In my Codepen example, I was hoping to have the top Tween smooth, and bottom one look like it's low fps. However, changing the ticker of course effects both.
  18. 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!
  19. 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!
  20. Last week
  21. hi @WD40andTape, Just a few suggestions on the aspect speed https://codepen.io/osublake/pen/XXbLer https://codepen.io/mikeK/pen/gyYWEe https://codepen.io/osublake/pen/aEbvWX Kind regards Mikel
  22. To give a quick summary, I want to be able to set the progress/time at which a bezier path will hit each anchor point while keeping both the path and speed/progress smooth, i.e.: var bezier_path = [ {x:0, y:0, progress:0}, {x:0, y:80, progress:0.1}, {x:80, y:80, progress:0.5}, {x:80, y:0, progress:0.6}, {x:0, y:0, progress:1} ]; Essentially what I'm trying to do is the same as @danehansenfrom 2013 if it gives you any inspiration: As you can see in the CodePen, the main method I've tried is correlating the x, y, and progress properties of a bezier tween. The x and y properties tween the moving element and the progress property tweens the parent timeline. Unfortunately it appears that including x and y values in the timeline tween breaks the tween. Hence, I've played with BezierPlugin.bezierThrough to calculate the correlated bezier and then seperate the object properties out for the element and timeline tweens. Unfortunately, TimelineMax.to() with bezier:{} doesn't accept this form of input. I've thought about using CustomEases but unless I know at at what time/progress a bezier anchor point will be reached this is not possible.
  23. Hi @Daniel Hult, Welcome to the forum and thanks for joining Club GreenSock. ScrollMagic isn't a GreenSock product, but I'll answer this for you. You're pinning the .trigger2 div which is a child of the middle section. If you want the next section to wait for the pin, you need to pin the parent section of trigger2. https://codepen.io/PointC/pen/jjqqLX ScrollMagic also has a support area here: https://github.com/janpaepke/ScrollMagic/issues And premium support here: https://support.scrollmagic.io/ Happy tweening and welcome aboard.
  24. Hi! How do I prevent the text at the bottom from overlapping the previous section with the setPin? I thought setPin would stick the current section and not allow other content to scroll over it.
  25. Hi @Gasparo, Maybe this post will help: Using Greensock and other External Scripts in WordPress Have a nice sunday. Mikel
  26. Hello, and thank you so much for help, it's awesome! Do you have any idea how to make the other part with this inscription? How can I add it to a page in Wordpress later?
  27. Hey Jack. Thank you SO much for your help. Between your progress idea coupled with the _gsTransform nugget I created an external matrix converter for my purposes. Since I have to handle and modify the matrices between applications anyway it works well for my needs and there is no conversion delay. Seems the problem with my attempted implementation of your function above was with the reference to var tween, in case anybody else comes down this path. It was a brilliant piece of code. I didn't troubleshoot any further to root out my issue with it. And Saturday support is WAY unexpected - you guys rock.
  1. Load more activity
  • Newsletter

    Want to keep up to date with all our latest news and information?
    Sign Up