Streaming live at 10am (PST)

Some interactions issues


#1

Hello.

This is my read-only link: https://preview.webflow.com/preview/folloze-developmentdev17?preview=50c199c0fe462c3ab9f231e401f29909

I have 2 interaction issues in my current project:

  1. in the home page, inside “product tour” section I have a slider which i’m trying to create an interaction for, in which each time a slide has changed, the corresponding above icon will change its background color and image. I don’t why the image keeps changing back to the original image.

  2. Also in the home page I have a main menu background, which I’ve defined to change its color, when the hero section goes out of view, The problem is that if you’re not at the head of the page and you refresh the browser, the background color disappears.

Any help would be highly appreciated!

Thank you,
Naama.


#3

Anyone? :pray::pray::pray:


#4

Hi Naama,

Did you ever get an answer to this issue?


#5

@garymichael1313 no. I didn’t.


#6

Gotcha.

#1: On that product tour slider - When I click the arrow for next slide, the background goes red on active slide. Then previous slide returns to white. On both the icon is dark grey. Is that not how it’s supposed to work?

#2: The Nav bar used is only 1 nav right? If so, there’s going to be an initial state that will get refreshed on load.

On load - transparent
On scroll - grey

For this you’ll need two navs or the initial appearance will get reset.


#7

#1 - the icon should change from dark Gray to White.
#2 - got ya!

Thank you.


#8

#1: How are you changing the icon block? I can’t find where the interaction is set.

#2: You can add an initial appearance in the interaction. Then add the opacity change just below it in the interactions panel. So you’ll have two actions for each one. The initial appearance will show as a little double arrow. Try adding that before the opacity change, then on refresh it will set on it’s own.


#9

#1 - each circle div contains 2 divs inside of it, each one containing a different icon, one is dark Gray and the other is White.
In the interaction, I replace the background color and then I hide the dark Gray icon and display the White icon.

#2 - thank you very much for this, I’ll try and update.


#10

I got it to keep the white icon on view. But working on getting the grey icon to fade out.

You’re in it working now right?


#11

Hi @garymichael1313,
#1 - since we got to go live today, we decided to give up the icon replacement for now. Did you ever discover what was wrong there?
#2 - your idea did solve the problem of refreshing the page while you’re not at the top of the page, but unfortunately it caused a new problem - when you load the page, the nav bar straight away becomes Gray instead of transparent… so eventually we used some javascript and that solved the problem:


#12

Okay gotcha. I saw how to get the white icon to stay, but the grey kept fading out. To do that, I move the images out of the div and set the interaction on the image directly. But I agree, if you need to get going, I wouldn’t waste anymore time on it. Have a great day.


#13

@garymichael1313 Thanks for all your time and efforts, I really appreciate it!


#14

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