Jump to content

Jean-Baptiste Janot last won the day on November 26 2016

Jean-Baptiste Janot had the most liked content!

Jean-Baptiste Janot

  • Posts

  • Joined

  • Last visited

  • Days Won


Jean-Baptiste Janot last won the day on November 26 2016

Jean-Baptiste Janot had the most liked content!

About Jean-Baptiste Janot

Profile Information

  • Gender
  • Location

Recent Profile Visitors

2,995 profile views

Jean-Baptiste Janot's Achievements

  • Week One Done
  • One Month Later
  • One Year In

Recent Badges



  1. 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.
  2. 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.
  3. 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 !
  4. 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!
  5. 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 !
  6. 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.
  7. 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 !
  8. 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 !
  9. 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
  10. 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.
  11. It's awesome, as I expected. I have the perfect project to start using it right now. Thank you guys, you do wonders.
  12. 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.
  13. Of course that helps Thanks again Jonathan !
  14. 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.
  15. 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 !