Sahil last won the day on March 13

Sahil had the most liked content!


  • Content count

  • Joined

  • Last visited

  • Days Won


Sahil last won the day on March 13

Sahil had the most liked content!

Community Reputation

1,304 Superhero


About Sahil

  • Rank
    Advanced Member

Profile Information

  • Gender
    Not Telling

Recent Profile Visitors

4,395 profile views
  1. animating css transform stutters on first execution

    I notice couple of problems, 1. You are using 3 year old version of TweenMax. 2. You are using will-change everywhere, which can be counter productive because it puts additional work load on GPU memory if I am not mistaken. 3. You were using Tween but updating your scale using onUpdate which is unnecessary as you can directly tween your element. See if following demos help,
  2. Programmatic SVG not rendering correctly

    SVG elements are created differently than html elements. Using vanilla js you create html elemnts using, var elem = document.createElement('div'); While you create svg you use following syntax, var elem = document.createElementNS("", "text"); I did quick search to see if jQuery supports creating svg elements but didn't find anything. Here is how you can create your element while still using jQuery. Also, from wherever you forked this demo, it is using really old version of Draggable.
  3. Here is partial demo of how you can achieve it. I have added new code at the end of the previous code so you can see what I have changed. To understand what I have done and how you can further improve this slider to get your complete effect, you must study the previous code. If you want to do custom slider etc things you will have to dive in completely and understand math behind it. To further update it you will need to redo the same "mapping" for scrubber when you move slides, you will also have to update both scrubber and slider on resize or update certain values like handleWidth etc. So ya there is a lot of going on to achieve this effect and it will be time consuming to do everything, but this demo should give you complete idea.
  4. TimelineLite to mp4

    Well ya that will happen for sure, depending on what resolution you are capturing and how your server performs. You can get around it pretty easily by capturing one frame at a time. Go through the @OSUblake's demo in thread I linked, you will get the idea of what I am talking about.
  5. When I was creating demo for this thread, I asked myself few times 'should I spend so much time creating this demo?'. Glad I did, it turned out to be worth a lot more than what I was expecting. Thanks Blake.
  6. Oh I saw that demo on codepen, it is really impressive. I was wondering if it can be used to perform hit tests on objects with odd shapes but yet to go through the code.
  7. Ya shader is something that I was planning to look into but wanted to start with 2d canvas before jumping to advanced stuff. I have been through following article about optimizing canvas but it feels like more can be done, so looking forward to your post. Oh BTW, I was just kidding. I wanted every regular member to think I am talking about them.
  8. TimelineLite to mp4

    @yoannes You should look into following thread, I managed to use CCapture demo to capture canvas frames, I have never used headless browser so not sure how it will perform. But you would be better with exporting all screenshots as PNG or JPG and converting them using FFMPEG. Unless of course if headless browser performs better than usual browser. Also you would be able to capture video frames and then svg on top of that, but not sure how you can capture html. A quick search landed me on which might be what you are looking for.
  9. allDone on two separate SplitText elements

    @sensenel What you are doing is correct and it will work for all SplitText objects as long as you are passing correct instance as parameter. If you have 40-50 SplitText objects then you can go through the trouble of creating function that will take all values like target element, duration, vars, basically everything as parameters and construct your tweens. Otherwise keep it simple as you are doing at the moment.
  10. Translation with big images on tiny computer

    @Tasty Sites Both x and xPercent animate transform and you wouldn't see performance difference while using either, they both take advantage of GPU. @benoit That seems like problem is you are animating a really large image on weak GPU, I think best way to go would be to use smaller images. You should test some of the demos on your mobile and on your machine so you will get idea about how much workload your machine is able to take. Looking at your screenshot it looks like your machine is struggling to render things properly.
  11. ModifiersPlugin not working on scale?

    No need for extra pushups now, beta version performs slightly(by a frame or two) better than stable version. Thanks Jack.
  12. ModifiersPlugin not working on scale?

    Thanks Jack. Taking full advantage of my performance test demo I can see about 5-6 frame drop on mobile device with beta version. I wonder what @OSUblake will say about it. For 10 elements it doesn't make any difference and runs at 60FPS, for 50 elements performance drops with beta. Thanks for the update, it simplifies the code. But I am curious about your opinion on performance difference, do you think it is significant or I am overthinking?
  13. Moving an element along a custom path

    You can do that by using MorphSVGPlugin, which you will need to convert path data into bezier. Then you can move your element along the path. Check animate along the path section in the end of docs
  14. Removing the wrapper (waypoint)

    That's new, I wasn't aware of having such reputation.
  15. target random DOM elements properly

    @beau_dev So are you naming your first kid as Craig or Carl? Or PointC?