Jump to content
Search Community

Percentage animation based on parent width

pati test
Moderator Tag

Go to solution Solved by Shaun Gorneau,

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,

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

  • Like 1
Link to comment
Share on other sites

`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

  • Like 2
Link to comment
Share on other sites

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

Keep in mind sonder,
 
On Line 5 of your codepen HTML panel, in your first 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! :)

  • Like 3
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...