Jump to content
Search Community

GSAP ScrollTrigger makes div disappear

Tedev test
Moderator Tag

Go to solution Solved by PointC,

Recommended Posts

Hello there!

Recently I started experimenting with GSAP and immediately fell in love with it.
Ever since, I've been trying to understand the basics, and feel like I'm getting along well.

That is, until today.
I am creating a webpage where I include GSAP to handle the animations.

On this page I have a scrollTrigger that worked well scrolling down, but scrolling back up it returned something unexpected.

I have searched for an answer to this all day, going through the forum, looking at the 'Most Common Mistakes' (including the scrollTrigger ones), and I might be looking too hard to the point I might've read the answer but can't correlate it to my issue.

My question is: Why does the top element disappear? And how can I make it so it doesn't?

 

 

Thanks in advance,
Tedev

See the Pen jOZayoz by tedev (@tedev) on CodePen

Link to comment
Share on other sites

  • Solution

Hi @Tedev :)

 

Welcome to the forum.

 

I'm pretty sure that's caused by the ScrollTrigger tween setting its starting value to zero on that first element in the from 0 opacity tween. So, you reverse the ScrollTrigger tween and it goes back to zero. The other three elements in that group of four have their starting opacity set to 0. If you flip one of the blue panels with the red one, you'll see the same thing happen to the first blue panel.

 

Fixes: 

  1. Remove the opacity tween in your ScrollTrigger because it's not doing anything anyway.
  2. Switch the order of the tweens 
  3. Call a function containing the ScrollTrigger tween when the first opacity tween completes so the starting values are correct.

 

Here's a fork with #2.

See the Pen 40f3539166669a535bddf0860dc34ace by PointC (@PointC) on CodePen

 

Happy tweening and welcome aboard.

:)

 

  • Like 3
Link to comment
Share on other sites

3 minutes ago, PointC said:

I'm pretty sure that's caused by the ScrollTrigger tween setting its starting value to zero on that first element in the from 0 opacity tween. So, you reverse the ScrollTrigger tween and it goes back to zero. The other three elements in that group of four have their starting opacity set to 0. If you flip one of the blue panels with the red one, you'll see the same thing happen to the first blue panel.

 

Yup, I think so too. When things are being set up, the opacity of that top element will be 0, because you have a .from tween from opacity 0 prior to the ScrollTrigger being set up. When the ScrollTrigger reverses onEnterBack then the tween will go to that recorded opacity of 0.

 

5 minutes ago, PointC said:

Fixes: 

  1. Remove the opacity tween in your ScrollTrigger because it's not doing anything anyway.
  2. Switch the order of the tweens 
  3. Call a function containing the ScrollTrigger tween when the first opacity tween completes so the starting values are correct.

 

or 4. add immediateRender: false to the ScrollTriggered tween

 

See the Pen poadPpg by akapowl (@akapowl) on CodePen

 

  • Like 2
Link to comment
Share on other sites

Hi there Craig!

 

Your explanation was loud and clear!


The opacity not doing anything is because I took this snippet after trying to fix it.
It didn't have 'x: -1000' in it initially, so the opacity actually does something.

 

The third solution is something I'll bump into later in exploring GSAP.

 

But you fixed my issue, it works perfectly on my website now.

 

Thank you, and you'll definitely hear from me again, be it in form of a question, or helping someone out once I fully understand GSAP!

  • Like 2
Link to comment
Share on other sites

Actually, I would probably go with Craig's suggestion N° 3...

 

8 minutes ago, PointC said:

Call a function containing the ScrollTrigger tween when the first opacity tween completes so the starting values are correct.

 

...because with both of our pens you will notice that when you start scrolling immediately during the initial fading in of elements, things will get wonky later on. That's just how things are conflicting between time- and scroll-based tweens on same properties of the same elements, so you'll just have to find some logic to prevent those conflicts.

  • Like 2
Link to comment
Share on other sites

Thanks for the follow-up replies!
The more I understand of this, the better.

 

I will be going for the function solution as soon as I understand it.
Because I also noticed what you mentioned on my own website, akapowl.

 

First thing tomorrow, haha.

  • Like 2
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...