Percentage animation based on parent width

[pati 4 Likes (Newbie)]

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

[Shaun Gorneau 1,503 Likes (Superhero)]

`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

[pati 4 Likes (Newbie)]

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? 

[Shaun Gorneau 1,503 Likes (Superhero)]

Have a look at this pen

 

See the Pen rywjQW by sgorneau (@sgorneau) on CodePen

[pati 4 Likes (Newbie)]

That's exactly what I was looking for! Thank you very much for your help Shaun Gorneau

[Jonathan 5,176 Likes (Superhero)]

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!

[pati 4 Likes (Newbie)]

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/