Leaderboard

Look at pointerX and pointerY in the docs. That should give you the correct values. function onClick() { var x = this.pointerX; var y = this.pointerY; ... }

Hello @OODNX and Welcome to the GreenSock Forum! As a rule of thumb, Its best to not use display:none on SVG child elements, and just set the SVG child elements visibility attribute or use the CSS property visibility property. Since the spec dictates that any SVG child element that uses CSS display none will cause that element to not be created in the render tree. So that will make sure you follow the SVG spec and have cross browser compatibility, when working with SVG. SVG display: https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/display SVG visibility attribute: https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/visibility CSS visibility property: https://developer.mozilla.org/en-US/docs/Web/CSS/visibility Happy Tweening!

Hi @kailash I think a better approach might be using the technique @PointC shows here. It doesn't require using the same color as the background.

Wow, thanks for your quick response Jack, that's a really simple fix that would've taken me hours of trial and error. Greensock Rocks!

I think Sahil's way is quite good. When you get new values, rebuild all the animations. For performance and optimization reasons tweens record starting and ending values so that they don't have to keep checking on repeats / restarts. It would probably be good to throttle or debounce the resize event as they can fire many times a second. In the real world I don't think users spend a lot of time resizing their browser windows when they are viewing a site. Below is a technique I haven't tried before and its a bit crude. Basically it taps into the ModifiersPlugin which allows you to hijack the values a tween was going to set and lets you modify them. You can run the "normal" values through any function or operation you like. In the demo below I multiply the progress() of the tween by the dynamic "end value" which allows you to change the end value mid-tween by clicking the button. Read more about ModifiersPlugin here: https://greensock.com/1-19-0/ I don't think is the best solution for everything... but it gets the job done in this case.

Here is the demo. You should be able to refactor it and make it reusable on multiple containers. Also, some calculations can be done differently but this should work for you.

I followed all those steps and tested on iOS for you. I saw no difference when using Draggable.js vs. Draggable.min.js. I'm not sure what's causing the difference on your end. If you need any further assistance, please provide a reduced test case that clearly illustrates the issue. As for the long/short press, perhaps you could simply use the onClick for the short tap and the onDrag would only fire if they start dragging, thus it's the press-and-drag you're looking for. In case it's helpful, there's also a timeSinceDrag() method.

Hi @OSUblake Thank you ! They contacted me after seeing my initial bike animation ( the one on top of this topic ). I understand your theory and it seems like a good idea ! Feel free to reuse my SVG as much as you want ! I don't feel like I'm able to contribute enough for the canvas part because of my current skill on this technology. So if I can help by editing the SVG with illustrator tell me. I remember you suggested reusing as much as possible the same paths. I tried that a bit but gave up half way in this new SVG because this kind of design was new to me and the delay was short. Would it help if I send you an edited SVG using a set of path that only differs in scale / position / rotation ( with a list of the "template" paths ) ? Let me know, I'd love to help ! .

Hi @alaric Nice job on Codrops article. I'm curious, did they ask you to do that, or do you have to ask them if you want to do an article? I'm still kind of curious to see how it would perform using canvas. The problem with SVG is that is scalable. That means everything needs to be recalculated when it changes. For every path, it has to calculate the geometry of the fill, the geometry of the stroke, and then draw those shapes on a bitmap so it can be rendered to the screen. But in your animation, the stroke is the only thing that is actually changing. The fill doesn't. You're just changing its opacity, which doesn't affect its geometry. That's a huge optimization that could be made with canvas. You can convert the fill to a bitmap, and keep reusing that instead of drawing a new path for the fill on every animation frame. In theory, that will reduce the amount of time the browser spends on doing path operations in half. If I get some free time, I might mess with your new SVG. The markup looks really clean, which should make it pretty easy to convert into a canvas animation.

Wow Sahil, that looks great! Thanks a lot. I didn't expect so much help from you guys. Much appreciate

Hi, In fact its working I don't know what went wrong with my first tests. Regards,

Great, thanks for doing that. And again, it's not a huge deal. I appreciate you being so responsive. Congrats again on the article.

Hi @GreenSock, I totally understand. I have set the repo as pivate in my Git account and notified Codrops about this issue. I'll be more careful now and thank you for your understanding !

@Sahil THANK YOU! Those are all very helpful comments. I really appreciate it.

thanks, it was headache. After seeing Blake's jQuery Plugin School certificate, I am looking forward to getting my GSAP Draggable School certificate.

Explains why it wasn't playing in Firefox.

Cool animation! I believe the issue has to do with the fact that Microsoft browsers won't accurately report getBBox() on an SVG element that's display:none, thus the transformOrigin isn't able to get set properly. So all you need to do is flip-flop these two lines: TweenMax.set([usabox, japanbox, ukbox], {display:"none"}) TweenMax.set([germanybox, usabox, japanbox, ukbox], {rotation:0}); The way it's shown above, you're setting display:none and then a transform property, so Microsoft inaccurately reports the bounds. See what I mean? Also, I'd strongly recommend updating to the latest version of GSAP, 1.20.3 as of now. Your codepen is using the "latest" which ironically is significantly out of date because CDNJS has refused to support "latest" for quite some time. We pleaded with them, but they just won't do it. Frustrating, I know. Happy tweening!

Here is the demo with timeline, for future queries please post a codepen demo, that way it is a lot easier to answer. Also, in some cases it makes a lot more sense to animate classes, in other cases you can use this method.

Sure, you can snag that value from the tween instance's "ratio" property. Does that help?

Hi @erikb What are you trying to do? The eased value is based on the progress of the tween. It doesn't work the other way around. Look at an Elastic ease. Not only does it go through the same value more than once, but it goes beyond 100% several times. https://greensock.com/docs/Easing/Elastic

Hello @RuizBox and welcome to the GreenSock forum! Here is a link to the DrawSVG Docs so you have a reference on what is required to use DrawSVG https://greensock.com/docs/Plugins/DrawSVGPlugin DrawSVGPlugin allows you to progressively reveal (or hide) the stroke of an SVG <path>, <line>, <polyline>, <polygon>, <rect>, or <ellipse> and you can even animate outward from the center of the stroke (or any position/segment). It does this by controlling the stroke-dashoffset and stroke-dasharray CSS properties. Hopefully this helps! Happy Tweening

Have you ever wanted to bring the 3RD dimension into your project with the DrawSVG plugin? Using a series of masks we can simulate an SVG stroked path navigating around or through a subject in a photo. This path can be solid, dashed, dotted or whatever you like. My new demo uses some things from my post above about animating dashed strokes with masks, but goes a bit further. Get wrapped up in the swirling 3D lines of the DrawSVG plugin: http://codepen.io/PointC/full/ZWEqdK/ If you want to use this technique, here’s a bit of info: Start with the photo you’re using at the maximum size you think you’ll need. (Note: You can responsively swap to smaller versions as long as you maintain the same aspect ratio.) Create a new AI file the exact same size as you biggest photo. Import the photo for use as the background while designing your SVG. (Be sure to also create a plain rectangle that’s the same size as the SVG so everything lines up at export time) Draw the stroke that will be wrapping around/through the subject to your liking. Duplicate that path and make it #fff – this copy will be the mask. Unlike my earlier post where I mentioned making the mask path wider than the original, this time it needs to be the exact width as the underlying path. If it’s wider, you’ll inadvertently be showing extra parts of the original path at perpendicular intersections. (Note: making a duplicate path for a mask reveal is only necessary if you want to use dashed strokes. If you’re using solid strokes only, you can simply animate them directly with the DrawSVG plugin.) At all points where the stroke should be going behind the subject, draw a polygon over the subject with a color of #000. All these polys will be a part of your SVG mask along with the stroke mask that will animate. The polygons will be static but will scale perfectly. For my demo, I used three separate strokes to create a simple tube effect as it draws and you can see a bit of the perpendicular intersection reveal problem if you watch for it. It’s not too bad, but something to keep in mind. As mentioned above, if you’re using a solid stroke and don’t need dashes, no mask path will be necessary and this isn’t going to be an issue for you. You would just need your subject masking polygons. Finally, I put the image into a containing div and let the image drive the size of it. Place your SVG into the div with absolute positioning and a width of 100% so it can scale along with the image and containing div. All that’s left after that is to control the mask reveal and animate any changes in the stroke that you like. Note: the demo uses the DrawSVG plugin which is a Club GreenSock perk at the Simply Green membership level. I highly recommend it. Happy tweening everyone.

Hi JLernDesign in addition , if you background color is a solid color you can go this way too : http://codepen.io/MAW/pen/zGXvWW