Jump to content
Search Community

set the scrollAction opacity to 0 and 1 once the scrollTrigger of element leaves on it div.

Xenex122 test
Moderator Tag

Go to solution Solved by akapowl,

Recommended Posts

In my last question I feel bad about asking about it but I think I have better question. So in here as you see in codepen. I have toggleActions which is 

onEnter: function () { 
                      console.log("enter");
                    },
                    onLeave: function (){ 
                      console.log("leave")
                      
                    },
                    onEnterBack: function() { 
                      console.log("Enter Back")
                      
                    },
                    onLeaveBack: function() { 
                      console.log("All the way back");
                      
                    },
                    toggleActions:"play complete restart play",

(Don't mind the sections2 just only the sections1) What I want to happen as you can see in codepen when it reach the midpoint where I have the black lines it will make the opacity:1 and when it leaves to the scroll-end it will go back to opacity:0.1, how can I achieve? I already tried the toggle Actions but it doesn't work...  Anyway could make help about this for me  thanks ?

See the Pen MWQmmbV by myth-vince (@myth-vince) on CodePen

Link to comment
Share on other sites

If I understand you correctly, the problem is that you're animating the trigger elements on the y-axis which is generally a bad idea because it messes with the start/end values. ScrollTrigger is highly optimized for performance because scrolling is so performance-sensitive, so it doesn't constantly check with a .getBoundingClientRect() on every tick, for example. That would be terrible for performance. Instead, it does all of its calculations ahead of time and figures out where the intersection points are so that when you scroll, it simply has to compare 3 numbers (significantly faster).

 

Normally it can make internal adjustments if the tween associated with that ScrollTrigger is the one doing the moving, but you're actually using an entirely different tween for that so there's no way for the other one to know that you're moving the trigger element out from under where the calculated start/end values were. 

 

You'd have to compensate the start/end ScrollTrigger positions based on how far the other tween is moving the trigger elements. Math :)

 

Good luck!

  • Like 1
Link to comment
Share on other sites

  • Solution

 

Edit

Although this was marked as the solution and appears to be working in this specific scenario, using containerAnimation as suggested below is not the way to handle something like that. Please see this other thread for a proper suggestion of how to handle things in a scenario like that.

 

--------------------

 

I see you already do have the containerAnimation property in there @Xenex122

 

You should be able do do what you want with the help of that but there will be some things you'll have to consider.

 

If you just aplly it to those STs in the forEach loop(s) you will notice the markers having a horizontal orientation - you can ommit that by just setting horizontal to false there; now they will have the vertical orientation you'd need (and thus should the STs you are creating).

 

Next thing is, you are mixing toggleActions with scrub - which doesn't work. Those are two different methods for how to let the ST control an associated tween/tl. If you set both, scrub will always take control. Now since you have a duration on your tweens, I suppose you want to use toggleActions - but it seems you just copy pasted those from somewhere, so you might want to read up on how those work.

 

toggleActions String - Determines how the linked animation is controlled at the 4 distinct toggle places - onEnter, onLeave, onEnterBack, and onLeaveBack, in that order. The default is play none none none. So toggleActions: "play pause resume reset" will play the animation when entering, pause it when leaving, resume it when entering again backwards, and reset (rewind back to the beginning) when scrolling all the way back past the beginning. You can use any of the following keywords for each action: "play", "pause", "resume", "reset", "restart", "complete", "reverse", and "none".

 

 

 

Now if you changed just those things, you should notice the left side already working - for the right side you will have to inverse your thinking a bit though, since the elements do come from the opposite direction. I just swapped out the vaalues of the start and end (in cmparison to the values for the left side) and it appears to be working quite well already. I also decreased the duration of the tweens to 0.25, because 3 seconds felt a bit long.

 

I hope that will help get a clearer picture. Happy tweening!

 

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

 

  • Like 1
Link to comment
Share on other sites

2 hours ago, Xenex122 said:

Btw can I ask sir what do you mean about ST ??
actually nvermind i lost it..it was scrollTrigger hahahha

 

Yep, ST was just short for ScrollTrigger :) 

 

 

 

2 hours ago, Xenex122 said:

I actually posted another question about this cause I've feeling that no one will reach it out to me..but thanks now I have it.. Thank you very much sir.

 

It is nobody's intention to not answer somebody. Except for the Admins who do have a great deal of work with crafting the tools, maintaining the website, creating learning-content etc. etc. besides answering questions here, it is widely volunteers helping people in this forum, who also do have work to do outside of it - so if it takes a bit longer for someone to reach out to you, please don't create duplicates but instead be a bit patient.

 

Close to not a single question has remained unanswered (at least from what I can tell since I've been around here), but it simply just is not possible to reply to everybody sometimes even within one day. Creating duplicates of the same question will only make the helpers lose overview in the end, and things might even take up more time.

 

Like now, I'm not sure which other thread of yours you are referring to. This one...?

 

 

 

 

... or this one?

 

 

 

 

To answer the question why your markers are moving up there; it is simply just because you are scrolling down and that is the native flow of things and ScrollTrigger's markers will not be somehow stuck to the trigger element (because that is just not how it works unless you were to use the containerAnimation property as you can probably see in the pen in my post above) but follow that native flow.

 

I linked this thread here in your other threads to keep things in one place.

 

  • Like 3
Link to comment
Share on other sites

sir @akapowl how to do it when I applied a top section on it because it doesn't work properly.

When I put a section on top of it the animation of it is not working but when you remove it.. It will works. Can you notice the error here big thanks sir 

:):)

Here is the codepen.. Please help me. 

 

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