when section enter the viewport

[Lovestoned]

Hi

I want to animate .text2 div when 10% of .panel2 enter the viewport from bottom...I tried to give start:"top 90%" and "top 10%" to tl2 scrolltrigger but there is something wrong...I think I could not understand how scrolltrigger works yet...but if anyone can help me I'll be pleasure...I am confused...

See the Pen ZEBZbMd by ersenturgut (@ersenturgut) on CodePen

[ZachSaucier]

8 minutes ago, Lovestoned said:

I want to animate .text2 div when 10% of .panel2 enter the viewport from bottom

To do this, use this structure:

gsap.to(".text2", { // Animate .text2
  // Whatever properties to animate here
  scrollTrigger: {
    trigger: ".panel2", // make .panel2 the trigger
    start: "10% bottom", // 10% of .panel2 enters the bottom of the viewport
    // Whatever other ScrollTrigger vars you need here
  }
});

I encourage you to go back through the ScrollTrigger documentation and video. 

[Lovestoned]

Dear Zach

thanks for your reply...I am trying to learn it...just confused...at the beginning of my first animation I asked a question and tailbreezy suggested to make my animations in timeline...but now I learned what I have to do...thanks again...

[ZachSaucier]

It's fine to use a timeline if you'd like. But if you only have one tween in it there's not any real point.

[Lovestoned]

one more question about this : in your answer start is "30% bottom" when scroll down...is it possible to give second start value when scrolling back to up for example "50% bottom" ???

 

[ZachSaucier]

If you need different start and end points, usually it's best to use two ScrollTriggers instead. More about that is covered in the most common ScrollTrigger mistakes article that I know we've linked you to before.