animate to the original position without knowing the value

[usr1931990]

How can I animate back to the original values without knowing the value? 

Lets say my code looks like this:

gsap.set('div', {
   top: Math.floor(Math.random() * 140) + "%",
   left: Math.floor(Math.random() * 140) + "vw",
 });

 

Now in another function I just want to animate this div back to its original value (without knowing the original value) and remove the inline styles when the animation is done. 

[PointC]

I'm not sure I follow the question, but you could store those values in a variable, use a yoyo tween, reverse the tween/timeline, set the progress() to 0 etc... 

 

Maybe a demo would help get some better answers for you.

 

[usr1931990]

@PointC sorry, this is what I'm trying to do!

I know that I can use a timeline and reverse it, but what if its inside an each function?

 

      $(app.$item).each(function() {
        gsap.set($(this), {
          opacity: 0,
          scale: 0,
          top: Math.floor(Math.random() * 140) + "%",
          left: Math.floor(Math.random() * 140) + "vw",
        });
        gsap.from($(this), 2, {
          opacity: 0,
          scale: 0,
          top: ????,
          left: ????,
          ease: "cubic.inOut",
        });
      });

 

[PointC]

Sorry, I'm still lost. You want to grab the top/left positions from the set() and animate the elements from() those positions? That won't do anything. If the random position for top is 140 and then you animate from 140, you'll have an animation that goes from 140 to 140. See what I mean?

 

Do you have a demo for what you'd like to happen?