I have a layout which uses flex to resize its internal components to the window size.
Part of the left column has either some "control buttons" or an "event log" of which visibility can be toggled.
I'd like to animate that show/hide so the log messages div slides out from the right. When the log messages div is hidden, it will slide back towards the right.
The system is using AngularJS (not "Angular").
The majority of examples online show how to animate opacity to fade in and out and the few that show sliding animation use position: relative wrapping position: absolute elements. However, using absolute wrapping relative messes up the flex layout: wrong elements are visible and resizing doesn't work properly.
Any idea on how to achieve that effect?
Here is a fiddle showing the layout.
Thanks!
Related
I have a vertical swiper where in one of the slides I have a box with overflowing Y content, I want the user to be able to scroll vertically within the box. But in both dektop and android mousescroll is not working. No scroll event is generating from within the box, and scroll is interpreted as swiping. I also have a multiline text field inside same slide but I am able to scroll in that, so it must be possible. How can I make it work the way I want to?
I want to achieve this in Onsen UI:
Notice taller toolbar than standard, white overlay burger menu icon (for the standard element) and no bottom border between the image and the first item.
I think the burger icon is easy (assuming it stays in the right place with a taller toolbar).
The background image I tried manually setting the CSS property background-image in the browser DOM (using Chrome devtools) on the element and adding the transparent modifier, so <ons-toolbar modifier="transparent"> - unfortunately this got overridden so background image didn't show at all. I also tried doing the same thing on the within the toolbar and that didn't go full width and not sure the burger icon would have been on top anyway
Not sure how to override the toolbar CSS to make a tall/fat toolbar that shows the full height of the image and has no border - I've looked at the CSS for the toolbar in the browser DOM in Chrome Devtools but can't see how to modify it correctly
Ideally need this to be able to cope with different device widths or portrait/landscape orientation.
Any suggestions much appreciated. Thanks.
please I would like to know if it is possible to link values an element on the page should animate to based on how far you have scrolled, with framer motion.
For instance, let's say I have a tree picture beside a bunch of text, how do I do this such that as I scroll down that particular section, the tree's opacity or height increases, and if I scroll up the page the reverse occurs.
So if you have scrolled 50% of the section, the opacity of the tree will be 0.5. Let me try to represent this in code the best way I can.
<div className='flex justify-between'> // tailwind styling
<img src='/treeImage.png' />
<p>Some bunch of text...</p>
</div>
Yes, it's possible.
You'd use useElementScroll or useViewPortScroll to get the scroll position as a Motion Value. You can then use that value to animate the properties of the motion.img of the tree. Most likely you'd use useTransform to map the scroll values to the properties of the image you want to change.
I am currently trying to build a slider on my page. The slider slides between different content, which means each slider has a different div height. This makes it hard to use animations since I need to use position:absolute; for those (to slide left/right). To work around this, I added a parent container with a position:relative; and used this directive to get equal height on my divs. However, the problem I am facing is that it only gets the height of the first visible div. Meaning it will work fine if the div with the highest height is shown first, but otherwise it won't work (since content will come outside of the slider).
How can I adjust this so that the equalizer gets the height of each div, and gets the one with the highest value in height, and uses that instead of the only visible one?
Additional info:
Using ng-show to show the current slide, and css3 animations.
The solution was pretty logical. I'm not that great with directives. But after some researching I saw that this directive had a function called equalize() - meaning I could only call EqualizerState.equalize() once I had added EqualizerState to my dependencies.
fiddle here.
If there are many panels in the accordion they vertically just start bumping up against each other and can't be expanded. I would like to make the total height of the accordion the height of the headers plus the height of one panel body (expanded). And then the parent panel should just have a scrollbar to show that amount of height. This way there is always an open accordion and you can scroll down to any header and instead open that one.
Is this not possible?
If I turn the layout of GroupListView to vbox intead of accordion I then get what I want but unfortunately when you expand/collapse the panels, the animations are all messed up (doesn't work like the accordion)
In ExtJS 5.1.1, setting fill: false on the layout declaration seems to produce the desired result.