Omarhab

ok. unfortunately it is very hard to provide a test env. however — the problem was mysteriously resolved by clearing cache. so there was no problem with compiling.

my angular app animations works fine precompiled. but after compiling with webpack. The `main.ts` file errors out after starting the universal server with r.TimelineMax is not a constructor I tried many things but nothing to report here because this problem did not seem to be caused by a change in the environment. It was working post compile at somepoint. Can anyone help me understand why compiling with webpack would cause this?

duh! thank you.

I'm doing that now. However, in my pen, scrollTop is only set once (on page load). Im trying to get a new scroll position every-time the animation runs.

Thank you for that... My project has all the changes suggested. Though I haven't updated everything in my pen — I did update the part that is not working. the tweens need to include current scroll position in the changing attributes. But they are always reflective of page load. I saw what was suggested from the other pen but mine is going a slightly different with this particular issue. Look how i am trying to set "top" on line 27. How can i modify the pen to get current scroll position each time?

this was a lot to digest... what are the simple instructions for using customEase plugin in angular or other module base environments? made file called CustomEase.min.js from http://s3-us-west-2.amazonaws.com/s.cdpn.io/16327/CustomEase.min.js?r=2 saved it in the node_module/gsap (will change later) now when i import (angular TS file) i get "Module not found: Error: Can't resolve 'TweenLite'" import CustomEase from "gsap/CustomEase.min"; results in Module not found: Error: Can't resolve 'TweenLite' Ive seen many threads but I can only get it to work through <script> tags

is onReverseComplete supposed to be used as a callback this.timeline.reverse(e => placeholder.remove() ); or a param? this.timeline.to(inner, 0.5, { background: '#dc0038', height: '100%', ease: Back.easeOut.config(1.7), onReverseComplete: (e) => placeholder.remove() }, 0.05); Neither is working for me

next challenge is how do i know when `timeline.reverse()` is finished. I need an onComplete on for reverse, not play

@ZachSaucier Lots of good info. Thank you! I was able to get this far in a fork https://codepen.io/ohabash/pen/oNvqQBm do you have any suggestions to make it better? (new to animation) Trying to accomplish this https://imgur.com/BhQ2X9F

In my codepen i am trying to accomplish the animation in this prototype https://imgur.com/BhQ2X9F my first question is — why are the width & height changes not animating in the codepen? Did you see the imgur animation? As a gsap newbie — How do you suggest accomplishing an animation like that? Do you think the grid has to be absolutely positioned?