Clip path animation not working on ScrollTrigger

[amit95]

I have some cards to which I've applied a clip-path via css in order to hide them. Idea is that on scroll, these cards will reveal. 

 

However, with my current implementation, the cards do not appear once past the markers. Upon inspect, the opacity of the cards still remain as 0.

 

I've had a play around with toggleActions, but nothing I've implemented changes anything. I can't see any logic issues with my to() and from() either?

 

See the Pen MWXOaWQ by amit_rai95 (@amit_rai95) on CodePen

[Rodrigo]

Hi,

 

Just remove the opacity on the from() instance and set the opacity to 0 on your styles and it seems to work as you expect:

See the Pen JjZOYEq by GreenSock (@GreenSock) on CodePen

 

Let us know if you have more questions.

 

Happy Tweening!

[amit95]

Hi @Rodrigo - Applying opacity: 0 via CSS worked for me. But out of curiosity, would you know why applying the opacity within from() doesn't work?

[Rodrigo]

On 11/19/2022 at 2:00 PM, amit95 said:

But out of curiosity, would you know why applying the opacity within from() doesn't work?

The issue here is that you have two different GSAP instances, tweening the same property (opacity) at the same time:

gsap
  .timeline(/* config here */)
  .to(".clipPath-reveal article", {
    clipPath: "polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%)",
    opacity: 1 // OPACITY
  })
  .from(".clipPath-reveal article", {
    y: 150,
    scale: 0.8,
    opacity: 0 // OPACITY
  }, 0); // Tween starting at zero seconds, just like the previous one

On top of that you are running that particular code on a forEach loop, so basically you are selecting all the elements with ".clipPath-reveal article" on every loop (twice in the case of the codepen example). The first time the code takes the elements that have at that point a scale and opacity of 1 to 0.8 and 0 respectively. Then it runs again and does the same, although this time the animation takes the element from opacity 0 to opacity 0 so nothing happens, same with the y transform and the scale value. This is one of the most common issues we see around when it comes to from instances logic issues. You can read more about it here:

What you can do is find the article element of each section and tween that particular one:

gsap.utils.toArray(".clipPath-reveal").forEach(function (section) {
  console.log(section);
  const article = section.querySelector(".clipPath-reveal article");
  gsap
    .timeline({
      scrollTrigger: {
        trigger: section,
        start: "top center",
        end: "bottom center",
        markers: true,
        toggleActions: "play none play none"
      },
      defaults: {
        duration: 0.9,
        ease: "sine.inOut"
      }
    })
    .to(article, {
      clipPath: "polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%)"
    })
    .from(article, {
        y: 150,
        scale: 0.8,
        opacity: 0
      }, 0);
});

Also you can use jQuery's find method:

https://api.jquery.com/find/

 

Hopefully this makes things clearer. Let us know if you have more questions.

 

Happy Tweening!