How to set rotate an object with origin?

[Leelala 0 Likes (Newbie)]

Hi,

 

I have an question, how to rotation object with origin?
i need my object rotate stick at the left and middle of the object.
same as the left 2 images

 

Please Help~ Thanks alot.......
 

[jamiejefferson 1,199 Likes (Superhero)]

If I'm understanding correctly, you can rotate around the left side by using transformOrigin: "left 50%". To rotate around the center, use "50% 50%". e.g.

TweenLite.to(element, 2, {rotation:90, transformOrigin:"left 50%"});

This is from the API for CSSPlugin:

• transformOrigin - Sets the origin around which all transforms (2D and/or 3D) occur. By default, it is in the center of the element ("50% 50%"). You can define the values using the keywords "top", "left", "right", or "bottom" or you can use percentages (bottom right corner would be "100% 100%") or pixels. If, for example, you want an object to spin around its top left corner you can do this:

  //spins around the element's top left corner
  TweenLite.to(element, 2, {rotation:360, transformOrigin:"left top"});

  The first value in the quotes corresponds to the x-axis and the second corresponds to the y-axis, so to make the object transform around exactly 50px in from its left edge and 20px from its top edge, you could do:

  //spins/scales around a point offset from the top left by 50px, 20px
  TweenLite.to(element, 2, {rotation:270, scale:0.5, transformOrigin:"50px 20px"});

[Leelala 0 Likes (Newbie)]

If I'm understanding correctly, you can rotate around the left side by using transformOrigin: "left 50%". To rotate around the center, use "50% 50%". e.g.

TweenLite.to(element, 2, {rotation:90, transformOrigin:"left 50%"});

This is from the API for CSSPlugin:

• transformOrigin - Sets the origin around which all transforms (2D and/or 3D) occur. By default, it is in the center of the element ("50% 50%"). You can define the values using the keywords "top", "left", "right", or "bottom" or you can use percentages (bottom right corner would be "100% 100%") or pixels. If, for example, you want an object to spin around its top left corner you can do this:

  //spins around the element's top left corner
  TweenLite.to(element, 2, {rotation:360, transformOrigin:"left top"});

  The first value in the quotes corresponds to the x-axis and the second corresponds to the y-axis, so to make the object transform around exactly 50px in from its left edge and 20px from its top edge, you could do:

  //spins/scales around a point offset from the top left by 50px, 20px
  TweenLite.to(element, 2, {rotation:270, scale:0.5, transformOrigin:"50px 20px"});

 

Thank you so much jamiejefferson, this is exactly what i need! 

[celopez16 1 Likes (Newbie)]

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

[PointC 14,170 Likes (Superhero)]

Hi celopez16 

 

You can spin an element forever like this:

TweenMax.to(yourElement, 1, {rotation:360, ease:Linear.easeNone, repeat:-1})

Just an FYI - it's always best to start a new topic for your questions and provide a CodePen for us. Thanks.

[celopez16 1 Likes (Newbie)]

Thank you so much PointC I'm learning everyday!