Streaming live at 10am (PST)

Help with initial states for interactions


#1

Hey all,

The page I’m working on is http://picky-creative.webflow.io/style-and-assets, there’s an issue with one of my interactions.

For starters, you’ll see a vertical contact menu fixed on the left (class “Div pick us”). The first problem is that this should not appear right away. It’s set to have a width of 25% of the window. It’s initial appearance should be hidden (fixed position is -25%) until activated by an interaction.

Here are the interactions that should take place:

On page scroll down, the nav bar reacts in two ways: first the logo will fade, second the orange arrow (class “Div Arrow”) will move to the left. When you scroll back up, the reverse happens. Perfect.

When you hover over the orange arrow, it rotates 180 to the right. When you hover out, it rotates back 180 to the left. This works overall, but for some reason does NOT work on the very first attempt upon page load or when the page is refreshed; instead you have to hover in and out an additional time before the arrow responds correctly.

When the orange arrow is clicked once, the hidden contact menu should slide out and appear from the left. When the arrow is clicked again, the menu should slide back to the left and completely out of site. Again, this works correctly only after you have clicked the arrow several times, and like I mentioned the contact menu should NOT be apparent initially.

My guess is that I messed up in the initial state settings of my interactions, but I’ve made numerous adjustments and still can’t get the right results. Hoping this makes sense and has an easy fix.

Thanks in advance for the help,
Meleah Johnson

Read only link: https://preview.webflow.com/preview/picky-creative?preview=87bba54a6f0668f73eb81b2b6d606df1
http://picky-creative.webflow.io/


Here is my public share link: LINK
(how to access public share link)


#2

Hi @meleahjohnson

A lot of little things causing you issues there so it was easier to record a a couple of videos to show you. Basically, try not to use the Style panel to create initial states. You can use IX 2.0 for every part of your interactions.

Sidebar issue -

CloudApp

Arrow hover issue-

CloudApp

Hope this helps!


#3

Perfect, thank you so much! So simple, I knew I was over thinking it. I appreciate you taking the time to make the video tutorials.


#4

Hi Mark,

The interactions you helped me with were working perfectly, now suddenly my hover and click interactions don’t work, even in the published site. I didn’t make any changes to the interaction settings. Can you please help me determine what went wrong? Here’s a link to my old forum post: https://forum.webflow.com/t/interaction-help/58465?u=meleahjohnson


#5

Nevermind, figured it out thank you!