Scrolltrigger animation in 3 states help

[michgh]

Hi guys,

I did an animation in 3 states base on scroll

1. Start- elements go to the top (Yellow)
2. Pin(Red)
3. End elements continue going up(Green)

 

But I'm getting a little jump when 3rd state starts. I really need help with this. I don't know if the way that I looped is correct or needs to be more specific for each container. I would love to hear your feedback

 

Thank You

Mich

See the Pen zYBWorX?editors=0010 by michgh (@michgh) on CodePen

[ZachSaucier]

Hey michgh and welcome to the GreenSock forums.

 

When debugging you should try to strip out everything that's not directly related to the bug that you're attempting to fix. That means the matchmedia stuff, other ScrollTriggers, and potentially unrelated HTML and CSS as well.

 

As for your question, you're making one of the most common ScrollTrigger mistakes: creating .to() logic issues. The simplest solution is to set immediateRender: false on the animation for your third ScrollTrigger:

See the Pen MWeNExO?editors=0010 by GreenSock (@GreenSock) on CodePen

 

Side notes:

• You use pixel values a whole lot. It's best to stick with responsive units as much as you can, only using pixel values when you need to. Doing so will help your development go faster and your end results layout better. 
• A ScrollTrigger start value of start: "+=540 +=740" is the same as start: "540 740".
• Blur filters don't have create performance and cause some jankiness when scrolling on your page.
• Your pin sections are really small (50 pixels). If someone is scrolling quickly then there's bound to be some jumpiness. I would recommend either making them larger or removing them.

Happy tweening!

[michgh]

Tank you so Much Zach you are a master!

Cool I'm changing all to %. To get a space btween containers? I Added a delay in the first animations but didn't solve it, I want to have a gap between animation, If you see I added a css style to make it longer(

 .container1 {

1. border: 1px solid red;
2. min-height: 600px;

}

but I don't think what I did is the right direction any suggestions? 

[ZachSaucier]

If I'm understanding you correctly, you should probably use margin-bottom to push the elements in the flow further down. That's a CSS issue. 

 

If you don't have a firm grasp of HTML and CSS I highly recommend learning more about them and how to lay out elements before trying to animate their positions.