Jean-Baptiste Janot

Well, I found the solution... You have to use gsap.killTweensOf(target); and that will do the trick. Here is what it could look like : draggable.endDrag(event); gsap.killTweensOf($scroller); draggable.update(); I can delete the post or just leave it for maybe future reference? Have a nice day everyone.

Hi everyone, Thanks again for the amazing tools, I am a long term user now and still amazed everyday by the gsap platform ♥️ I am trying to completely stop the dragging and tweens of a Draggable instance when clicking on a button in order to move the dragged item programmatically and prevent jumps. I use the endDrag function, but when the draggable instance is configured to use inertia and snaps, it always complete the snap first no matter what. How can I be sure that every tween is stopped when using endDrag(), even the inertia related ones? I can create a codepen if it is not clear enough. Thank you for your help.

Hi all, Obviously javascript is less and less a requirement with some interactions widgets, like a slider. For example, I was using javascript to hide and show navigation panels on mobile, until I figured out there was no drawbacks doing it with a checkbox and css transitions : no regrets ! That said, it is more a matter of complexity you need to achieve. A super simple css slider might be enough using only css, but might not if you need infinite looping, or callback events, or more complex transitions or whatever... Anyway, going back to the subject of migrating from jquery to vanilla js : youmightnotneedjquery.com is indeed a good starting place. Although it will still need a port to a vanilla plugin architecture too (like this one ?). Still, I'm not sure I'll have time to do it, but I will obviously keep it in mind. Have a nice day guys !

Hi @violacase Thanks for the feedback. I work almost exclusively with jQuery, and do not have the need to update the code in order to remove the dependancie, and to be honest not the time either. However, do not hesitate to edit the code and propose a pull request, I would study it for a potential merge. Thanks again. Have a nice day!

Hi Vitaly, Thanks for your feedback. I don't know if you still needs help on this one. The best solution is to listen to onMoveStart. It can be passed as a function in the slider parameters, or you can listen to the jquery event extra:slider:moveStart. Here is an example using it, with an automatic loader : http://codepen.io/extralagence/pen/xZYmev Have a nice day !

Hi Afrowave, I am glad you found some interests in using the slider ! I updated your Codepen to make it work. Basically, it is a matter of CSS : adding a white background to the list items prevent this intended behaviour. I added a css reset to set margins to zero. http://codepen.io/extralagence/pen/ZWPdmR You can also have a look at this codepens collection of different usages of the slider, it might help you : http://codepen.io/collection/nrBLVr/ The dedicated website has got a few different examples too : http://slider.extralagence.com/demos/ And there is also a full documentation of the parameters and events available here : http://slider.extralagence.com/documentation/ I hope this helps Bye ! EDIT : I removed the slider js and css codes from the pen, and added them as external ressources. It will help you to clearly see the specific code only.

Hi ! Just wanted to inform you that v1.3 of Extra Slider has been released. The drag mechanics has been updated, and is smoother now. Please, have a look and feel free to leave a comment here Website : slider.extralagence.com Documentation : slider.extralagence.com/documentation/ GitHub : github.com/extralagence/extra.slider/releases/tag/1.3 Cheers !

Hi Jack, Thank you for your reply. Unfortunately, no, it's not a Firefox issue, but definitely a global problem with getTotalLength(). I guess paths need to be as simple as possible. If you combine multiple paths (compound path in illustrator), then it returns wrong lengths. This is annoying, but I guess nothing can be done, except spending quite a lot of time redrawing as simply as possible the svgs, and avoiding mixing paths. Thank for your answer, and of course for this super handy tool !

Hi Michael, I tried to log getTotalLength() for each shapes too, and indeed it seems to be a problem with the shape rather than with Greensock. Well, I guess I need to work on my svg files since I doubt it is a Greensock's issue. Thanks for your help, I'll be back

Hi, After 3 hours testing your amazing new plugin, DrawSVG, I may have found a little bug... As you can see here : http://codepen.io/anon/pen/emJNGR the shape's lengths are not correctly detected. The second and third icons are fully drawn before the end of the tween. Any clue on a way of solving it ? Thanks for your help.

It's awesome, as I expected. I have the perfect project to start using it right now. Thank you guys, you do wonders.

Thanks Carl, can't wait to see what you guys are working on. By the way, I have tested it on iOS 8, macOS Safari, IE11, Chrome and Firefox, and it works everywhere. So, the TL;DR of the topic is stop using opacity, and go for fillOpacity or strokeOpacity. Have a nice day everyone.

Of course that helps Thanks again Jonathan !

Hi ! If using "auto" or "true", what if the browser can't handle 3D ? Does it keep a 2D tween, or does it try to use a 3D tween anyway ? Is it on our hand to test for it ? "auto" by default seems great by the way.

Hi Diaco.AW ! Well... I though I had tested it but it seems not because it works like a charm ! No need to set the var before, and I just discovered that you can apply it to a <g></g>, and it works for the children. Wow, just perfect. I'll test it on ipad tomorrow to see if it works there too. Anyway, thanks a lot ! PS : As I am passing by, any idea if an extension that could do the same job as snap.svg for morphing between shapes is on the rails ? That would be awesome. TweenMax already do 90% of snapsvg's job, the only missing feature is this shape morphing... Have a nice day guys !

Hi Jonathan, Thank you for your help. I'm sorry, I was not very precise while describing the problem. My tests were on Firefox running on windows 7 64 bits, Google Chrome running on Windows 7 64 bits too, and I also tested it on an iPad air 3 (ios8). Here is an image showing the differences between the 3 browsers : The first, chrome, is ok for the three tests. The second, Firefox, fails in tweening the opacity with 'stroke-opacity' (third test). The third, safari ios 8, fails in moving the dots in the first test. Other tests : Chrome on ipad is the same as safari on ipad (first fails). Safari on macos is the same as safari on ipad (first fails). Chrome on Macos is the same as chrome on windows (all good). Firefox on macos is the same as firefox on windows (third fails). I guess there is a bug with firefox and ios, but as you managed to reduce the differences between firefox and such with transform origin, I wondered if it could be the same for opacity Thanks again anyway ! Hope it helps.

Hi ! I have been working on a full SVG animation with TweenMax. It was a pleasure as everything works really really well with the great addition of cross browser transform origin. Thanks ! I just noted one thing that you might be able to adjust for future releases. At first, I was using opacity attribute to tween elements opacity. It worked with <g></g>, <path />, <rect />, quite everything. But not on ios... On ios, if you tween opacity and you move the element using x property, it creates a glitch. I couldn't find a way to make it behave correctly. I dig around a little, and the only way I could manage to use opacity for now has been by creating a tween using attr: {'fill-opacity': 0.5} or attr: {'stroke-opacity': 0.5}, and by being sure that the property was set before tweening it (using TweenMax.set did the trick). The big downside of that technique is that you can't tween group (<g></g>) opacity, and for tweening the global opacity of an object, you have to tween the stroke and the fill. The codepen attached shows three ways of tweening the opacity. Chrome handle the three ways perfectly, but ios and firefox not. Please have a look. I hope you'll have an idea of a better way to use this. Have a nice day !