I want him to appear only when the user scrolls 100% of the window and i want him to be fixed to the center left of the screen. To be fixed to the position, i made his position: fixed.
I’ve made an interaction:
Initial appearance was 0% opacity and move up by 40px.
Than I created an “On Scroll” trigger that will bring him to original place with 100% opacity.
Well… That didn’t work
I’ve tried two things:
Other triggers, like hover - it worked, but it’s useless.
Change the position to absolute - it also worked, but than he didn’t stick the the position i wanted.
Doesn’t scroll trigger work on fixed objects?
How can i achieve what i described?
I think you became confused by Scroll trigger interaction. It works, but you applied this trigger to the object, which does not really move or scroll. So you got the object, triggering animation - “this little guy”.
For making it work as you want, you have to apply interaction to some object/element which is moving while you scroll the mouse. It can be some “Home section”. Then it will work logically:
when Home section scrolls into view - the little guy is disappear
when Home section scrolls out of view on 100% - the little guy is appear
Sure you still will need the initial state for the little guy, but without any animation steps. And actual scroll interaction will have enabled option “affect different element” where you will choose little guy image class.
Hope my explanation is clear enough. If you have more questions, I will glad to help more.