louise000

Many days later I have realised that greensock accepts {x: "+=50vw"} etc.

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!

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); } }

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? https://codepen.io/louise-temple/pen/VwXLGxv?editors=1010

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 https://codepen.io/louise-temple/pen/GRxJXPW What am I missing?

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!

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.