Jump to content
GreenSock

C.Surieux

How to rotate smoothly an <img>

By C.Surieux, in GSAP. Views: 4,763

Moderator Tag
Go to solution Solved by Diaco,

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

Posted

Hi,

 

Being new to GreenSock, I want to move a circular <IMG> from some small point (coming from the background effect) to its full size centered in the page. I also want the image to be rotating on itself. But I can't reach a smooth rotating effect.

I have been tweaking an existing example and trying something as

 

<body>
    <div id="container">
        <img id='svg' class="R-T" src="img/sigle-1920.png">
    </div>
    <script type="text/javascript" src="js/greensock/TweenMax.js"></script>
    <script type="text/javascript">
        TweenLite.set(container, { perspective: 300 });
        TweenMax.staggerTo('.R-T', 1, { rotationX: 360, repeat: 20, ease: Linear.easeNone, delay: -1 }, 1);
    </script>
</body>
 
The rotation is very fast, too much fast. Is there a way to slow it down ? Then to move my image from one point with a small size and grow it while it keeps rotating an inflating to its final size and position ?
 
Thanks for help.
 
CS
Link to comment
Share on other sites
Posted

Hi,

 

Its really tough to say without seeing a demo. It would really help if you made a CodePen demo as explained here:

http://greensock.com/forums/topic/9002-read-this-first-how-to-create-a-codepen-demo/

 

My only guess is that maybe your image is super big?

 

Here is a very basic rotate and scale of a centered image and it looks smooth to me

 

http://codepen.io/GreenSock/pen/OyNvLa

 

I'm sure if you forked that demo and added your own code  and image it would really help us help you.

  • Like 3
Link to comment
Share on other sites
  • Author
Posted

Ok, I made this

See the Pen avNMpW by anon (@anon) on CodePen

 

What is missing and I can't find how to do it:

 

1) nice transition when on the end of the 360° loop

2) reduce speed

3) Move from a point on left or right to reach center and in the same time grow from 1 point to its full size.

 

Any help welcome.

 

PS: how to stop the codepen ?

 

CS

Link to comment
Share on other sites
  • Solution
  • Solution
Posted

Hi C.Surieux  :)

 

pls check Carl's demo

 

but in addition if i understood correctly what you're looking for , pls check this out too : 

See the Pen GpZebb by MAW (@MAW) on CodePen

  • Like 2
Link to comment
Share on other sites
  • Author
Posted

Hello Diaco,

Could you help a last time as I am facing a challenged I was not expecting: all my layout is bootstrap built using container-fluid.

And in this theme, ht image has to adopt a size proportional to the display: positioned at a % of height and width with a size which vary depending the screen size.

(for small size (< 720px)I dont want to play the animation but for larger screens (992, 1200) I need it. Could I use % where I have been using fixed values ?

 

Thanks again for help.

CS

Link to comment
Share on other sites
Posted
Could I use % where I have been using fixed values ?

 

 

hmm , unfortunately i can't understand what you'r looking for ! .. pls make a reduced Codepen available .

 

btw i think js Media Queries can help you , pls check out these topics :

 

http://greensock.com/forums/topic/11749-changing-to-width-based-on-media-query/

 

http://greensock.com/forums/topic/11172-using-media-queries-in-tweenmax/

Link to comment
Share on other sites
  • Author
Posted

Hi Diaco,

 

I made some progress on my side.

I don't know how JavaScript Media Queries could help me ? It seems I am near a solution simply using %.

 

But I get some problems:

- $(window).resize does not works ideally. After resizing the browser window, especially when resizing using a move of the windows vertical side to widen or reduce, sometimes the tween get lost. It starts but stops without completing the action. May be am I missing some reset function somewhere ? Data used by the Tween seems corrupted ?

- After resizing the screen, when it works Ok, the img stops on a position near what I am asking but not totally (???). If I press F5 to refresh without changing the screen size, the sequence is replayed but the image arrives in a different place. Not far from the previous, but different ???

 

Here is the corresponding codepen 

See the Pen ojzLjB by anon (@anon) on CodePen

 

EDIT: I have added a red border to containerImg and it shows the pb.

 

Thanks for help again.

CS

Link to comment
Share on other sites
  • Author
Posted

Than you for fast answer.

 

Looks nice but I only want to have one tween each time screen is resized, not a permanent one.
I tried setting repeat:0 but it no more restarts when resizing.

 

CS

Link to comment
Share on other sites
  • Author
Posted

And look the positioning has the same pb, if I add the red border and you switch your screen (Chrome) frome full size to reduced, the img no more goes inside the containerImg

 

See the Pen JYRRYp by anon (@anon) on CodePen

Link to comment
Share on other sites
  • Author
Posted

Ok thanks.
I think it will be ok with those reset features, I will adapt to my case.

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
 Share
Go to topic listing

  • Recently Browsing   0 members

    • No registered users viewing this page.
×
Login Create Account