Need help on tutorial with Scroll interaction affecting a different element

Publishing help General
1

I need help with Example 2 on the https://interactions.webflow.com/

Is there an example walk through on how to achieve that interaction (as with the purple monkey? Tried to make it work on an element on the site I’m working on but unfortunately I don’t seem to get the hang of it.

Here is Public link Webflow - IX template 01

Help is appreciated.

2

Hi Is there anyone who can help me over this, As I need to finish that quickly.

Thanks
Simran

4

Hi can you explain it a bit further to me?

On what page is your experiment, and at what point are you blocked?

That interaction is one of the basics, It’s very important to master it and fully understand it. Let’s take time to make sure you become interaction-fluent :slight_smile:

If your target eement has a combo class (more than one class name) this is maybe what blocks you, and you maye find help here: http://inb4.webflow.io/posts/affect-an-element-with-a-combo-class

5

Hi @vincent thanks for reply, yeah I did lots of another interactions too, which are working fine and its not combo class. I have to examples of this with 2 different pages where I tried. on this Public link Webflow - IX template 01 page names are “Scroll Affecting A Different Element and 2 Scroll Affecting A Different Element” you can see those 2 pages there and let me know I did I missed.

Thanks Again
Simran

6

OK

You have display block in 750ms and that can’t do any effect. If you want a progressive apperance then use opacity instead.

Also put display block before the move.

The reason the object doesn’t appear is the threshold. 60% on appearing, 60% on disappearing, meaning the two overlap… the object starts to disappear before it appears. keep both values under 40%.

7

okay great it works now, only thing that appears a bit late and hide a bit earlier, can you please tell me why. and not come and go smoothly.

Again Thanks for your help

8

Probably because of your 750ms actions… try do this:

To start with, make your targeted object opacity zero AND display none

then interaction as follow

  1. display block 0ms
  2. opacity 100% + motion 350ms

then hide

  1. opacity zero + motion 250ms
    2 display none 0ms
9

Hmm tried it, and it is improved, now only thing is it not come and go smoothly.

10

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