gsap.to, responsive positions / percentages?

[louise000]

I'm teaching some basic GSAP to some design students who are not javascript whizzes, yet.

Is there a way to perform the very simple:

 

gsap.to("img.myImage", {x: '400px'});

but in terms of the browser window?

e.g. something like:

gsap.to("img.myImage", {x: 'width'});

or

gsap.to("img.myImage", {x: 'width/2'});

or

gsap.to("img.myImage", {x: '50%'});

 

I saw some solutions that require writing longer javascript functions but that is jumping quite a ways ahead for beginners. 

 

Definitely seems like there would be a benefit to be able to begin the GSAP learning process from a responsive footing in a simple way. 

[mvaneijgen]

Hi @louise000 welcome to the forum!

 

Yep, this is fairly simple.

 

In your pseudo code you have the following: `width`, `width/2` and `50%`, the width of what? In code you have to explicitly tell what the browser must do, so you would have to get the browser window first and get its `width`, luckily this is build in to javascript with `window.innerWidth`.

 

See my example below. The property `x:` wants a number and in Javascript '400px' is a string, GSAP is smart and will figure out you want to move it 400 pixels, but you can also do `x: 400` which will be the same thing. There is also a property for percentages called `xPercent:` and  `xPercent: 400`, will move something `400%`.

 

For now it's fine, but in the future be sure to add a minimal demo, this will save us time helping you instead of us having to create a demo for you, also just making demo's usually results in people figuring out their own problems, so it's a great way to learn.

 

See the Pen yLKBqGR?editors=1111 by mvaneijgen (@mvaneijgen) on CodePen

[louise000]

Thanks! I'm coming from p5js land where everything is incredibly simplified and `window.innerWidth` is expressed as `width`.

 

I'm still acclimatizing to this blended GSAP model of really simplifying some things (great for beginners), yet using regular full blown javascript for some other things (requires pre-req training to be accessible). A work in progress.

 

Your model is the simplest version so far, thank you!

 

If I have enough knowledge to build a demo of something I don't know, I certainly will in the future!

 

[mvaneijgen]

Cool, glad to help!

 

I think that is a bit of a miss understanding, a demo with code that is not working are the best once! Then anyone can see what your thought proces is and all they need to do is update some values to help you out. With out one anyone that wants to help first needs to put in the time to create a demo, now I had 10 minutes to spare and whipped up a codepen, but keep in mind that most of the contributors here are volunteers and help others for free.

[louise000]

Many days later I have realised that greensock accepts

 

{x: "+=50vw"}

etc.