From animation and scrolltrigger referencing the same element

[Zoker 0 Likes (Newbie)]

Hi there,

 

I want to use a fade in animation on multiple elements bound to a scrollTrigger.

My current code looks like this:

gsap.from('.animation-fadein', {
    scrollTrigger: {
        trigger: '.animation-fadein',
        start: "center bottom",
        end: "bottom bottom",
        scrub: 0
    },
    opacity: 0
});

For one element this works fine, but when applying this class to multiple elements, it does not work anymore. 

I think the issue is, that the trigger does not use the same element as the from function.

 

I also tried to use something like this for the trigger property, but it does not seem to work. 

 

How can I bind the trigger to the same element as the from animation? Do I need to loop trough all elements?

See the Pen MWOywyr by Zoker (@Zoker) on CodePen

[mikel 4,782 Likes (Superhero)]

Hey @Zoker,

 

try a separate scrollTrigger for each element:

 

gsap.utils.toArray('.fadein').forEach(function(part) {
 
  gsap.from(part, {
    scrollTrigger: {
      trigger: part,
      start: "center bottom",
      end: "bottom bottom",
      scrub: 0
    },
    opacity: 0
  });
  
});

 

Happy tweening ...

Mikel