Jump to content
Search Community

How to set rotate an object with origin?

Leelala 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

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"});
  • Like 5
Link to comment
Share on other sites

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! 

:-)

Link to comment
Share on other sites

  • 3 years later...

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

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