Jump to content
Search Community

Getting touchAction property to work with pan-x pan-y

redcrayon test
Moderator Tag

Warning: Please note

This thread was started before GSAP 3 was released. Some information, especially the syntax, may be out of date for GSAP 3. Please see the GSAP 3 migration guide and release notes for more information about how to update the code to GSAP 3's syntax. 

Recommended Posts

Hi GSAP,

What is the syntax to have touchAction work on both axis?


Single axis works:
TweenMax.set(element, { touchAction: "pan-x" });

This doesn't work:
TweenMax.set(element, { touchAction: "pan-x pan-y" });

Thanks!

Link to comment
Share on other sites

Hi and welcome to the GreenSock forums,

 

I'm not really familiar with that property. It might help if you can provide an example of it working without TweenMax.

 

Please try:

 

TweenMax.set(element, { "touch-action": "pan-x pan-y" });

 

and let us know if that works.

 

 

  • Like 2
Link to comment
Share on other sites

Unfortunately, that didn't work. I also tried this as a CSS property which didn't work either.
TweenMax.set(element, { css: { "touch-action": "pan-x pan-y" }});

This post is experiencing the same issues I have at the moment.

If you open this pen on an Android phone / Chrome browser, the first example is the issue I have. Basically, I cannot drag an SVG.

See the Pen b22b091009ecab25ea5ca190d3f54496 by osublake (@osublake) on CodePen

 

After about 5-10px movement in any direction, onRelease is automatically triggered. After applying their solution (touchAction), I was able to successfully drag in one direction but not the other.

Link to comment
Share on other sites

  • 2 weeks later...

Thanks Carl!
Sorry for not responding to this sooner. 

I tried the beta version of the draggable and it worked.


Now that has been resolved, I seem to be having trouble with draggable bounds which I guess is a separate issue altogether. Seems to be cutting off on the right side of the window even though I specified the bounds to be "window".

Thanks again!

Link to comment
Share on other sites

Hi Jack. Thanks for the reply.
Navigate to this site using an Android phone running Chrome.

 

http://engit.eng.unimelb.edu.au

 

Go to the quiz section and drag the items around. It appears the resolution detected by the bounds is scaled down. When you drag any of those answers to the right of the screen or to the bottom, the drag is prevented. I have tinkered with the edgeResistance value which seems to allow dragging beyond the bounds, but the bounds continue to be scaled down.

Here's a snippet of the code. I don't think it's anything unusual.
 

Draggable.create(".answer", {
			bounds: window,
			type: "x,y", 
			dragResistance: 0, 
			edgeResistance: 0.75,
			
			onClick: function(e) {
				e.stopPropagation();	
			},
			onPress: function(e) {
				if(!isMSIE()) {
					TweenMax.to(e.target, 0.3, { autoRound: false, css: { "stroke-width": "3" }});
					var tl = new TimelineMax();
					tl.set(e.target.parentNode.childNodes[0], { autoRound: false, rotation: 20, transformOrigin: "50% 50%" });
					tl.to(e.target.parentNode.childNodes[0], 0.3, { autoRound: false, rotation: -20, transformOrigin: "50% 50%", repeat: -1, yoyo: true, ease: Power1.easeInOut });
					sound_select.play();
				}
				// set blank element to what is pressed
				el = e.target.parentNode;
				// layer current svg on top
				el.parentNode.appendChild(el);
			},
			onRelease: function(e) {
				if(!isMSIE()	) {			
					var obj = document.querySelector(".drop-zone");
					
					TweenMax.to(e.target, 0.3, { autoRound: false, css: { "stroke-width": "1" }});
					TweenMax.killTweensOf(e.target.parentNode.childNodes[0]);
					TweenMax.to(e.target.parentNode.childNodes[0], 0.3, { autoRound: false, rotation: 0, transformOrigin: "50% 50%", ease: Power1.easeInOut });
					
					if(this.hitTest(obj, "50%")) {
						
					} else {
						TweenMax.to(e.target.parentNode, 0.5, { autoRound: false, x: 0, y: 0, ease: Power2.easeOut });
						TweenMax.to($(".drop-zone-text"), 1, { alpha: 1 });
					}
				}
			},
			onDrag: function(e) {
				var obj = document.querySelector(".drop-zone");
				
				// ensure the dragged element is still the original element pressed
				if(e.target.parentNode == el) {
					if(this.hitTest(obj, "40%")) {
						TweenMax.to($(".drop-zone-text"), 1, { alpha: 0 });
						TweenMax.to($(".drop-zone-path"), 0.2, { css: { stroke: "#ffffff" }});
						TweenMax.to($(".answer-grid"), 0.2, { autoRound: false, scale: 1.05, ease: Power1.easeOut, transformOrigin: "50% 50%" } );
						TweenMax.to(e.target.parentNode, 0.2, { autoRound: false, scale: 0.8, transformOrigin: "50% 50%" });
					} else {
						TweenMax.to($(".drop-zone-text"), 1, { alpha: 1 });
						TweenMax.to($(".drop-zone-path"), 0.2, { css: { stroke: "#19e68c" }});
						TweenMax.to($(".answer-grid"), 0.2, { autoRound: false, scale: 1, transformOrigin: "50% 50%" } );
						TweenMax.to(e.target.parentNode, 0.2, { autoRound: false, scale: 1, transformOrigin: "50% 50%" });
					}
				}
			},
			onDragEnd:function(e) {
				var obj = document.querySelector(".drop-zone");
				var target_class = e.target.attributes['class'].value;
				if(isMSIE()) {
					var target_id = e.srcElement.id;
				} else{
					var target_id = e.target.id;
				}
				var tl = new TimelineMax();
				
				TweenMax.to($(".answer-grid"), 0.2, { autoRound: false, scale: 1, transformOrigin: "50% 50%" } );
				TweenMax.to(e.target.parentNode, 0.2, { autoRound: false, scale: 1, transformOrigin: "50% 50%" });
				
				if(e.target.parentNode == el) {
					if(this.hitTest(obj, "50%")) {
						if(target_class == "answer_one") {
							TweenMax.to(e.target.parentNode, 0.5, { autoRound: false, x: "75%", y: "-50%", ease: Power2.easeOut });
						} else if (target_class == "answer_two") {
							TweenMax.to(e.target.parentNode, 0.5, { autoRound: false, x: "75%", y: "50%", ease: Power2.easeOut });
						} else if (target_class == "answer_three") {
							TweenMax.to(e.target.parentNode, 0.5, { autoRound: false, x: "0%", y: "100%", ease: Power2.easeOut });
							if(target_id == 9) {
								sound_tie_fighter.play();
							}
						} else if (target_class == "answer_four") {
							TweenMax.to(e.target.parentNode, 0.5, { autoRound: false, x: "-75%", y: "50%", ease: Power2.easeOut });
						} else if (target_class == "answer_five") {
							TweenMax.to(e.target.parentNode, 0.5, { autoRound: false, x: "-75%", y: "-50%", ease: Power2.easeOut });
						} else if (target_class == "answer_six") {
							TweenMax.to(e.target.parentNode, 0.5, { autoRound: false, x: "0%", y: "-100%", ease: Power2.easeOut });
						}
						
						$(".answer").each(function() {
							if(e.target.parentNode != this) {
								$(this).attr("class", "answer disappear");
							}
						});
						
						sound_answer.play();
						tl.to($(".quiz-restart-group"), 0.2, { alpha: 0 });
						tl.staggerTo($(".disappear"), 0.2, { alpha: 0 }, 0.1, "0.0"); 	// 1.2
						tl.to($("#answer_filter_blur"), 0.5, { attr: { "stdDeviation": 6 }, yoyo: true, repeat: 1 }, "-=0.6" );
						tl.to($(".quiz-drop-zone"), 0.15, { autoRound: false, scale: 1.1, transformOrigin: "50% 50%" }, "-=0.55" );
						tl.to(e.target.parentNode, 0.15, { autoRound: false, scale: 1.1, transformOrigin: "50% 50%" }, "-=0.55" );
						tl.to($(".quiz-drop-zone"), 0.2, { autoRound: false, scale: 0, alpha: 0, transformOrigin: "50% 50%" }, "-=0.4" );
						tl.to(e.target.parentNode, 0.2, { autoRound: false, scale: 0, alpha: 0, transformOrigin: "50% 50%" }, "-=0.4" );
						tl.to($(".quiz-svg"), 0.5, { alpha: 0, delay: 0.5, onComplete: nextQuestion, onCompleteParams:[target_id] });
					}
					else {
						TweenMax.to(e.target.parentNode, 0.5, { x: 0, y: 0, ease: Power2.easeOut });
						TweenMax.to($(".drop-zone-text"), 1, { alpha: 1 });
					}
				}
			}
		});

 

Link to comment
Share on other sites

Dear All,

 

Hello. My name is Alex and I am a newbie in SVG and even coding. I have been reading this forum recently and found it very very useful, people here are so helpful. That's the reason I choose to use GreenSock.

 

I am having a similar problem with redcrayon. When I use the beta version, the drag is ok but cause another function to fail . Also, touch-action is not workable too. 

 

I really like draggable, could you guys please help to fix this issue please?  Thank you so much.

 

Cheers,

Alex

Link to comment
Share on other sites

Hi redcrayon,

 

Very nice quiz. Unfortunately I had to wait a minute for a video to load before getting to it.

In order for us to help you efficiently and effectively you will need to provide a reduced test case. It just isn't practical for us to debug a live site as complex as yours. We don't need to see half a dozen conditions inside callbacks or elaborate animations on multiple elements or anything like that.

Just a single Draggable element that isn't respecting the proper bounds or firing the proper callbacks, in as simple a manner as possible.

 

We are big fans of CodePen demos. Just fork the demo below, add your own code and send us the link:

 

See the Pen yXMXEy by GreenSock (@GreenSock) on CodePen

 

We'll do our best to get to the bottom of the issue.

Link to comment
Share on other sites

Hi Carl and redcrayon and folks in here,

 

My apologies for jumping in because I really want to know where my problem is. Below i have inserted my codepen. May I ask if you could help to take a quick look?

 

Thank you very much and I really appreciate your help.

 

 

See the Pen gRmxOq by alexli2017 (@alexli2017) on CodePen

 

Link to comment
Share on other sites

Good suggestion, @Dipscom

 

@Alexli, there was indeed a bug in the prerelease of Draggable, and I updated it now so things should be resolved (you may need to clear your cache). Does it work better now? (feel free to answer in a new thread that you create). 

 

https://s3-us-west-2.amazonaws.com/s.cdpn.io/16327/Draggable-latest-beta.js

  • Like 1
Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.
×
×
  • Create New...