Jump to content
Search Community

How to rotate smoothly an <img>

C.Surieux test
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

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

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

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

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

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

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

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