Share Posted March 13, 2017 Hi, I am creating a responsive animation where there's an image on the background and some elements of it are animated. For example, I would like to move a cloud 20% of the screen width, but with the code that I have, it's moving it but of a 20% of the cloud width. Does anyone know how to do it of the screen width instead of the cloud width? This is my code: TweenMax.to('#cloud', 5, { x:"20%", ease:Power1.easeInOut, yoyo: true, repeat:-1 }); See the Pen JWJbzG by sonder15478 (@sonder15478) on CodePen 1 Link to comment Share on other sites More sharing options...
Share Posted March 13, 2017 `x` and `xPercent` manipulate the element's CSS transform property, which solely affects the element being transformed with no regard for positioning, parent, or the document. If you want to move something with`x` to a specified point - in your case, a certain percentage of the screen width - you must calculate that position and then set the x value to that. See the Pen rywjQW by sgorneau (@sgorneau) on CodePen 2 Link to comment Share on other sites More sharing options...
Author Share Posted March 13, 2017 Thank you for your quick answer. I'm afraid is my first time using Greensock so I don't know how to do that. So if I have a parent div with a 500px width and I want to move an element 20% of the parent width, how can I do that? Link to comment Share on other sites More sharing options...
Share Posted March 13, 2017 Have a look at this pen See the Pen rywjQW by sgorneau (@sgorneau) on CodePen 3 Link to comment Share on other sites More sharing options...
Author Share Posted March 13, 2017 That's exactly what I was looking for! Thank you very much for your help Shaun Gorneau 1 Link to comment Share on other sites More sharing options...
Share Posted March 13, 2017 Keep in mind sonder, On Line 5 of your codepen HTML panel, in See the Pen JWJbzG by sonder15478 (@sonder15478) on CodePen . The width and height attributes are invalid on <div> tags. If you want to add width and height to a <div> you either need to add the width and height to the CSS rule you have for #cloud in the CSS panel or use the style attribute instead. <!-- INVAID - width and height attributes are invalid on div tag --> <div id='cloud' width="5%" height="auto"> </div> <!-- VALID - width and height should be on the style attribute instead --> <div id='cloud' style="width:5%;height:auto;"> </div> The only HTML elements that accept width and height attributes are: img input object video canvas embed iframe The xPercent and YPercent GSAP special properties are part of the GSAP CSSPlugin. https://greensock.com/docs/#/HTML5/GSAP/Plugins/CSSPlugin/ And here is the GSAP Blog post that goes over xPercent and yPercent. https://greensock.com/gsap-1-13-1 Happy Tweening! 3 Link to comment Share on other sites More sharing options...
Author Share Posted March 13, 2017 You're right Jonathan. That's because on my file I had images instead of forms and when I pasted my code to codepen, I forgot to delete the width and height. Also, do you know how can I fix this? https://greensock.com/forums/topic/16143-animated-waves-effect/ 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