craftedbygc

Members
  • Content Count

    7
  • Joined

  • Last visited

Community Reputation

2 Newbie

About craftedbygc

  • Rank
    Newbie
  1. craftedbygc

    Draggable text elements with overflow

    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. craftedbygc

    Animate width from left to right

    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. craftedbygc

    Draggable text elements with overflow

    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. craftedbygc

    Google map Marker moving along path?

    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. craftedbygc

    Draggable Progress Monitor

    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. craftedbygc

    Draggable included in TweenMax

    Yeah, that makes sense. Just my weary Friday brain
  7. craftedbygc

    Draggable included in TweenMax

    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?