[TweenMax is blocking Jquery]

This is incredibly helpful. Thank you very much!

 

@Shaun Gorneau

 

Now I am doing it all in GSAP  But I do have another question for which I have another pen here:

 

See the Pen GwzeYW by christian-van-eberlein (@christian-van-eberlein) on CodePen

 

 

This time we have:

1. Text moves up

2. 2 blur effects follow

3. all while parallax is activated

 

problem:

I hope you can reproduce it, but it seems to

1.sometimes run a bit glitchy and jump, as if the parallax and blur might be affecting each other (i guess blur is a performance heavy calculation?);

2.sometimes the blur freezes until I scroll;

3.sometimes the last blur effect never happens, it never returns sharp.

4.the first blur effect seems to be unaffected by the ease;

 

It must be my approach, so I a wondering if maybe there should be another timeline or something?

 

[TweenMax is blocking Jquery]

I have two javascript elements here:

1. The green box moves upwards and stops. - Done with GSAP TweenMax

2. The green box parallaxes as you scroll down - Done with Jquery

 

The problem here is: 

   when you start scrolling before GSAP is finished, the parallax doesnt work. Once the animation is over, Jquery makes the box jump into its intended parallaxed place. This can be replicated by scrolling down a bit and then wait for the animation to finish and then scroll a bit more to make jquery set in.

 

What I want:

  I want them to work at the same time

 

Thank you very much.

See the Pen MzLvqa by christian-van-eberlein (@christian-van-eberlein) on CodePen