Jump to content

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

Tahir Ahmed

  • Content Count

  • Joined

  • Last visited

Community Reputation

95 Contributor

About Tahir Ahmed

  • Rank
    Advanced Member
  • Birthday 11/17/1984

Contact Methods

Profile Information

  • Gender
  • Location
  1. Great feedback @GreenSock. I think this feedback and this thread may become my favourite one to point to the next time I am having a debate on this topic with anyone; along-with the why-gsap and kilobyte-conundrum links of course. This thread has addressed a number of great points from all of you. Thanks everyone. And massive thanks, again, for this really important tool that you introduced years ago, that you have put so much effort into it over the years and still are continuously doing so. Two thumbs up.
  2. I think you are looking for an overlapping animation if I understand it correctly. I think you can achieve this in a number of ways but here is what I would propose with slight modifications to your animations timing and the properties that are actually animating but most importantly, utilising position parameter and nested timelines: var mainTimeline = new TimelineMax(); $('.animated').each(function(index){ var tl = new TimelineMax(); tl.from($(this).find('.image'), 0.6, { alpha: 0, y: -20, ease: Power2.easeOut }, 0); tl.from($(this).find('.title'), 0.6, { alpha: 0, y: 10, ease: Powe
  3. If I am not wrong, this is possible using _gsTransform object that GSAP adds to any target object. Take a look at this as an example.
  4. I could be wrong but don't you think that your second `[].forEach()` call should have `.js-button` as its target elements rather than the same `.jq-button`? Does that help?
  5. And of course, you can go really crazy with these ideas Here is an update to the same: jsFiddle. P.S. I wouldn't exactly recommend the approach though as these are all `div` elements so your browser won't really appreciate it If you really are interested in these kind-of "particle" effects, I recommend going down the canvas route. Pixi.JS is pretty amazing at that. You can use it with GSAP of course
  6. Here is a demo using the technique @Jack described: jsFiddle.
  7. Understand about the image dimensions. I am curious though if it did improve any rendering for you, i.e. a solution using an overlaying element of top of an image to reveal it by animating `translateY` over anything else, even if you are unable to utilize it. And sure, do share what you have and I can help as much as I can. Re `yPercent`, I recommend reading the blog about the release of 1.13.1 version of GSAP. This feature has been available for a while now.
  8. Don't really notice much difference here on my Macbook but my guess is the browser is having a hard time render a very large image (5615x2907 pixels) or it could be that you are animating `height` that is causing problems. If animating `height` (which, in many cases, could produce janky animations) is the cause, here is a forked version with a few amendments for you to try out. As I said, I didn't notice any difference for me in the first place so I can't really tell if this forked version will do any good, but give it a try and let me know how it goes.
  9. Hi @jesper.landberg, Without a reduced test case, it is difficult, for me at least, to tell you why your animations don't run smoothly on Safari and what can be done to make them better. Could you make a demo for us that runs your animations smoothly on Chrome and Firefox and doesn't run well on Safari? As for the questions, here are the answers, based on the little understanding I have about the system: I think It depends on use-cases. However I find that its best in most cases to let the engine decide for itself hence `auto`. Link. As of 1.15.0, `force3D` is set to `auto` by default
  10. I think this is happening because there are a number of differences between the logo animation this website has and the codepen version @ThePixelPixie is having, mainly: The number of `companies` elements in the website is 5 but the codepen version @ThePixelPixie has is 4. The number of `company` elements in each of the `companies` elements in website is 15 but in codepen it is only 2 (and in one case, 3). The code in JS is mainly catering for the numbers of `companies` (and `company` element in each of those `companies`) elements and is tightly bound to that. Just to try it out, make duplica
  11. Now that I think about it, @Jack's solution works the best and this situation was a perfect fit for `stagger` methods as he described. I missed that by a mile, how could I do that didn't even cross my mind .
  12. Should be easier to achieve, here is your resulting fiddle. JS: var cloudDrizzle = document.querySelectorAll('#cloudDrizzle2 .climacon_component-stroke_drizzle'); var duration = 1; var firstTimeline = createTimeline(cloudDrizzle[0], duration, 0); var secondTimeline = createTimeline(cloudDrizzle[1], duration, duration * 0.6); var secondTimeline = createTimeline(cloudDrizzle[2], duration, duration * 1.2); function createTimeline(target, duration, delay) { var timeline = new TimelineMax({ repeat: -1, delay: delay }); timeline.fromTo(target, duration, { opacity: 0 }, { bezier
  13. Hi Carl, Thanks a lot for the nice words. I am still learning And thanks a lot for the detailed explanation as well. In fact, I currently use the same technique whenever I have to deal with such situations i.e. create a timeline without delays and another layer of management on top of it all to handle the _pauses_ and yes, usually it means using the `.delayedCall()` method. I can see the reason why this would be just too impractical to bake something like this in the core and thus not worth the effort. Performance (file-size and computations) being the top reason. Far too many sce
  14. Hey @OSUBlake, cannot speak for @ald603 but I am, in general, interested in an idea of skipping `delay` and overall gaps put in a timeline using `position` parameter (e.g. intentionally creating gaps using the `+=` operator in `position`) by having some kind of a fast-forward control over a timeline. I am pretty sure it doesn't exist in GSAP system yet but I can see the benefits of having such a feature, this problem here by @ald603 is a prime example of such a use-case.
  15. I could be wrong but I think you don't need the parts with this `clicked` variable. Not entirely sure why you have them there in the first place but these are the parts enforcing you to click twice in order run the animation so I think the final code should look like: var buttonOne = $('#one'); buttonOne.click(function() { tl1.tweenTo('first', { onComplete: function() { this.timeScale(1); } }).timeScale('7'); }); Hope this helps. P.S. I am also curious in knowing the answer to the 2nd question you posted above i.e. a way to skip pauses defined in a timeline. There are