Share Posted September 17, 2015 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 More sharing options...
Share Posted September 18, 2015 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. 3 Link to comment Share on other sites More sharing options...
Author Share Posted September 18, 2015 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 More sharing options...
Share Posted September 18, 2015 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 2 Link to comment Share on other sites More sharing options...
Author Share Posted September 18, 2015 Perfect, thanks. Link to comment Share on other sites More sharing options...
Author Share Posted September 22, 2015 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 More sharing options...
Share Posted September 22, 2015 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 More sharing options...
Author Share Posted September 23, 2015 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 More sharing options...
Share Posted September 23, 2015 pls check this out : See the Pen LpRZdj by MAW (@MAW) on CodePen 1 Link to comment Share on other sites More sharing options...
Author Share Posted September 23, 2015 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 More sharing options...
Author Share Posted September 23, 2015 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 More sharing options...
Share Posted September 23, 2015 Pls check the Codepen again : See the Pen LpRZdj by MAW (@MAW) on CodePen Link to comment Share on other sites More sharing options...
Author Share Posted September 23, 2015 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 More sharing options...
Recommended Posts
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 accountSign in
Already have an account? Sign in here.
Sign In Now