two animations in one pin element

[StopLogic]

Hello! I got a problem: I created a block that is a trigger for two child blocks. When scrolling the page, the parent block is pinned first until the animation of the first child block ends, and then again until the animation of the second child block ends. In this situation, when the page is resized, the parent block moves down to its own height each time. How to properly organize this animation?

[ZachSaucier]

Hey StopLogic and welcome to the GreenSock forums. Can you please create a minimal demo of the situation using something like CodePen for us to take a look at?

[StopLogic]

Thanks for your fast answer, and sorry for my bad english! There is my codepen example: 

See the Pen NWbxeYy by stoplogic (@stoplogic) on CodePen

 

in my project, the double-pined-parent, every time the screen resolution is changed, goes down to its own height, leaving the pinspaser in its place. That is, if I change the resolution 10 times - a double-pined-parent with a height of 1000 pixels will go down by 10,000 pixels. If I completely remove the animation script for one of the blocks, the problem disappears

[ZachSaucier]

Your English is good! I understood you, it's just hard to help with these sorts of things without being able to edit the code.

 

A few notes:

• Just use the x property instead of translateX.
• pinSpacing: true is the default so you can leave it out.
• One of your issues is that the end location of both of your ScrollTriggers is the same even though you want them to be sequenced. That's no good. Maybe you want end: "+=1500" instead?

I can't seem to recreate the issue using the CodePen that you shared. Are you able to reproduce the issue with it? If so, are there any special instructions for how to recreate it (such as resizing the viewport at a given time)?

[StopLogic]

5 minutes ago, ZachSaucier said:

Your English is good! I understood you, it's just hard to help with these sorts of things without being able to edit the code.

 

A few notes:

• Just use the x property instead of translateX.
• pinSpacing: true is the default so you can leave it out.
• One of your issues is that the end location of both of your ScrollTriggers is the same even though you want them to be sequenced. That's no good. Maybe you want end: "+=1500" instead?

I can't seem to recreate the issue using the CodePen that you shared. Are you able to reproduce the issue with it? If so, are there any special instructions for how to recreate it (such as resizing the viewport at a given time)?

unfortunately, I cannot reproduce the problem in codepen, but I can link to my project so that you can see the error in this particular example. Can I send a link to you personally to keep your privacy?

[ZachSaucier]

It's pretty hard to debug on a live webpage when we're not able to edit the code for yourselves. It'd be better for you to try and reproduce the issue on CodePen. That will likely help you diagnose the issue in the process.

 

If you really try hard to reproduce it and still cannot figure it out you can message me a minimal form of your code in a format where I can run it locally on my computer.

[StopLogic]

On 2/6/2021 at 12:10 AM, ZachSaucier said:

It's pretty hard to debug on a live webpage when we're not able to edit the code for yourselves. It'd be better for you to try and reproduce the issue on CodePen. That will likely help you diagnose the issue in the process.

 

If you really try hard to reproduce it and still cannot figure it out you can message me a minimal form of your code in a format where I can run it locally on my computer.

I promised that when I find a solution, I will write about it here. After a long search for the cause of the strange behavior of the blocks, it turned out that you just need to install the npm gsap module again. After reinstallation, everything worked as it should. Thank you again for your help! Gsap is like a Hogwarts diploma because it allows you to work magic!))