[Draggable how to set width manually]

Hi Jack thanks for the Reply,

 

we are currently building a horizontal website with a parallax (3 layers) in it, these layers are completely under control of the customer , so we don't know how long these are, what is on them, etc. (i have no permission to share any more code)

 

When you scroll/drag to the end you have massive amount of emptiness (since all layers moved to the left), so i needed to cut it after the last visible element. I calculated the width the page will have after animations and dragging. 

 

My question was how to override the padding  that will be set in the calibrate function (line ~1039) of Draggable.js  and here:

 

	extraPadRight = Math.max(0, element.scrollWidth - element.clientWidth);

 

 

 

i know this is not a normal use case  but i thought i ask for any un(der) documented feature before

i start to hack Draggable.js  (hacking it is evil, dirty and really ugly)

 

i think it would be nice to have a feature to set a custom width to the draggable container when creating the Draggable or in scrollProxy.

 

i will provide a link to the site when it's live.

 

 

Cheers, Jan

 

 

 

[Draggable how to set width manually]

Hi there,

 

Draggable constructs a div around the content of my Element(s). 

One of those changes the width while dragging horizontal. i know the end position of that element before creation of the Draggable. 

how can i set the width of the draggable div during creation (i presume 'padding-right' ?), to avoid empty space at the drag end?

 

 

<div id="scroll__window" class="scroll__window" style="overflow-x: auto; overflow-y: hidden; cursor: move; touch-action: pan-y; user-select: none;">
<!-- // injected by draggable this padding-right needs to be set manually -->
<div style="display: block; width: 100%; padding-right: 18836px; position: relative; overflow: visible; vertical-align: top; transform: translate3d(0px, 0px, 0px);">

          <div class="stories__wrapper">
        	<div class="stories__container"> 
        	<!-- Stuff -->	
            </div>
            <div id="scroll__container" class="scroll__container">
              <!-- even MORE Stuff  absolute positioned & parallax -->	
            </div>
          </div>

      </div>
      
</div>

 

(Sorry have not the time for a codepen ) 

 

maybe there is a simple answer, i'm not yet aware of?

 

 

  

[how to debug DrawSVG in Angular?]

thanks a ton  @OSUblake, 

 

console.log("GSAP Plugins", window.com.greensock.plugins)

 

shows the Plugin but it does not work.

 

 

i got it to work with

 

 TweenMax.fromTo(circl, 1.25, { drawSVG: 0 }, { drawSVG: '0 100%', stroke: '#f7f7f7', ease: Power2.easeInOut, onUpdate: () => {
          DrawSVGPlugin.getPosition(circl);
          } }).play();

 

but i wonder why is that working and simple use of drawSVG not? 

is there anyway to substitute 'drawSVG' with DrawSVGPlugin ?

 

it might help with other Plugins too (ScrollTo will not get work, for instance) 

 

 

 

 

 

[how to debug DrawSVG in Angular?]

Hi there,

 

i want to draw a circle in an Angular App. This Codepen works fine ( sorry i'm not that crack to mock an Angular app in Codepen), when i use that code in Angular, i suspect the DrawSVGPlugin is not correct imported, though i got no errors, and the changes to the stroke-colors are working;  it does not to be a problem with scrollmagic either. the start event fires correctly.

 

What do i wrong? is there anything i overlooked ? how can i log or see if DrawSVG is working?  i'm not that familiar with angular(version 5). Help is really appreciated  

 

//package.json

 "gsap": "file:src/app/res/vendor/gsap/src/uncompressed",

// animation package / Homepage Component
import 'gsap';
import * as DrawSVGPlugin from 'gsap/plugins/DrawSVGPlugin';// i can comment that out, same behaviour -.-
import 'imports-loader?define=>false!animation.gsap'; // needed due to bug in ScrollMagic
import ScrollMagic from 'ScrollMagic';
import 'scrollmagic/scrollmagic/uncompressed/plugins/debug.addIndicators';


// code in Hompage.component.ts

// ... this is wrapped in an window.load event since the circle path is inside a child component...
// set duration on last element, so it will have an end event und start scrolling again
        const duration: number = (i === this.ao.length - 1) ? ownHeight : 0;
        const scene: any = new ScrollMagic.Scene({
          triggerElement: el,
          duration: duration,
          offset: -triggerHeight
        })
          .setPin(el)
          .addTo(smCtlr);
        // if you need trigger and indicators
        if (GlobalVariable.DEBUG) { scene.addIndicators(); }
        scene.on('start', (e) => {
          const circl = el.querySelector('.pathR');
          TweenMax.set(circl, { DrawSVG: '0%' });
          TweenMax.fromTo(circl, 5.25, { drawSVG: 0,stroke: '#ff0000' }, { drawSVG: '0% 100%', stroke: '#00ff00', ease: Power2.easeInOut }).play();
          console.log(TweenMax.isTweening(circl));

        });

 

See the Pen aEOOGW by LucitheR (@LucitheR) on CodePen

[Draggable set right Padding in horizontal drag]

Hi there, 

 

i have two containers inside a horizontal draggable Div. positioned by flex-box

 

inside the second Div i have some  absolute positioned  items that might be wider than said container.

it's trivial to get the widths of those elements. and set the right padding.

 

But when i start dragging that number is overwritten by draggable. i tried onPress, startDrag(). How do i set that Padding initially and persistently?

 

in the screenshots:

 

grey background: correct 

 

 

blue background: incorrect after dragging

 

 

 

 What am i doing wrong? how does draggable calculate its padding-right?

 

Sorry that i can't make a codepen, but its wip on an ongoing project

 

[Physics 2D example for click eventhandler on a dot]

yay, that works! thank you all

 

 

Its still happening because there is a inline style of pointer-events:none on the div with an id #featureBackground

 

The pointer-events: none CSS property will disable any mouse or touch events its applied to.

 

You could add this to your style-sheet to override that inline style on #featureBackground or just remove pointer-events: none from that div in your source code

#featureBackground {
   pointer-events:auto !important;
}

The !important declaration makes sure it overrides any inline styles on the tag.

 

See the Pen grgXJg?editors=0010 by jonathan (@jonathan) on CodePen

 

If your still having issues GreenSock's Jack and Carl will have to look into why pointer-events is being applied on the dragged elements parent.

 

 

[Physics 2D example for click eventhandler on a dot]

Hello LucitheR and Welcome to the GreenSock Forum!

 

This is happening due to a JS error in the browser console:

ReferenceError: replayReveal is not defined

Your calling a function replayReveal() on line 33, but you don't have have a function with that name in your code.

 

thanks, i'm new to Codepen, too;  i have deleted it  but still no event

[Physics 2D example for click eventhandler on a dot]

Hi there or Moin,

 

first of all i'm a newbie to GSAP, so i may miss the obvious and i'm in a bit of a peril

i copied the physics2d Demo, and thought to make it a simple Game, clicking a dot turns it red,but i can't seem to add eventhandlers to the dots. 

The docs for those tween lite didn't state any callback for the tweened objects, so i ask for your kind help.

 

how stupid am i?

 

here's my codepen

 

 

cheers, Jan

 

-edit: typo

See the Pen QNdgWK?editors=0010 by realLucitheR (@realLucitheR) on CodePen