Show text block

[tsarma 0 Likes (Newbie)]

Hi there, 

I am stuck, I am trying to animate a text block (red colored here) within a pinned container. Inside this pin container, I've also a video playing which is also linked to the scroll bar with ScrollTrigger.

 

What I wanted to achieve is to show the text, with controlled time and duration. Like is it done here on this website bit.ly/3M0ce8U. At the moment it just plays the timeline and red text blocks are faded in for the duration of the timeline. 

 

How can I achieve this effect, thanks in advance for any help.

 

 

 

 

 

See the Pen dygjqLB by tsarma (@tsarma) on CodePen

[Rodrigo 5,889 Likes (Superhero)]

Hi,

 

You might want to check this particular thread:

It's just about creating a single timeline to control everything and use the position parameter for the texts animations.

 

Hopefully this is enough to get you started.

Happy Tweening!

[tsarma 0 Likes (Newbie)]

Hi @Rodrigo

Thank you for looking into my case and for the suggestion.
I've tried to adapt your solution with a single timeline, here 

See the Pen dygqLmq by tsarma (@tsarma) on CodePen

How can make text disappear after a certain time?
How can I set/change the position parameter dynamically to an individual text box?

 

Like in my example website  bit.ly/3M0ce8U, in the end, I wanted to create a few such blocks of video and text on the same page.

 

[Rodrigo 5,889 Likes (Superhero)]

Hi,

 

This is just about the logic in the loop. Maybe this is what you're looking for:

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

 

Basically I check if we're not in the first loop (if(index)), that means any index but zero. If that's the case I hide the previous text and then show the current one. Then in the else block that runs only when index is zero I just show the text (first one). Finally after the loop I hide the last text:

texts.forEach((text, index) => {
  if (index) {
    tl
      .to(texts[index - 1], {
      opacity: 0
    }, "+=0.5")
      .to(text, {
      opacity: 1
    });
  } else {
    tl.to(
      text,
      {
        opacity: 1
      },
      "+=0.5"
    );
  }
});
tl.to(texts[texts.length - 1], {
  opacity: 0
}, "+=0.5")

Hopefully this helps.

Happy Tweening!

[tsarma 0 Likes (Newbie)]

Hi @Rodrigo

Thank you once again. Your solution works fine. 
Fade-in and fade-out time is OK. Is there a way to stay/keep the text on display: block state a little longer? Maybe with delay or position parameters, but I don't know how. Or is it dependent on the length of the end parameter?

[Rodrigo 5,889 Likes (Superhero)]

Hi,

 

I just updated the codepen in order to add a time constant that would make the elements stay longer:

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

 

Basically this is about the position parameter. I suggest that you read about it and see how it works in order to get a better grasp and understand what's happening in the code, but basically is increasing the amount of time between the opacity animations.

 

Hopefully this helps.

Happy Tweening!

[tsarma 0 Likes (Newbie)]

Thank you @Rodrigo for your help. Now I get the idea.