Streaming live at 10am (PST)

No more than 20 collection list per page limitation?


#5

Well, it might actually be a good thing to have links to other pages as working with tabs navigation (like I do now) doesn’t change the URL, so if someone wants to share to a friend what he found on the page he was looking at, his friend will just get the landing page and not the open tab.

I am right now rethinking my entire UX ^^ too bad, i was damn happy with my layout :slight_smile:


#6

:sunglasses: It’s all about how we respond to life’s limitations.

Maybe you’ll end up liking your work around even more than the original. Happy designing!


#7

Thanks man !!! :sunglasses: I’ll share my work with all of you !
Thank you for the support.


#8

Hi @matthewpmunger :slight_smile:

So I’ve rebuild my layout with buttons linking to new pages instead of Tabs system navigation.
I’ve checked the transition page video you sent me (thank you), looks pretty cool and clever !
I think I could repeat what Nelson did.

The only thing missing is I’d love the page to reappear exactely at the same scrollbar height I left the page while clicking on the button. Right now, everytime a new page loads, it appears at the very top (which is kind of normal for a new page)… The transition right now indeed is pretty brutal.

Would you suggest a technic (code?) so that the new page loads at the same height level of the previous page ? I was thinking in addition to the new page link, adding a “page section” link so the new page knows, where it has to scroll to. I hope I’m making sense :slight_smile: (see screenshot)

Thank you :slight_smile:
Anthony

)


#9

Ok I think I resolved my question by myself.
I just added /page-name/#section-id on the custom URL field from my button.

It works :slight_smile:


#10

:ok_hand:Exactly what I would have done too!

Sorry, I was busy and couldn’t answer earlier.


#11

Yeah, this is quite a known limitation by now. Recently though, another tier limit of 40 collection lists per page was released for business hosting, if you really require this feature.

► [LIST] Feature Availability & Limits


#12

When did Business Hosting get bumped up to 40?
Wow, how did I missed that! I’ve got several projects that bump up against the 20 limit. Crazy.

Thanks @samliew for the update and link to that other post.


#13

Hi @matthewpmunger,

I have a little question regarding the transition effect video you sent me.
I’m trying to follow, step by step, second by second what Nelson is doing but at 10:44, when I then select my overlay and come back to the interaction window, I don’t have the same screen as Nelson has: the Load Out animation is gone and I’m back to set a new element trigger. So confusing somehow.

Am I doing something wrong ?
Thank you :slight_smile:

My read-only link


#14

Hey @anthonysalamin

  1. First go into the interaction.
  2. If the element to animate is not visible in the designer, go to the Navigator (F) and select the element from the page structure.
  3. Then go back to the Interactions (H).
  4. Continue animating.

The key thing to remember is that you can only click inside the Designer, Navigator, or Interactions panels. If you click any other panel, like the Styles or Settings, you break process of animating because Webflow assumes you’ve moved onto a different task and automatically stops the current task of animating.

This is actually a good thing once you understand what’s happening. There just aren’t any visual cues to let you know what’s happened. Early on in iX2 the Navigator would also break the task flow which was problematic for animations like this where things are off the screen.

Does that solve your issue?

BTW the site is looking really click. How did you go about creating the animated SVG logo? Animating SVG is something I want to get into, especially since I have a background in video animation using After Effects.


#15

Hey @matthewpmunger,

Awesome, thank you for your answer, I’ll give it another try and will let you know !
Regarding the SVG animation, I’m by no means an SVG ninja… but after digging some time on google, I found an amazing opensource plugin called vivus ! It’s crazy what you can do !!

You just need an SVG constructed with strokes, and then you could even use the vivus instant to directly drag and drop your svg from illustrator into your web browser and start animate it ! Controls are quite simple but very effective, with loops and easing and stuff. You then just download your animated svg and upload it on Webflow !

Super cool workflow ! :smiley: Have fun !


#16

I’m going to have to play around with that for sure. Thanks.


#17

I found that talk very inspiring. I’ll be looking into SVG bit more I guess, amazing UI possibilities.


#18

Hi @matthewpmunger :slight_smile:

Well I’ve tried again but it seems Webflow doesn’t want me to use transition page on my project.
I just can’t go back to the Interactions without losing the previous element trigger “Load Out”.
I made a small video screenshot of my problem.

is it because my button is inside of a symbol element that I can’t continue animating ?


#19

The read only link to your project isn’t working. Please send a new one so I can take a closer look.


#20

Sorry about that, here is a new read-only link.

Thank you for your time ! :slight_smile:


#21

So yes the Symbol is breaking the animation edit process. I did get it to work though. Here’s how.

First off though, go to your Overlay div and set the position to Fixed and set a transform to move the overlay 100% to the right. This way it is not dependent on any other element’s position and the Transform function is easy to animate.

Then, I went to one of your CTA buttons below the symbol and used that to stage the animation. I was able to use Click to activate then chose your Load Out animation. Then go select the Overlay in the Navigator. Set the initial state for the Transform to be the same 100% to the right on the x-axis.

Then set the next keyframe in the animation to 0% on the x-axis. Set the timing to match the delay on the script.

Now that the animation sequence is complete, go into your symbol, select your button, and add the click animation. Rinse and repeat for all of your buttons.

Let me know how that goes for you.


#22

Hi @matthewpmunger,

Thank you for the step by step process workaround.
That part of the animation now works !

What doesn’t work is when I’m trying to appy that load page respecitively load out animations to another page… the interraction says “this element doesn’t exits on this page”… but I have the exact same overlay div on that very new page which is why I’m so confuse with the animation process.

I’m sorry I’m bothering your withi this, I’m surely missing something again.
Maybe you have an idea ?

Read-only Link

Thank you !


#23

Try using out the new interaction features that they pushed out last night. Now you can target a class across the site. Or you can do the way it’s been done before this update, right-click on the animation error and choose a new target. Then go to the navigator and select the overlay.


#24

It worked ! Thank you !

I was thinking, for such interesting updates, in addition to the update message while logging back into webflow dashboard, it could be interesting to have a little targeted informative tooltip directely into webflow’s interface for like two seconds for the user to know what’s new :slight_smile: I completely missed that update for some reason.

Have a great weekend !