DYOU

Hello, i'm starting with the Draggable https://greensock.com/docs/Utilities/Draggable plugin and this is my achievement by now I am trying to replicate this Drag & Drop Library: http://sunpietro.github.io/dragster/ -1) Pre-Drop-Hint -> Highlight the area where you gonna drop the element -2) Smooth drop animation -3) CloneBase -> Only draggable option / Copy elements from here, no possible to drop options -4) Move / Adapt column -> If we want to drop an element between 2, the column would be adapted -5) Trash zone -> Only drop zone to remove elements So i started by the point 1 & 2, and it gets weird how the element is dropped. Also i realize that the elements are animated via translate3D, so in case i would want to get that elements dropped into my slots, i guess i have to move into the slot after the transition. as i said, the animation is weird, not smooth like this one, and the code is basically the same. So i have a clone-base at the top, and the elements would be draggables & copies from there, to put into my grid. Can you help me first with the Weird animation & the cloneZone. Or if there is a sample case ( i didn't find it i would love to use it as a guide ) thanks in advance.

@Carl was because of the packages, but i'll work this night on it, on post it here tomorrow, so hopefully i can get a solution for this. Thanks in advance

Hello @OSUblake, did you find time to check the case recreated on github ? I kept trying without any success, kind of frustrated

I checked the scroll-behavior and also tried without initialize Smooth Scrollbar (just in case something was messing behind scenes) but keeps calculating from the top: 0 everytime, not from the current offset

I'm using Chrome last version anyway. i only have the Smooth Scrollbar in the main content of the web. not in the modal -> ScrollbarContainer. But i didn't destroy the instance, just locked it when i open the modal. Hmmm gonna check it right now.

Hello, the autokill seems to work properly if -> i click before one ScrollTo ends, then go to the other element correctly. Otherwise seems to always start from the beginning And not, i'm not animating the scrollbar. I just to indicate which div hold the content and have the overflow-y: scroll Because this is a modal box So weird i updated the codepen to basically what i have in my project. But in codepen works and in my project do this weird jump. TweenLite.version "1.20.2" CSSPlugin.version "1.20.3" ScrollToPlugin.version "1.9.0" What kind of CSS rule could do something like that

I have this code when content load. And i have my .menu-content as a modal box. Position fixed, full screen with an inner scroll. And i have a bunch of anchor links targeting to a section block inside the .menu-content <a href='#section1'></a> <a href='#section2'></a> <a href='#section3'></a> <a href='#section4'></a> <div class='menu-content'> <section id='section1'>...lorem ipsum.....</section> <section id='section2'>...lorem ipsum.....</section> <section id='section3'>...lorem ipsum.....</section> <section id='section4'>...lorem ipsum.....</section> </div> I just want a click event in the link that scroll into that section. Something similar to this Codepen import 'gsap/TweenLite'; import 'gsap/CSSPlugin'; import 'gsap/ScrollToPlugin'; document.addEventListener('DOMContentLoaded', () => { let links = document.getElementsByClassName('menu-list')[0].querySelectorAll('a'); for (let link of links) { link.addEventListener('click', (element) => { element.preventDefault; var options = { scrollTo: { y: element.target.hash, autoKill: false, offsetY: 268 }, ease: Power1.easeOut }; var scrollbarContainer = document.getElementsByClassName('menu-content')[0]; TweenLite.to(scrollbarContainer, 2, options); }); } } But when i try in my project, the ScrollTo seems to jump from the Beginning (top of the screen) sometimes and then go to the target Then if i click before one ScrollTo ends, then go to the other element correctly. Thanks in advance

I'm @hectorleon from the membership account, any idea about this ?