Streaming live at 10am (PST)

Can't animate hide/show


#1

Since yesterday if I start a new animation cant see the option hide/show under miscelaneous.

What I’m doing wrong?


#2

What’s the trigger used and what’s the selected element?

I can confirm that Hide/Show is there for me, maybe it’s not showing up for certain triggers.


#3

Page % scroll it’s the trigger.

The element I tried with images, divs, containers… :exploding_head:


#4

@vincent

Created a new blank project.

With the page triggers Mouse move in viewport and while page is scrolling cant choose hide/show.

Also with the element triggers mouse over element and while scrolling in view it’s happening the same.

The problem is that I’m trying to recreate an interaction that already has hide/show with the page trigger “while page is scrolling”.

:cold_face:


#5

Ok thanks.

What you’re facing is expected actually. The While the page is scrolling trigger makes things change in between keyfrmes, not at keyframe. So it’s only available for the actions that can be tweened between keyframes. Hide/Show is like a switch, and can’t be tweened. So it’s not listed. Same reason why it’s not listed for Mouse over viewport trigger.

If you need to make something disappear, be removed from the page, at a certain point, then you need to use another trigger, like the Page scrolled trigger for pages or the Scroll into view trigger for elements.

If youneed an element to gradually fade, then you need to use the while page is scrolling trigger with Opacity.


#6

Thanks @vincent , i’m trying to recreate this: https://webflow.com/website/iPhone-X-Hero-panel

As you can see @tomjohn used hide/show to hide the X mask using “while page is scrolling” trigger.

Maybe it was possible before and now I have to find out an alternative?


#7

You’re right, he’s using it.

So the feature may have been removed, because it doesn’t make much sense, and you don’t even need it in the way @tomjohn used it. So, happy ending I guess, let me explain:

Difference between Opacity and Show Hide (at least Show/Hide with Display box vs. none, as @tomjohn used it):

  • passing an element to opacity zero make it transparent, but it still exist in the page, its place remains taken in the flow of elements.
  • passing an element to display:none removes it from the flow of elements completely

This difference described above has no importance when the elments in question are positionned with fixed or absolute, because they’re no longer in the flow of elements. So using opacity zero or hide show with display:none is the same.

@tomjohn used the timeline like an animation timeline, using actions like keyframes: defining the same keyframe at zero and 49%, then a change at 50%. But %ages aren’t keyframes, there could be room for animation between 49 and 50, depends on the length of the page.

So it’s ok, to mimick the same effect you can just use the Opacity action. Makes any sense?


#8

Thanks again @vincent .

I guess it makes sense.

Thinking about what you said now I will have to use opacity and play with the Z index. Right now the mask is on top of all the stuff and I cant select text or anything behind the mask.


#9

I’ll have to double-check the site, but I’m pretty sure hide/show is necessary for the mask here. A 0% opacity element is still clickable, so it blocks all content beneath itself when used in this way. Hide/show removed it so that elements on the page can still be interacted with once it’s fully scaled up.


#10

Yes, this is the exact issue I had.


#11

@tomjohn if you find out a solution let me know!

Maybe someone in the @webflow team knows a better way to do this.