Streaming live at 10am (PST)

Problem with slide in animation


#1

Hi there,

I have a problem with a slide in interaction. If you click at the menu trigger at the top left, a div should slide in from the left. But it is instantly there and covers 4/5 of the screen. Only the last 1/5 ist animated as desired. I set the animation duration to 5 seconds, so you can see the effect. Sliding out behaves as desired.

Many thanks for your help! I am a newbee and I do not know what to do. :frowning:


Here is my public share link: https://preview.webflow.com/preview/mhgrafikdesign?preview=f192b62f555c66b6dad67f804bd1e750


#2

Hi @MHGRAFIKDESIGN

On the Navigation Container you need to set an initial interaction using the Interaction Panel, and not the Style Panel.

So, remove the style on the container:
CloudApp

Then, add an initial state to the Navigation Container in your button trigger interaction:

CloudApp

Tip: Don’t use the Style panel to set initial states for elements. Always use the interactions panel and check the “Set as initial state” toggle.

Hope that helps! :slightly_smiling_face:


#3

Many thanks for your help! Tried it, but it did not work. But I have seen a small apsekt in your GIF. I worked with -100 % as initial state, but with 0 px as animation. I did change that into 0 % and it works.

But just for my understanding, cause I’m a graphic designer, not a Webflow Pro: Why did the initial state of the “Mouse Click” animation affect the container divs initial appearance in general. The animation is playing by click, not on page load.

This forum is great. Fast and able help! :slight_smile:


#4

Yeah! Glad that worked. :tada: I should of pointed out to make sure you use the same units… in this case % not px.
Also, you can add an initial setting of display:none | opacity:0% just make sure to reverse this in the interaction.

I can’t explain the technical side of this, :exploding_head: other than the transform on the style panel is a style setting. When you set an interaction, you’re not creating styles, rather, you’re interacting with the styles that are already set.

So in this case, the style is set to be full screen, and you’re then manipulating with an interaction for it to start left, then move to it’s original state.

(If, when you’re in the designer the container is getting in the way, you can give it a display setting of display: none so you don’t have to keep moving it out of the way. The setting I mentioned above will take care of that.)