Jump to content
GreenSock

Oleksandr07

Opacity animation on scrolltrigger has an error

Go to solution Solved by Oleksandr07,

Recommended Posts

Please tell me what I'm doing wrong. When you scroll the page from the beginning, the text gradually disappears. But when you scroll to the point where the first block of text is above the middle of the screen and refresh the page, all the text disappears and does not appear

See the Pen BawaWZN by Oleksandr07 (@Oleksandr07) on CodePen

Link to comment
Share on other sites

You're moving your trigger. I would suggest animating a child inside your trigger instead.

 

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

 

  • Like 2
Link to comment
Share on other sites

10 hours ago, OSUblake said:

You're moving your trigger. I would suggest animating a child inside your trigger instead.

 

And how to make the code text start the animation at 80% of the screen height? Now the animation of the first text starts at 80% of the screen height, and the animation of the last at 100% of the screen height

Link to comment
Share on other sites

Ok, I think that's because you've got the wrapper pinned too.

I'd probably approach it like this? Maybe this will work for you?

See the Pen abLGwpd?editors=1010 by GreenSock (@GreenSock) on CodePen

Link to comment
Share on other sites

34 minutes ago, Cassie said:

Ok, I think that's because you've got the wrapper pinned too.

I'd probably approach it like this? Maybe this will work for you?

In your example, the behavior of the elements is generally strange. When you refresh a page without a cache, the items disappear near the top of the screen. When you refresh the page for the second time, already with the cache, the items disappear in the middle of the screen

Link to comment
Share on other sites

I'm not seeing this at all and not sure how to recreate.

Could you do a screenrecord or demo somehow?

Link to comment
Share on other sites

29 minutes ago, Cassie said:

I'm not seeing this at all and not sure how to recreate.

Could you do a screenrecord or demo somehow?

Sorry, forgot to add screenshots

page without a cache - 7YTgx6s.jpg

 

page with the cache - fUhHG1l.jpg

Link to comment
Share on other sites

36 minutes ago, Cassie said:

I'm not seeing this at all and not sure how to recreate.

Could you do a screenrecord or demo somehow?

To watch live, open your example, refresh the page with hotkey F5 and see how it works. Then refresh the page with hotkeys Ctrl + F5 and see how it works. The result is different

Link to comment
Share on other sites

It's potentially because it's in an iframe? As I said, I can't replicate this though. Sorry.

Link to comment
Share on other sites

I've adding a line to log out the window height? Maybe that's a step towards working out what's going on?

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

  • Like 1
Link to comment
Share on other sites

1 hour ago, Cassie said:

I've adding a line to log out the window height? Maybe that's a step towards working out what's going on?

Thanks, it works well now

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.
×