Jump to content
Search Community

Show text block

tsarma test
Moderator Tag

Go to solution Solved by Rodrigo,

Recommended Posts

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

Link to comment
Share on other sites

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.

 

Link to comment
Share on other sites

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!

Link to comment
Share on other sites

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?

Link to comment
Share on other sites

  • Solution

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!

  • Like 1
Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.
×
×
  • Create New...