[How to set rotate an object with origin?]

Thank you so much PointC I'm learning everyday!

[How to set rotate an object with origin?]

how do i spin a round object forever and without interruptions? i want to animate this the wheel of this svg

<svg version="1.1" id="Capa_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
	 width="100px" height="100px" viewBox="0 0 175 175" enable-background="new 0 0 175 175" xml:space="preserve">
<g>
	<g>
		<g>
			<g>
				<g>
					<g>
						<path fill-rule="evenodd" clip-rule="evenodd" fill="#C97926" d="M62.897,76.102c-8.278-4.093-22.765-1.364-22.765-1.364
							c-6.208,17.736,1.379,43.659,1.379,43.659c9.658,7.503,24.145,2.729,24.145,2.729C60.828,106.8,62.897,76.102,62.897,76.102
							L62.897,76.102z M130.502,88.381c1.379-5.457-4.829-6.14-4.829-6.14c4.829,0,4.829-6.14,4.829-6.14
							c-2.069-13.643-15.177-7.503-23.454-9.55c-8.279-1.364-4.83-7.504-4.83-7.504c11.038-6.14,13.797-15.007,13.797-15.007
							c4.829-17.737-5.519-14.326-5.519-14.326c-2.069,4.775-19.315,21.83-26.904,25.923c-8.968,6.139-16.556,20.465-16.556,20.465
							c-2.76,16.372,2.759,44.341,2.759,44.341c18.625,10.915,42.08,6.822,42.08,6.822c9.658-2.047,11.038-8.868,11.038-8.868
							c1.379-5.457-2.761-6.14-2.761-6.14c6.899,0.683,7.59-7.504,7.59-7.504c2.068-6.822-2.76-8.186-2.76-8.186
							C129.812,97.249,130.502,88.381,130.502,88.381L130.502,88.381z"/>
					</g>
				</g>
			</g>
		</g>
		<g id="rota_icono1" class="rueda">
			<g>
				<path fill="#C97926" d="M150.405,34.618c-2.793,2.785-7.316,2.785-10.108,0c-2.791-2.787-2.791-7.302,0-10.088
					c2.792-2.785,7.315-2.785,10.107,0.001l-0.777,0.775l-0.777,0.775c-1.936-1.923-5.062-1.924-6.998,0
					c-1.929,1.933-1.929,5.053,0,6.984c1.937,1.925,5.063,1.925,6.998,0c1.929-1.931,1.929-5.051,0-6.984l0.777-0.775l0.777-0.775
					C153.195,27.316,153.194,31.831,150.405,34.618z"/>
			</g>
			<g>
				<path fill="#C97926" d="M11.854,62.606c-0.232-0.362-0.499-0.708-0.816-1.024c-0.217-0.216-0.458-0.392-0.698-0.569
					L60.68,10.742c0.181,0.246,0.362,0.492,0.584,0.714c0.312,0.311,0.65,0.575,1.006,0.803L11.854,62.606z"/>
			</g>
			<g>
				<path fill="#C97926" d="M165.397,103.689l-18.472-68.79c0.731-0.063,1.445-0.257,2.119-0.585l18.502,68.899
					C166.812,103.241,166.084,103.395,165.397,103.689z"/>
			</g>
			<g>
				<path fill="#C97926" d="M71.043,9.653c0.307-0.682,0.474-1.403,0.514-2.135l69.516,18.6c-0.349,0.664-0.567,1.371-0.652,2.098
					L71.043,9.653z"/>
			</g>
			<g>
				<path fill="#C97926" d="M113.978,164.474c-0.205-0.299-0.433-0.589-0.698-0.854c-0.267-0.266-0.557-0.491-0.855-0.697
					l50.387-50.276c0.205,0.296,0.43,0.584,0.694,0.848c0.269,0.268,0.561,0.496,0.862,0.702L113.978,164.474z"/>
			</g>
			<g>
				<path fill="#C97926" d="M25.892,140.926L7.336,71.83c0.731-0.069,1.443-0.27,2.114-0.604l18.509,68.92
					C27.237,140.271,26.539,140.537,25.892,140.926z"/>
			</g>
			<g>
				<path fill="#C97926" d="M34.249,149.027c0.368-0.656,0.609-1.357,0.714-2.082l68.603,18.352
					c-0.323,0.675-0.509,1.391-0.566,2.12L34.249,149.027z"/>
			</g>
			<g>
				<path fill="#C97926" d="M114.057,172.154c-2.793,2.786-7.316,2.785-10.107,0s-2.792-7.3,0-10.087
					c2.791-2.785,7.314-2.785,10.107,0l-0.777,0.777l-0.778,0.774c-1.935-1.924-5.062-1.924-6.997,0
					c-1.928,1.932-1.928,5.052,0,6.983c1.936,1.925,5.063,1.925,6.997,0c1.929-1.932,1.929-5.052,0-6.983l0.778-0.774l0.777-0.777
					C116.847,164.854,116.847,169.369,114.057,172.154z"/>
			</g>
			<g>
				<path fill="#C97926" d="M172.368,113.959c-2.791,2.785-7.315,2.785-10.107,0c-2.79-2.786-2.791-7.302,0-10.088
					c2.792-2.785,7.316-2.785,10.108,0l-0.777,0.776l-0.777,0.776c-1.937-1.926-5.063-1.926-6.998,0
					c-1.929,1.931-1.929,5.052,0,6.982c1.935,1.925,5.062,1.925,6.998,0c1.928-1.932,1.928-5.052,0-6.982l0.777-0.776l0.777-0.776
					C175.16,106.657,175.16,111.173,172.368,113.959z"/>
			</g>
			<g>
				<path fill="#C97926" d="M35.918,149.264c-2.792,2.786-7.316,2.786-10.107,0c-2.791-2.786-2.791-7.3,0-10.087
					c2.792-2.785,7.315-2.785,10.107,0.001l-0.777,0.775l-0.777,0.775c-1.936-1.925-5.063-1.925-6.998,0
					c-1.929,1.933-1.929,5.053,0,6.983c1.936,1.925,5.062,1.926,6.998,0c1.928-1.931,1.928-5.052,0-6.983l0.777-0.775l0.777-0.775
					C38.709,141.964,38.709,146.478,35.918,149.264z"/>
			</g>
			<g>
				<path fill="#C97926" d="M12.594,70.893c-2.792,2.785-7.316,2.785-10.108,0c-2.791-2.787-2.791-7.301,0-10.087
					c2.792-2.786,7.315-2.786,10.107,0l-0.778,0.776l-0.777,0.776c-1.935-1.924-5.062-1.924-6.998,0
					c-1.929,1.931-1.929,5.052,0,6.983c1.936,1.925,5.063,1.924,6.998,0c1.928-1.932,1.928-5.052,0-6.983l0.777-0.776l0.778-0.776
					C15.384,63.592,15.384,68.106,12.594,70.893z"/>
			</g>
			<g>
				<path fill="#C97926" d="M70.905,12.697c-2.792,2.785-7.315,2.785-10.107,0c-2.791-2.787-2.791-7.3,0-10.087
					c2.792-2.786,7.316-2.786,10.107,0l-0.777,0.775L69.35,4.162c-1.935-1.925-5.062-1.925-6.997,0
					c-1.928,1.932-1.928,5.052,0,6.983c1.935,1.925,5.062,1.925,6.997,0c1.929-1.932,1.929-5.052,0-6.983l0.778-0.777l0.777-0.775
					C73.697,5.396,73.696,9.91,70.905,12.697z"/>
			</g>
		</g>
	</g>
</g>
</svg>

If i use timelinemax and the property rotation, it first changes the position of the element, then rotates, stop por a sec and rotates again, i want it to rotate forever withouy pause, hpw can i do that? Thanks

[How to detect if i'm dragging up or down??]

Thanks PointC and Carl, is really simple y have a draggable element, like the zoom of google maps, I detect if the user is zooming in or zooming out, sp I use the getDirection() method, the funny thing is, for example if you have a counter in the onDrag event, the counter will end up with a low number, say (10) if you drag fast, but if you drag slow, the number may be 50, I hope it's clear (i dont know mucho about codepen) Thanks!:

Draggable.create("#eldrag",{

type: "y",

bounds: $("#labarra"),

onClick:function() {

 

},

onDragEnd:function() {

/*if(direccion=="up") TweenMax.to("#elscroll img", 0.3, {width:"200%"});

else TweenMax.to("#elscroll img", 0.3, {width:"70%"});*/

},

onDrag:function(){

w_contenedor=$('#zoom_photo').width();

porcent=($('#elscroll img').width() / w_contenedor) * 100

porcent=Math.ceil(porcent);

direccion=this.getDirection("velocity");

if(direccion=="up"){

if(porcent<200) TweenMax.to("#elscroll img", 0.1, {width:( $('#elscroll img').width()+30 )});

}else{

if(porcent>=70) TweenMax.to("#elscroll img", 0.1, {width:( $('#elscroll img').width()-30 )});

}

}

});

[How to detect if i'm dragging up or down??]

PointC I'd like to talk about another question, something a little bit weird, if you drag an element and you drag it fast, the actions that you execute in the "onDrag" event for example, behave different than if you drag slowly. I have a site where i use Draggable to zoom in or out a photo, in the event "onDrag" I increase the size depending on the direction of the element, but i notice that when I move it really fast, the size is smaller, but if I drag slowly, the image increases more. What could be going on here? Thanks

[How to detect if i'm dragging up or down??]

PointC Thank you!!

[How to detect if i'm dragging up or down??]

Hi, I'd like to know how to detect if i'm dragging up or down, do you know if there's a way to do it? Thanks