Jump to content

Search In
  • More options...
Find results that contain...
Find results in...


  • Content Count

  • Joined

  • Last visited

Community Reputation

2 Newbie

About craftedbygc

  • Rank
  1. Thanks @GreenSock - that's a massive help and super close. I didn't even know `touch-action` was a thing, so I've learned something too. However, `touch-action: none;` means you can't scroll the content down either. I've resolved my issue by limited touch action to the y-axis using `touch-action: pan-y;` . This could be an issue if someone wanted to create a two dimension Draggable with text and maintain scroll on the element.
  2. TweenLite.defaultEase = Power0.easeNone; TweenMax.set(".mask1", {transformOrigin:"100% 50%"}); TweenMax.set(".mask2", {transformOrigin:"0% 50%"}); TweenMax.fromTo(".mask1", 2.2, {width:"0px"}, {width:"300px", ease:Power0.easeNone, repeat:-1, repeatDelay:2}) TweenMax.fromTo(".mask2", 2.2, {width:"300px"}, {width:"0px", ease:Power0.easeNone, repeat:-1, repeatDelay:2}) Having different transform origins and using fromTo gets you the result I think you are looking for?
  3. In the Codepen I am trying to make a draggable list of items that contain text. Each item must have `overflow: auto` so that the content can scroll. However, on touch devices in Chrome the pointer event gets caught in the item and it does not drag smoothly. To replicate, launch in Chrome and enter responsive mode via dev tools. Dragging in between the elements works as expected, but dragging on the elements does not work correctly. I have tried various draggable options and also laying out without flexbox, but none seem to work. I have also tried toggling a dragging/not
  4. I stumbled across this when looking at how to animate markers on a Google Map (API v3). I got access to the DOM element using the answer provided here http://stackoverflow.com/questions/2065485/get-dom-element-of-a-marker-in-google-maps-api-3 You also need to set 'optimised: false' on the marker so that it appears on it's own layer as an image (Google tries to render on Canvas where possible). Be aware, this could have performance considerations if you are using a lot of markers. Then selecting it's parent, and using that as the object to perform TweenMax animations on. This i
  5. I'm using Draggable to create a scrolling gallery. As part of this, I need to know the progress that a user has made while dragging through the gallery. Is there any kind of 'onProgress' callback, or any way this can be achieved? I know there is onDrag, but I am also using throwProps and I need to know the status of the progress whilst it is being 'thrown' as well as dragged. Ideally, there would be something like this: Draggable.create(timeline, { bounds: '.page-timeline', type: 'x', throwProps: true, onProgress: function(e) { console.log(e); } }); This is in order to
  6. Yeah, that makes sense. Just my weary Friday brain
  7. In the docs (https://greensock.com/docs/#/HTML5/GSAP/Utils/Draggable/) I notice it says that to use Draggable, all you need is TweenMax. "REQUIREMENTS: TweenLite and CSSPlugin or just TweenMax which contains both." However, at the top of TweenMax.js (v 1.19.1) it says "Includes all of the following: TweenLite, TweenMax, TimelineLite, TimelineMax, EasePack, CSSPlugin, RoundPropsPlugin, BezierPlugin, AttrPlugin, DirectionalRotationPlugin" and there is no mention of 'Draggable' anywhere within the file. The CSSplugin.js file also seems to contain no mention to 'Draggable'. I am havin