Streaming live at 10am (PST)

Initial state not working


#1

Hi,

I’ve set up an interaction on rollover, on the images in the STARRING section, at the bottom of the homepage:

https://preview.webflow.com/preview/jmak?utm_source=jmak&preview=e4013901d4166e213fbaa2834cf57c38

This is the section with the animation. Those black overlays should not be visible initially.

I have the initial state set, which should have the overlay with the hotel title at 0% opacity and below the tile. It always starts with the overlay visible, however. Is there something I’m missing?

Thanks!


#2

@robtour Hi Rob, I reviewed your IX2 on this project. The best thing for you to do is just add the Hide/Show interaction. This will eliminate the issue. You will just have to adjust your transitions to make it ease in-out easier tho.

LMK if that helps?


#3

I’ve tried this, and I can’t seem to get it to slide in–it just jumps in, no matter what I do. Is this a workaround for a bug? I’m confused why the “initial state” isn’t working.

As an example, I followed this animation, which does the same thing I’m trying to achieve without using Show/Hide at all:

https://preview.webflow.com/preview/text-animation-1?preview=036bad0b5b95f341b889ed517d3489a0


#4

Basically I have it halfway working, using hide/show… but instead of nicely sliding in, the overlays just blink on… and then if you mouse off, then back on, they slide in as intended.

Either way, thank you for the help! I’m just confused why the example linked above does not use hide/show, and why I’ve never had to use it before. I’d also be thrilled if I could get this to actually work properly!


#5

I see what you are trying to get at, but due to the type of interaction you are using, since it is a Mouse Over, you will have to use the Hide/Show feature for that to work. Unless @Waldo knows of a fix for this?

WHen I try to do it any other way, I get the same results, unless I use Hide/Show to be the initial state.


#6

@robtour You have a really simple error here - don’t worry it’s an easy one to make.

You don’t need to set an initial state on your hover out interaction - the initial state for the hover out is just the end state of your hover in. Also, you don’t need to use show/hide - the move and opacity actions you used are enough.

Here’s the hover in interaction:


(Note that you want to be affecting class > only children with this class as well)

And here’s the hover out:


(Removed the delay and set it to the same duration as your hover in)

And just for good measure, you’ll want to set the hover interactions trigger settings to class > all elements with this class for the starring-item:

BTW, you had a duplicate hover interaction on “starring-slider” which you should remove too

Hope that helps! :slight_smile:


#7

Thanks so much, @thekevbot–this worked perfectly. Very much appreciated!


#8

No problem, glad I could help!