Streaming live at 10am (PST)

Expanding Menu Transition


#1

Hi, I'm trying to create an expanding menu that takes over the full page. I want the red circle to expand on click, something like this example http://capptivate.co/2015/02/01/keezy/ Is this even possible in Webflow?

Here's my current state http://portfolio-ef8d4a.webflow.io/

As you can see I seem to have hit a wall. Any advice would be greatly appreciated!


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


#2

I would try to nest the red dot into a wrapper div, which is styled with overflow: hidden; and absolute (maybe fixed) position. Then I would add a click trigger interaction to the red dot which

  1. effect the wrapper and set it to 100VH / 100 VH

and

  1. increases the transform to 300% or so, maybe you have to play around

Please let me know if you need more explanations.

Good luck,
Marius


#3

I think I got it. It's a bit tricky, but it works :smile:

http://marius-jurtz.webflow.io/zackete-interactions/menu-circle

Sorry, I have no time left for further instructions now but I'll get back on you soon.


#4

Wow thanks @zackete_de !

This is exactly what I'm trying to achieve. I'm going to try your instructions out tonight. I'll let you know how I get on.

Thanks again,
Jimmy


#5

You're welcome :blush:

as I said, it is a bit tricky :wink:

  • I used a wrapper with 100VH / 100VW / overflow hidden
  • added a circle 5000px width and height, position absolute, top -2500px, right -2500px
  • than added a interaction to the circle div
    -> initial appearance: scale 0.01 X and Y
  • click trigger -> scale 1 X and Y

This should do the trick.


#6

Heads up: That interaction chokes my MacBook Pro even with nothing else on the page. It works, but isn't nearly as smooth as you may be want.


#7

Hey @zackete_de is it possible to share your read-only link?

I seem to be doing something wrong.


#8

@Cricitem Thanks for the tip!


#9

@zackete_de did you import the circle as an SVG image? and did you place the circle in a div and then nest the div into a wrapper?

Sorry I'm new to this. Thanks for your help so far!


#10

This topic was automatically closed 60 days after the last reply. New replies are no longer allowed.