Jump to content
Search Community

DYOU

Members

  • Posts

    8

  • Joined

  • Last visited

 Content Type 

Posts posted by DYOU

    Draggable cloneZone and weird animation

    in GSAP

    Posted

    Hello, i'm starting with the Draggable https://greensock.com/docs/Utilities/Draggable  plugin and this is my achievement by now

    See the Pen qpLoVb by HectorLeon (@HectorLeon) on CodePen

     

    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.

    See the Pen RxqzjZ by HectorLeon (@HectorLeon) on CodePen

     

    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.

    See the Pen qpLoVb by HectorLeon (@HectorLeon) on CodePen

    ScrollToPlugin is jumping from the beginning all the time

    in GSAP

    Posted

    29 minutes ago, OSUblake said:

    That might explain the scrollbarContainer variable I asked about. If you are using that library, I would imagine that it might cause issues as it's not doing actual browser scrolling. It's just translating the container.

     

     

     

     

    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.

    ScrollToPlugin is jumping from the beginning all the time

    in GSAP

    Posted

    2 hours ago, OSUblake said:

    Any reason for the autoKill? And the name of your variable "scrollbarContainer" looks kind of suspect. Are you animating the scrollbar?

     

    Outside of that, your code looks fine. If something's funky, it might be related to your CSS or markup. That's about the best advice I can give without seeing it.

     

     


    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 :( 
     

    ScrollToPlugin is jumping from the beginning all the time

    in GSAP

    Posted

    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 

    See the Pen gXQLzN by HectorLeon (@HectorLeon) on CodePen

×
×
  • Create New...