Show & Hide Elements on Click - Webflow interactions and animations tutorial
HTML-код
- Опубликовано: 23 окт 2017
- Behold the ultimate and oft-overlooked trigger: the mouse click (A.K.A. "the tap"). We'll turn a div block into a trigger, which, upon being clicked, shows (and later hides!) the lyrics to a song. We'll not only cover the show/hide effect-we'll even go into animating the entrance and exit.
Note: We’re transitioning to a new UI, and are in the process of updating our Webflow University content.
----------
Get started with Webflow:
university.webflow.com/course...
webflow.com
/ webflow
/ webflow
![Kehlani - Next 2 U [Official Music Video]](http://i.ytimg.com/vi/MpI7ekFG8A0/mqdefault.jpg)
We’re transitioning to a new UI, and are in the process of updating our Webflow University content.
I just finished the ultimate Webdesign Playlist and omfg I love Webflow! This is everything I was dreaming of the last few years. The Tutorials are awesome too btw. Great instructor!
Love the humor they add to these tutorials 😄
Just finished the entire playlist and I must say Webflow is changing the game completely. This is at least 100x better than any other platform I have used so far. And these tutorials were absolutely perfect - very entertaining yet very informative. Thanks!
Yes, the voice actor is fab!!
Thanks for the video. I am struggling with one part; changing the text. I using this effect on a Button so when I try to add more text, it just creates another Button element. Do you know I could do fix this?
is it possible to show/hide divs that adjust to screen size? hmm. I plan to use toggle sidebar on tablet and mobile view
I'm trying to make a portfolio page with keyword filter buttons. The elements have overlapping keywords. Is it possible to tag elements and then have buttons that automatically show/hide elements with or without that tag? (if you don't have time to answer, thanks for the tutorial!)
My husband is a musician and I'm trying to figure out how to install/build an audio player like this for his portfolio. Is it possible to build in webflow, or is it something I have to embed from an outside source? So confuseddd lol
I'm not able to link the trigger of a button to another element. This tutorial seems to show an other (older?) version than what I can see.
What if 2 active animations set to the same element a different initial state?
How I can upload my songs into a player like that?
Can I add an issue in here - I have two responsive solutions - desktop has the form for searching set and can not be hidden and shown - on mobile, tablet etc - the form is hidden and gets shown and hidden using buttons. To clarify there is functionality to hide and show on mobile devices only. This is working well and shows and hides the form well when I change to mobile views. But once I get in to the loop of show and hide, and I go back up the waterfall to the desktop version the default visibility of the items does not get set back - so I get stuck with the mobile show hide solution showing on desktop now. I am not sure if this would ever happen in real life rather than testing but what can I do about this in Webflow, if anything or is it a JavaScript solution?
Hey, Matthew! Have you set initial state in your interaction? That might be why you're seeing the elements on Desktop, initial state applies to all states. Try to use the Style panel to "fake" the initial state and hide the elements on desktop, show the button on mobile, and using the interaction show/hide the other content.
Hope this is helpful. If you have any other questions, please don't hesitate to reach out to us, and we'll be happy to help! If you're still having trouble implementing this animation, I highly encourage you to post on the Webflow Community Forum (forum.webflow.com/) with as much information as possible (read-only link, screenshots and a description of the issue), and our amazing community and staff can help you there.
I will explain it again to hopefully be clear - there is a sidebar with a search on desktop that is fixed, it stays there. Then when the view goes to tablet mode or phone, the search area goes above the content, rather than a side bar and then the toggle show hide system comes on - this hides the search and brings up a new search button that toggles display of the search fields. This works well and fine until we go back up to desktop and there the display settings to both the search form and the button to toggle are still set. The initial state is set in the style panel - that is the only way I thought I could do it anyway as the style panel is responsive - however the interaction is not responsive. So further to this if I do not touch the button it stays fine as the state of the element has not been altered - it's only after doing the toggle show hide it stuffs up the desktop view.
What animation settings do I use for the animation which moves the text up as it comes in to view?
You can use a quick effect like this:
Select the text element
*Element Trigger:* Scroll into view
*Action:* Slide
*Setting:* Direction: Slide in - From bottom
Or, you can create a custom animation, like this:
Select the text element
*Element Trigger:* Scroll into view
*Action:* Start an animation"
*Timed animations:* Create new [+]
*Timed actions:* Create new [+]
*Action:* Move
*Setting:* Y-axis = (set a positive value) + Set as initial state
*Timed actions:* Create new [+]
*Action:* Move
*Setting:* Y-axis = 0
Hope this is helpful. If you have any other questions, please don't hesitate to reach out to us, and we'll be happy to help! If you're having any trouble implementing this interaction, you can always post on the Webflow Community Forum (forum.webflow.com/) with as much information as possible (read-only link (wfl.io/2Tupw47), screenshots and a description of the issue), and our amazing community and staff can help you there.
@@Webflow Perfect. Thank you :)
How do you show an audio player in your bloody tutorials, but never implement your own audio player despite THOUSANDS of requests? I mean, it can't be that hard... Your team knows how to embed video, why not audio?
When I hit preview both div boxes vanish... any ideas on where Ive gone wrong?
Hi Alex. It can be a number of reasons. Either your div block has no content and no specific height or width. If that's the case the div block won't appear in preview mode. Or, you've mistakenly selected the div block that's supposed to show on preview and added an initial state of hide in one of your interactions. Do check those settings and try to preview again, please.
Hope this is helpful. If you're still having trouble figuring out what went worng, We'll need to take a look at how you've styled the div block and what animations you've created that might affect it. So, please do post about your issue on the Webflow Community Forum (forum.webflow.com/) with as much information as possible (read-only link (wfl.io/2OtJN4s), screenshots and a description of the issue), and our amazing community and staff can help you there.
hahaha @ at Ross from Friends Unagi reference
Seems like this is not valid anymore. Is it still possible tp animate elements different from the trigger in webflow, apart from animating the class of the trigger?
Yeah at 0:50 where he says the timeline should still be visible even though we've selected a separate element, it does not work the same way for me now as in this video from 2017. Selecting some other element makes my timeline disappear, replaced with the properties for the new element I most recently selected.
I'm really stuck I'm trying to get the hide/show effect.
However I really want to be able to hide when clicking off the element,
like anywhere else on the page, would this be possible in webflow?
Hi I'm working on the same thing right now. have you figured it out? I would suggest adding an interaction trigger to the Body element for when a user clicks on the body, hide the element. But now I'm having an issue where I need the click on the element to toggle the hide/show rather than show on 1st click, hide on 2nd click. Let me know if you have any ideas!
i know i'm 5 years late but can you please do a tutorial specific to idris elba usecase???
wow the Show TextHide Text looks so awkward alm ost as awkward as flat 3d maps, good thing the tutorial walks us thru it or I'd be stumbling over the pure uncanniness
I love you guys, but this is an outdated method to achieve a simple interaction. Have you guys made a more up to date tutorial that has kept up with Webflow's changes? If not, can you please make an updated tutorial on this?
Here is a basic demo of how to toggle a show/hide: www.loom.com/share/ab58e95428774fdd908d63abfbd26669
it doesn't work now, any updates?
We'd be happy to help. Can you please share your project's read-only link on our community forum?
discourse.webflow.com
How to do the movement of the paragraph at the end? Where can I find the tutorial?
From Webflow:
You can use a quick effect like this:
Select the text element
Element Trigger: Scroll into view
Action: Slide
Setting: Direction: Slide in - From bottom
Or, you can create a custom animation, like this:
Select the text element
Element Trigger: Scroll into view
Action: Start an animation"
Timed animations: Create new [+]
Timed actions: Create new [+]
Action: Move
Setting: Y-axis = (set a positive value) + Set as initial state
Timed actions: Create new [+]
Action: Move
Setting: Y-axis = 0
Video is not up to date. I think for ''hide lyrics'' needs to put another class right?
That is correct.
4:33 display options
not happy with this video. the behaviors in the video do not match current interactions in Webflow. Selecting the trigger starts the interaction. But selecting the element (or class) that will be showing or hiding makes the selection on the interactions panel disappear.
I've made a quick tutorial for you. Hope this helps :) www.loom.com/share/26ab7160a54246c88ca2f863a30c2f2e
@@Webflow That doesn't solve the problem. Works totally fine when creating a new animation. But as soon as i wanna reuse an animation, the animation panel disappears when switching from trigger to an element. And i can only create a new animation....
My head hurts listening this guy, he goes too fast, doesn't explain first the tools, he's local jokes confuse me, plus much more...
This Video is part of a series you know that right?
You're expected to know how webflow works and a tiny bit of web design in order to understand this