Jump to content
GreenSock

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

Leaderboard

Popular Content

Showing content with the highest reputation on 07/19/2019 in all areas

  1. So the whole "double click" thing on iOS may be a general iOS behavior with JavaScript. I've found a couple references to it out on Google. Adding this meta tag fixes the problem in your test case: <meta name="viewport" content="width=device-width"> I think by specifying a "viewport" you are telling iOS that you are going to handle touch events yourself and not to 'simulate' any sort of onClick type events. Or something On an somewhat related note, I also find this script very useful when needing to drag things with Greensock Draggable on iOS: https://github.com/lazd/iNoBounce It prevents the whole screen from bouncing around when dragging things.
    4 points
  2. Let's fire up the @Rodrigo React Signal.
    3 points
  3. If you don't want that mobile touch bouncing you can also use the CSS property overscroll-behavior-y: contain or overscroll-behavior-y: none on the same element with the CSS overflow property. overscroll-behavior-y: https://developer.mozilla.org/en-US/docs/Web/CSS/overscroll-behavior-y
    3 points
  4. That's fine James, places like CodePen just make it easier for us to actually see the code in context. It's not that GSAP is affiliated with CodePen or anything of the sort, you can use any online code editor of your choice as long as there's a way for us to see the code and tweak it live. It makes a world of difference when trying to figure out what is going on. For your example pen, you have a few issues. You need to include any libraries you intend to use. To do that: Click on the button that says "Settings" on the top right of the screen, to add JavaScript libraries, click on the "JavaScript" tab, there's a search bar, type the name of the library and pick from the results. I'm guessing you will be wanting GSAP and jQuery from what I saw in your code. After that, you have some unconventional setup that I am not familiar with. I am not sure what you expect $("anim") to return but I am pretty sure it won't be an object that you can access with "this.anim.scale". So, you might need some refactoring there. Also, you are setting an onCompleteParams with a "dispatchEventType" that doesn't exist - this will throw errors and cause your JavaScript to break. Finnaly you have a onCompleteScope set to "this" that looks redundant to me. I've made the bellow for you as an example, see if it helps: https://codepen.io/dipscom/pen/78011deb148a2f61e48f377f2921f525?editors=0011
    3 points
  5. Hi @james.davies, Welcome to the Forums! Your callback should be onComplete: handleYoyoComplete - without the "()". It should fire at the end of the Tween, after it has repeated. I can't see what is wrong or why you are not seeing the result as expected. Could you provide a reduced case example? CodePen has supports TypeScript, you should be able to get it running there without any issues.
    3 points
  6. Without a codepen demo to see the context, it'd difficult to know for sure but typically it's best to just set a perspective on the parent element rather than a transformPerspective on the element itself. I assume you're doing some 3D-related transforms?
    2 points
  7. Honestly I haven't played with the intersection observer API at all. By doing some quick reading on the subject I don't see any issue as long as you're careful about passing an actual DOM node to the function that creates the GSAP instance. IMHO I don't see any big issue on keeping the code that creates the GSAP instances inside the components unless is exactly the same code for a bunch of different components, and I mean that in the DRY-way (Don't Repeat Yourself), ie, if you don't want to write the same code over and over again. Regarding the kill feature, this is not like a biological kill in terms that the GSAP instance ceases to exist, basically the instance is stopped and you can be sure that is not moving in any direction and that anything related to it will be executed until is explicitly set in that way. If you want to completely remove the instance you can reset it's reference in memory with null. The only check I can think of is the isActive() method, that should return false if the GSAP instance was killed. Finally the GSAP instance should be killed even though is instantiated in a different file because the DOM node will have a reference to the instance's position in memory, this does not depends of the context where the animation is actually created, which is exclusive of the code block where it happens. Also keep in mind that this will eventually happen in the same file but in a specific closure of the bundled file between lines X and Y. Happy Tweening!!
    2 points
  8. The only downside to the CSS overscroll-behavior property is that it disables pull-to-refresh, not just containing the bouncy scroll behavior. Hopefully eventually they also add another property value that allows you to contain bouncy overscroll without disabling pull to refresh.
    2 points
  9. I ended up taking all z-indexes out of play, even on subnav ( since a negative z-index limited me to a lot of functionality on that element) and positioned it absolute and animating visibility and height which achieved the effect I was looking for. GSAP is amazing! https://codepen.io/ericnguyen23/pen/rXBgNR?editors=0110
    2 points
  10. You're close, almost there. Now are just typos and missing functions. - There's an extra "}" in line 14. - You still have "dispatchEventType" in your onCompleteParams that doesn't exist. - Although it works, you don't need the "this" in front of handleDabComplete and in onCompleteScope
    2 points
  11. Although we can't offer help on full site/application builds, we are more than happy to help with anything GSAP related so, if you find yourself stuck, let us know and I am sure there will always be someone around to lend a hand.
    2 points
  12. You're not missing anything. Looking at the entry now I see the text is not explicit enough. It implies the default value as being false but it should be clearer. It will be amended in due course. Thanks for pointing that out. Welcome to the Club. You will see life's greener now.
    2 points
  13. So I set allowEventDefault:false in this demo. That is the only difference between this demo and the previous one; allowEventDefault is set to false. (By the way, I don't see documentation saying what the default value is for that variable. Am I missing something or is the documentation missing?) Anyway, doing that does indeed seem to fix the issues on almost every browser + device that I tried. Unfortunately, there's still one case where this breaks. I have a Windows 10 touchscreen device called a Nextbook. When I run the demo on the most recent version of Chrome, 75.0.3770.142 (32-bit), the clicks either occur once or twice, randomly. I don't see any pattern to whether there's one click or two happening. I don't know whether it is worth it for your to investigate this particular problem. I did take a look at the Draggable source, and I can see that it must have been quite a nightmare getting it working on many different systems. I'm going to investigate whether the Draggable.onDrag function can be used for my purposes as well. Thank you. I am now a supporter at the "ShockinglyGreen" level ?
    2 points
  14. You can also use event methods like stopPropagation or stopImmediatePropagation to prevent any event bubbling and prevent it from firing other events. Keep in mind that stopPropagation is different then preventDefault. event.stopPropagation https://developer.mozilla.org/en-US/docs/Web/API/Event/stopPropagation event.stopImmediatePropagation https://developer.mozilla.org/en-US/docs/Web/API/Event/stopImmediatePropagation Happy Tweening!
    2 points
  15. I was looking at this thread and waiting to see if you reported anything back after Jack's comment. To me, it sounds like an issue with onTouchEnd and onClick being fired by the iPad. I can't confirm as I do not have access to an iPad currently and cannot replicate. iPads have (or used to have, I haven't checked in a while) a slight delay before firing a click event. So, your event listener might be picking up the onTouchEnd as soon as you stop touching the screen and, after the 300ms, the click event is fired.
    2 points
  16. I noticed you've got allowEventDefault:true on the Draggable. Have you tried deleting that? I know that when building Draggable, it was a huge nightmare trying to normalize all the browser behavior with click/drags/pointerEvents/mouseEvents/touchEvents because they all have various bugs/quirks/differences. That's one of the reasons we have an onClick handler in Draggable - so you can save yourself from some of these nightmares and let us handle them internally I'm curious why you're trying to avoid using it.
    2 points
  17. @Rodrigo Thanks!! I'll report back if I can get all of this working correctly.
    1 point
  18. Keep in mind the browser support for overscroll behavior
    1 point
  19. Hi @marya and welcome to the GreenSock forum! Why not use onPress instead of onClick? onPress is like using mousedown. Draggable Docs: https://greensock.com/docs/Utilities/Draggable onPress: Function - a function that should be called as soon as the mouse (or touch) presses down on the element. Inside that function, "this" refers to the Draggable instance (unless you specifically set the scope using onPressScope), making it easy to access the target element (this.target) or the boundary coordinates (this.maxX, this.minX, this.maxY, and this.minY). By default, thepointerEvent (last mouse or touch event related to the Draggable) will be passed as the only parameter to the callback so that you can, for example, access its pageX or pageY or target or currentTarget, etc. Happy Tweening
    1 point
  20. The reason I'm trying to avoid using Draggable's onClick is because I'm just trying to grab the "drag" functionality, and add it to a huge code base which uses another library entirely. The existing code base has a different framework for dealing with clicks. I suspect that trying to make GreenSock handle clicks will cause bugs in other ways. Just trying to disturb the existing code base in the most minimal way, hope that's clear.
    1 point
  21. Exactly. It certainly works the way you have it now, but each time you click the 'path 1' button you make the calculations and build the tween. If you created all the tweens/timelines in a loop you'd only have to make all those calculations once. You can put all the timelines in an array and trigger them with the button index or some other data attribute. Just my two cents. YMMV. Happy tweening.
    1 point
  22. In this example the animation always returns to the start position when you press the stop button. Perhaps you can do something similar on over() out(). If you need something different please provide a reduced test case that we can work with.
    1 point
  23. Hi olsonpm Carl solution works perfectly with Css3 vmin ; pls check this out : http://codepen.io/MAW/pen/NPqVMb
    1 point
×