Streaming live at 10am (PST)

Problem with interaction on fixed object


#1

Hey there,
I'm trying to do the following:
I have this little guy

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 :frowning:

I've tried two things:
1. Other triggers, like hover - it worked, but it's useless.
2. 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?

Here is the public link

Thanks


#2

Hi @Orimanor,

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.

Regards,
Anna


#3

Thanks @sabanna! It Worked :smile:
You are right, i got confused...
Although at some point i tried this approach as well, but probably didn't do it right.


#4

This topic was automatically closed 60 days after the last reply. New replies are no longer allowed.