Sahil

@shubich You will need to calculate and save percentage to variables every time slider is moved so you can recalculate them on resize. A better way would to create everything as object so even if you end up using more then one slider you won't have to code everything again. Plus using objects will make it easy for you to organize properties. Not sure what your code does, I think you are confusing it with @OSUblake's approach of setting bounds. When you drag something, the left property doesn't animate. Draggable changes x/y translate of the target element. So you will need to use this.x to retrieve x translate inside the onDrag event callback. Then you can use that value to calculate percentage and on resize you can calculate new position of slider handles. Does that help?

I read it couple of times, but not sure what you are trying to do. Check the discussion in following similar thread, Animating 100 elements will be overkill, you will probably be better using canvas.

If you mean you want the draggable to snap with mouse whenever you click, following demo will help you. I am using onPress event instead of onClick because to click you need to lift mouse. It also snaps at every 90 degrees but you can remove that logic or change it. if you want to use throwProps plugin then check demo in following thread, For explanation about this entire effect, check comments in demo from following thread,

@faderfrost ya it's useful to know how to hand code SVGs as sometimes you can fix/change minor things just from code or save yourself from going through the trouble of using illustrator for simple shapes. Check following thread for SVG gotchas Also check these two posts from @PointC You will find many helpful posts and demos from him in general. Also I would recommend checking out the YouTube channel for some quick starters and helpful tips. https://www.youtube.com/user/GreenSockLearning

First example, I hand coded SVG. Just to be sure that I keep things in sequence, sometimes illustrator can do unpredictable things. Second example I did that with Illustrator, while creating the end paths illustrator changed them to polygons. So using illustrator can give you unpredictable output which will make it hard to animate stuff like my first example. Following article shows how you can hand code SVG, https://webdesign.tutsplus.com/tutorials/how-to-hand-code-svg--cms-30368 For more advanced stuff you need to visit to W3 docs, or you can google for any other article. https://www.w3.org/TR/SVG/paths.html#DAttribute Your second example looks complicated to achieve without MorphSVGPlugin, most challenging part is creating circle using curves and then be able to convert those curves into straight lines. In my opinion, it will be worth going club membership as it seems really necessary for your project.

In your example you are trying to get 'content' attribute but I think you are trying to retrieve text of your li tags. You can do that using text method of jQuery. To use it to Tween, you need additional class to your tabs, like contentOne, contentTwo. Though your example is way too complex, you can simplify it as follows,

@PointC Here is MorphSVGPlugin version with small personal touch, the lines translate a bit before snapping.

@PointC ya certainly morph will be tricky but I think it's doable in two steps just like my demo. ya I will set profile pic there.

Well ya, easiest way to go about it would to use MorphSVGPlugin, which won't be overkill at all unless of course you overuse it throughout the page. You can do that manually too but it is going to be time consuming to figure out how every effect should play out. GSAP animates any numbers or numbers contained within a string. So you can animate your paths by passing string of ending path. Downside to this approach is, GSAP does bunch of calculations to facilitate you to use complex paths and morph them into each other. If you try to do it manually, you will need make sure that your path is identical with only changing thing to be numbers. Your line, curve, arc should be in same sequence in both start and end path. If you can't keep the same sequence then you will need the MorphSVGPlugin. To save file size, you can use TweenLite but you will need few other plugins to make this effect work. 1. CSSPlugin to animate scale of the middle line. 2. AttrPlugin to animate attribute 3. EasePack plugin so you can use complex easing effects 4. CustomEase plugin to be able to use custom ease, as the easing effect that you have used isn't simple elastic ease. You will need to use customEase for it. 5. Finally you will need the TimelineLite as well to be able to simplify editing and to organize complex animations into single timeline. If you use TweenMax then you will only need customEase plugin as rest files will be included with it. If you don't want to use customEase then you can resort to using Back ease which will give you similar effect with minor compromise.

@EugeneA I gave it a try for 5-10 minutes, my quick feedback is 1. It seems like a useful tool with plenty of options to work with, though yet to try everything. 2. User interface while interacting with objects is sort of unnatural with colorful handles. I think people will find it more useful if you use icons showing what each handle does. 3. If transform origin is changed, the resize handles start behaving unnaturally, which is hard part to work around but anybody using visual tool will expect it to work like adobe resize handles work. 4. Overall the interface seems like simple and user friendly. 5. Isn't there option to export mp4 instead of avi? @cartimundi Just saw your question, this tool exports animation as gif or video, might be what you are looking for.

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,

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("http://www.w3.org/2000/svg", "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.

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.

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.

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.

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.

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. https://developer.mozilla.org/en-US/docs/Web/API/Canvas_API/Tutorial/Optimizing_canvas Oh BTW, I was just kidding. I wanted every regular member to think I am talking about them.

@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 https://html2canvas.hertzen.com/ which might be what you are looking for.

@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.

@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.

No need for extra pushups now, beta version performs slightly(by a frame or two) better than stable version. Thanks Jack.

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?

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 https://greensock.com/docs/Plugins/MorphSVGPlugin

That's new, I wasn't aware of having such reputation.

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