Streaming live at 10am (PST)

Animate size/height when auto parameter is missing


#1

Hi,
I’m trying to animate height of div/wrapper to create a reveal animation.
Before we did this with height 0px > height auto. But it is not possible to set the auto parameter anymore…

https://preview.webflow.com/preview/mittlillefrankrike?preview=91dded1f415b28aba5998b0f2c57f6bf
The test is located on the “Dager Template” page. The “Oslo” header bar has the interaction.

Please advice.

-Thor


#2

@biodust have you tried using a Scale interaction on a certain axis?

The scale and transform origin concepts are covered in this tutorial: https://university.webflow.com/lesson/scroll-progress-indicator-interactions

Try a scale of 0 on start on y-axis only to a scale of 1 on the y-axis at the end of the transform. Transform origin should be on the top center.

That said, we’re working on the auto size parameter, thanks so much!


#3

Thanks for answering, @Waldo.

Two challenges with scale:

  1. If I use scale, then content in wrapper will be squeezed not hidden.
  2. How to I set transform origin?

Hope auto will be fixed soon.


#4

@biodust I’d recommend using Legacy Interactions as a workaround until the Auto size feature is available.

The transform origin setting is described at this point in the video (1 minute 56 seconds):


#5

Ok, thanks.
Maybe legacy is the way to go for now…


#6

Thanks @biodust! Just in case you haven’t already seen, here are some release notes of a few more features we’re working on for Interactions 2.0: https://webflow.com/blog/interactions-2-0-release-notes


#7

I saw it. Will be awesome with interactions on CMS items :boom:


#8

Hi Guys, I have a similar issue and have watched the video. I’m using a size scrolling interaction on an SVG, but the SVG isn’t scaling from the center even though the transform origin of the DIV holding it is centered.

The project is here:
https://preview.webflow.com/preview/get-set?preview=160d9a5c1dbe4abb3b270a62c8246050

Interaction is on Intro Section Details and SVG is in Section BGs > Intro

Thanks for any help. A bit stuck.


#9

Hi Waldo! Any news yet? This kind of functionality is quite useful and I’d love to not be able to use old interactions at this point.


#10

Was redoing an interaction on a dropdown in a nav menu and ran into this height: auto issue… Ooof… Any word on a fix for this? This seems like something that would have shipped with IX 2.0?


#11

Would love to have this fixed as soon as possible! I’m currently working on a dropdown menu with the interaction 2.0 and I have to create multiple interactions because the auto parameter is not working…