<div class="container">
  <div class="to box green"></div>
  <div class="from circle blue"></div>
</div>
body {
  display: flex;
  align-items: center;
  justify-content: space-around;
  min-height: 100vh;
}

.container {
  display: flex;
  align-items: flex-start;
  justify-content: space-around;
  flex-direction: column;
  border: solid 2px white;
  width: 70vw;
  height: 80vh;
}

.blue {
  opacity: 0;
  align-self: flex-end;
}
let parent = document.querySelector('.container')
gsap.defaults({
  duration: 2, ease: "power2.inOut"
})

// animate across a parent. Easy enough, but it doesn't update when the screen size changes
let tween = gsap.to('.green', {
  x: () => parent.clientWidth,
  xPercent: -100
})

// we can update the tween after the page has resized
function callAfterResize(func, delay) {
	let dc = gsap.delayedCall(delay || 0.2, func).pause(),
		handler = () => dc.restart(true);
	window.addEventListener("resize", handler);
	return handler; // in case you want to window.removeEventListener() later
}

// but it feels a bit messy
callAfterResize(() => {
  tween.invalidate().restart().progress(1).pause()
}); 

// A better approach is to put the element in the end position and use a 'from' tween to animate 'from' that transformed position

// avoid FOUC by setting the opacity 0 in CSS. Careful to make sure you're falling back to visible content for users without JS!
// https://greensock.com/fouc/
gsap.set('.blue', {opacity: 1});

gsap.from('.blue', {
  x: () => -1 * parent.clientWidth,
  xPercent: 100
})
Run Pen

External CSS

  1. https://codepen.io/GreenSock/pen/gOWxmWG.css

External JavaScript

  1. https://unpkg.co/gsap@3/dist/gsap.min.js
  2. https://unpkg.com/gsap@3/dist/CSSRulePlugin.min.js
  3. https://assets.codepen.io/16327/CustomBounce3.min.js
  4. https://assets.codepen.io/16327/CustomEase3.min.js
  5. https://assets.codepen.io/16327/CustomWiggle3.min.js
  6. https://assets.codepen.io/16327/DrawSVGPlugin3.min.js
  7. https://unpkg.com/gsap@3/dist/Draggable.min.js
  8. https://unpkg.com/gsap@3/dist/EaselPlugin.min.js
  9. https://unpkg.com/gsap@3/dist/EasePack.min.js
  10. https://assets.codepen.io/16327/Flip.min.js
  11. https://assets.codepen.io/16327/GSDevTools3.min.js
  12. https://assets.codepen.io/16327/InertiaPlugin.min.js
  13. https://assets.codepen.io/16327/MorphSVGPlugin3.min.js
  14. https://unpkg.com/gsap@3/dist/MotionPathPlugin.min.js
  15. https://assets.codepen.io/16327/MotionPathHelper.min.js
  16. https://assets.codepen.io/16327/PhysicsPropsPlugin3.min.js
  17. https://assets.codepen.io/16327/Physics2DPlugin3.min.js
  18. https://unpkg.com/gsap@3/dist/PixiPlugin.min.js
  19. https://assets.codepen.io/16327/ScrambleTextPlugin3.min.js
  20. https://unpkg.com/gsap@3/dist/ScrollToPlugin.min.js
  21. https://unpkg.com/gsap@3/dist/ScrollTrigger.min.js
  22. https://assets.codepen.io/16327/SplitText3.min.js
  23. https://unpkg.com/gsap@3/dist/TextPlugin.min.js
  24. https://assets.codepen.io/16327/ScrollSmoother.min.js
  25. https://unpkg.com/gsap/dist/Observer.min.js