Basic ScrollTrigger effect hard to get

[tailbreezy]

Hello,

 

This is somewhat basic functionality that I am after. Easily done with intersection observer.

 

Once a single text (e.g .line) is or gets within the viewport I want to play an animation.

The catch which is not really a catch is that I want the one that are already within the viewport to play immediately.

 

Spend a few hours already, though I am starting to run in circles/

 

I am not entirely sure why my markers get moved to from position when I am using fromTo tween.

 

Also more importantly why I cannot set position on the viewport when using the element as a trigger.

trigger:viewport

start: ' top top' // here second top is the viewport

 

trigger: element

start: ' top top' // here second top is the trigger top (which is understandable and appreciated in other cases, but I cannot set viewport here)

 

So the questions are?

1) Why my markers move.

2) How to watch for viewport intersection when using element itself for trigger.

See the Pen 6de072ce70f07be75fdb166bde680b39?editors=1010 by dadacoded (@dadacoded) on CodePen

[GreenSock]

I assume you want something like this, right? 

document.querySelectorAll('.line').forEach( line => {
  let inside = line.querySelector('.inside');
  
  ScrollTrigger.create({
    trigger: line,
    start: 'top 80%',
    markers: true,
    animation: gsap.fromTo(inside, {yPercent:200}, {yPercent:0, duration: 1})
  });
});

 

[ZachSaucier]

It's much more standard to set it up this way:

document.querySelectorAll('.line').forEach( line => {
  const inside = line.querySelector('.inside');
  
  gsap.from(line, {
    yPercent: 200,
    scrollTrigger: {
      trigger: line,
      start: 'top 80%',
      markers: true,
    }
  });
});

 

[tailbreezy]

Thank you for chiming in, Jack.

 

So we have 5 lines.

Two of those lines "Hello" and "to" are immediately visible within the viewport. I want those to play immediately.

The rest are contingent on actually scrolling a little to get to them.

 

On the samples provided, all lines are pushed outside the viewport due to "from yPercent: 200".So none animate immediately and none are even visible before scroll.

 

[tailbreezy]

This is the effect. Super basic, but I fail to achieve it with ScrollTrigger.

 

See the Pen 1b4cc776eaa24ffb6e57164002c9e9ce?editors=1010 by dadacoded (@dadacoded) on CodePen

[ZachSaucier]

Ah, Jack targeted the wrong element. Target the inside instead for the tween part:

document.querySelectorAll('.line').forEach( line => {
  const inside = line.querySelector('.inside');
  
  gsap.from(inside, {
    yPercent: 200,
    scrollTrigger: {
      trigger: line,
      start: 'top 80%',
      markers: true,
    }
  });
});

 

[tailbreezy]

I knew this was super basic. It turns out a simple switching of 'top' to percent value was what I was after.

Also Jack posted it in the very first post, but somehow I misread it and tried the code from his second post.

 

Thank you Zach & Jack