Jump to content
Search Community

unseenstudio

Business
  • Posts

    7
  • Joined

  • Last visited

Everything posted by unseenstudio

  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-dragging css class that sets overflow:hidden / auto , but that does not have the required effect.
  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 in the midst of a React project and so it is a bit more involved than that. But thought these concepts would help anyone trying to do the same thing.
  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 create another animation. So if I can get a value between 0-1 of the progress, I can set the position of another animation. Even if I could just get the 'onProgress' functionality, I should be able to calculate the 0-1 myself from various offsets if I had the 'x' amount.
  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 having to include the Draggable utility separately in order to use it. Is this an error in the documentation, or am I missing something?
×
×
  • Create New...