I am building a single page e-commerce app. The products page is based on cards in a responsive grid. I want to make a card to expand onClick to fullscreen with something like spring or ease animation to see full product page.
The problem is the card is tied to the grid and is not always in center. And everything I tried to do with css animations looked awful from animations perspective and felt like a bicycle from code perspective.
I just wanted to ask, what in short is the best way to achieve this, what path should I choose? And is it really possible with grid I have now, or I should try something different? I thought of using Framer Motion as an animation library.
Here you can see something similar to what I want to achieve: https://youtu.be/XyBbFMhMtik?t=10
And here is simplified codesandbox of what I have now: https://codesandbox.io/s/dank-water-o2lpp
Related
I am looking forward to creating a verticle photo slider in my Angular / React app just like we see in the Google Photos Web version. Here is the screenshot attached in case you have not seen it yet on https://photos.google.com/ of your google account
The slider is divided into the yearly category where small dots represents months. It is smart enough to create dots based on photos that you have in particular months.
If you click on any dots or year, your main photos section will move based on the selection.
If you scroll through your photos using a Mouse wheel or mouse pad, this slider will change position based on your scroll photo area.
I tried to find any open source NPM library that I could check but I did not yet. Any help that I can get on how to build this in Pure JavaScript or in TypeScript, I would be damn glad.
Any thoughts, let's discuss them in the comments.
Thank you in advance.
Your requirements have been validated in both the Slider and Linear Gauge components. But currently, we do not have support to render the Slider component with irregular label intervals as shown in your screenshot. This requirement is also not possible with the Linear Gauge. Also, we don’t have direct support to include photos as maintained in the Google photos in Slider component. Please check the available layout of both Slider and Linear Gauge components from the below link.
Linear Gauge: https://ej2.syncfusion.com/demos/#/bootstrap5/linear-gauge/default
Slider: https://ej2.syncfusion.com/demos/#/bootstrap5/slider/default.html
Ok, so I want to develop a web portal page that can direct you to multiple websites that I have. I want to design it like this:
Where each section is a clickable section with JS and when hovered it pops up a bit and fades into a picture of some sort. Anyways, my question is how would I get a div to be angled like this? I read about using the border trick to make a CSS triangle, but I don't believe that will work for this. I was also thinking if there were a way to use the CSS transform property somehow but I cannot like up the triangles uniformly around the page and then keep it scalable so it's responsive. Does anyone have any suggestions? Or is this even possible??
CSS offers something called clip-masks. This allows you to move past basic color shapes and allows for the shaping of images. This would look good when used as the links you want.
See more about clip-paths: https://css-tricks.com/almanac/properties/c/clip-path/
A useful site for deriving the actual CSS for the shape can be found here: https://bennettfeely.com/clippy/
This used in conjunction with media queries for responsiveness and absolute positioning for arrangement should get you where you want to be.
I found this site, maybe it will help:
CSS Triangle Generator
I think you can align different triangles with position: absolute too.
I'm looking to build a UI with stackable cards, something like:
Where there are a dynamic number of cards being the currently active card, and as the top card goes away, cards below is displayed. Very similar to Tinder's swipe-able experience.
I need to build this UI Component in my React web-app (not native). I found this library which looks very popular:
https://github.com/oliviertassinari/react-swipeable-views
However this library does not appear to support stacking view, and showing all the views at an offset as seen below.
Does anyone know if it is possible to accomplish what I'm looking for with react-swipeable-views or if there is a better library out there to accomplish UIC as seen in the image?
You could use the react-spring library to achieve this. Here is an example of that behavior implemented.
I hope it helps you!
I want to know the process taken to make menu page with a 3d logo like on this website: activetheory.net
Here's the screenshot of the menu page:
And also how the logo is moving according to the pointer location.
There are several ways to accomplish that effect, or similar to it: HTML5, JavaScript or Adobe Flash, to mention a few.
I believe that in the case of that page in specific, JavaScript was utilized.
You might want start here: https://www.w3schools.com/js/js_htmldom_animate.asp
Once you master that, and basic JavaScript in general, you can start looking into Unity (https://unity3d.com)
I could find tutorial and code for bubble effect with CSS and static images: http://aext.net/example/bubble-css
I have also put together various sharing buttons to make a sharing bar:
http://pollwidget.org/test.html
My question is, how do I create a sharing bar with bubble effect? Because all these working buttons are got from embedding a javascript code from twitter etc, while the bubble effect is with static images.
I am not looking for complete source code, but some hints and tips to get me started would be appreciated.
I'm not sure it would be possible or wise considering they aren't images, they're individual widgets from various external sources built in HTML/CSS/JS.
You might be able to achieve something along the lines of a bubble effect if you customise an AddThis toolbox - http://www.addthis.com/help/toolbox