[gsap.to, responsive positions / percentages?]

Many days later I have realised that greensock accepts

 

{x: "+=50vw"}

etc.

[reverse not working]

Thank you! I think this will help someone! 

 

In my case, this time, I am setting up this specific structure so that I can populate it with more complex timelines but I always really appreciate to see the brevity of thinking of more senior developers, thank you!

[reverse not working]

Thank you!

 

I guess when I read the documentation for the timeline .reverse method, when it said

 

//reverses playback from the very END of the animation:
tl.reverse(0);

I thought it would trigger the reverse at the end of the play just by passing "0".

 

 

////

 

I'll just leave this code snippet here for any other newbies who are still figuring out arrow functions.

function slideDown(){
  let myAnim =  gsap.timeline()
  let balloon = document.querySelectorAll("img")
                myAnim.to(balloon, {y:200, stagger:0.2});
  myAnim.play().then(myReverse);
  
  function myReverse(){
    myAnim.reverse(0);
  }
}

 

[reverse not working]

Thank you! Ach I can't believe I didn't notice that I was writing the tween to gsap instead of my variable.

 

There is a related problem though, why can I not get it to play first and then reverse?

 

See the Pen VwXLGxv?editors=1010 by louise-temple (@louise-temple) on CodePen

 

[reverse not working]

Hello, I'm trying to create the sketch shown in the demo with a very simple timeline that is activated on a button click and then reverses.

 

The reverse command does nothing as far as I can see.

 

I tried to do the same thing here without any buttons, but reverse also does not work here

See the Pen GRxJXPW by louise-temple (@louise-temple) on CodePen

 

What am I missing?

 

See the Pen VwXLGxv by louise-temple (@louise-temple) on CodePen

[gsap.to, responsive positions / percentages?]

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!

 

[gsap.to, responsive positions / percentages?]

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.