Scrolltrigger until "divs top" hits "other div bottom" - Understanding Problem?

[tomekk]

Hi there

 

im trying to get an animation done. I did  create an simpler codepen.
Let me know, if something is not understandable or if I can give more details on that thing.


I will try to explain:

I do have a lottie animation, which is hooked up with scrolltrigger. Now I am trying to get the duration of that animation handled.

What i try to do is

1. start the lottie animation, when the image part title comes in. (solved)

2. end the animation, wenn the "image elements top" hits the "lottie elements bottom" (not solved)

 

Additional to that, I do pin the "lottie element" and i give an parallax animation (y: 100) to the "image element".

Do I miss something and its totally simple? or do I need to do more complex calculation and thats an advanced thing?

 

 

 

thanks in advance

Tomekk

See the Pen poQPNry by tomsquared_tomekk (@tomsquared_tomekk) on CodePen

[mvaneijgen]

Let's start with one question at a time. You hardly need more than one ScrollTrigger to get the desired effect you're after. I've removed your partOne ScrollTrigger and put all its logic in your Lottie ScrollTrigger, now you have control over the Lottie animation, while it is pinned and where it starts and ends. 

 

The start and end values are where you tell them to be. If you have some specific point in mind you could also set a fixed pixel value and then try to work backwards from there, how would you get this pixel value (dynamically)? Personally I like to get out pen and paper and just start drawing, it will probably get a lot clearer if you write out the logic instead of staring at code in the hope that it makes sense. 

 

One more thing. You should NEVER animate your trigger element. In your ScrollTrigger partTwo you have an animation that moves partTwo down, this means you move the trigger element, this is a no go. Just add an extra in or around partTwo -> partTwoExtraDiv and move that. 

 

Let's start from here. What one thing do you want what thing to do? And what is it doing now that is not correct?

 

See the Pen poQPewG?editors=0010 by mvaneijgen (@mvaneijgen) on CodePen