[Angular - Webpack - r.TimelineMax is not a constructor]

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.

[Angular - Webpack - r.TimelineMax is not a constructor]

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?

 

 

[Grid to fullscreen]

duh! thank you.

[Grid to fullscreen]

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.

[Grid to fullscreen]

Thank you for that... My project has all the changes suggested. Though I haven't updated everything in

See the Pen oNvqQBm by ohabash (@ohabash) on CodePen

 — 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?

[Photo Cube Animation]

this was a lot to digest... what are the simple instructions for using customEase plugin in angular or other module base environments?

 

1. made file called CustomEase.min.js from http://s3-us-west-2.amazonaws.com/s.cdpn.io/16327/CustomEase.min.js?r=2
2. saved it in the node_module/gsap (will change later)
3. 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

[Grid to fullscreen]

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

[Grid to fullscreen]

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

[Grid to fullscreen]

@ZachSaucier Lots of good info. Thank you! I was able to get this far in a fork 

 

See the Pen oNvqQBm by ohabash (@ohabash) on CodePen

 

do you have any suggestions to make it better? (new to animation) Trying to accomplish this https://imgur.com/BhQ2X9F

[Grid to fullscreen]

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?

See the Pen YzKajLz by ohabash (@ohabash) on CodePen