We use ember 1.8 along with https://github.com/billysbilling/ember-animated-outlet to make the transitions on the application look more like other mobile apps ,
However now we need this to work more like the "Tumblr" app where when an item on list is swiped the next view with details will slide over in realtime based on the swiping pattern ,etc that is more you swipe the more of the next view will appear and if you slide on opposite direction you stay on the same page.
Is it possible to do this in Ember or this kind of transition is not possible with our current app?
Please let me know if the question is not worded correctly.
We wanted to be sure this is achieveable in the ember before we try that route.
Related
Is there an easy way to implement infinite fullscreen swipe up/down function (by pulling json data from the database) as well as swipe left/right?
On swipe down I need to change the screen according to the database entry - 10 items initially loaded and when reaching the last one, next 10 loaded from remote mysql database. On each screen there should be swipe right/left option to display details about the individual item.
I was thinking to use FlingGestureHandler https://docs.swmansion.com/react-native-gesture-handler/docs/api/gesture-handlers/fling-gh/.
I am however not sure how to combine it with swipe left/right/up/down animation.
Im trying to create a component on my web app. Which shows items in a caroussel where you can remove or like those items with swiping to left or right. Kinda like Tinder but difference is tinder are card stacks i want them in a caroussel.
I tried many different options none seems to be working. Any idea how i can achieve this?
I'm trying to implement a slide transition for the <router-view> component that slides content to the left upon navigating to a different page. To make things more intuitive, I'd like to reverse the transition if the user navigates back (which is achieved by swiping to the right on mobile and MacOS already). I already found an example in the vue-router documentation here, but it only applies to routes nested deeper, eg. with an additional URI segment.
I also found several SO questions and this issue which has an example for Vue1, but I'm using Vue2 so this is not relevant anymore.
Has anyone solved this? How would I go about reversing transitions on history navigation?
I found this website and impressed on it https://kvellhome.com/
what technology do I need if I want to create a website like that
Is it Ajax? (I tried to remove some article but it can reload itself when I changed article back)
HTML5 history (I found that it can reach by direct link)
Ok, I think this can guide you to the right direction.
1- the homepage is a simple landing page that usese some animations to change colors and display text.
2 - when clicking on discover, it slides on the right and initialize a second slider that uses the projects's name as navigation dots (can easily be done using css pseudo elements using data attribute as content)
3 - you click on the project itself and it load a parallax page for that specific project.
Menu | contacts | about are pretty simple, they are pages on their own.
Some libraries you could possibly use:
fullscreenjs (to create the fullscreen pages and sliders. the home page can be the first slider and then on the second page you initialize a slider inside a slider (so that the animation to the right looks like the one on the website you provided)
animatecss to animate stuff
parallax for all the parallax effects
I think this is personal preference, but if I had to do a website like that, I will tackle it this way. Hope it helps
I have this plunker that roughly demonstrates what I am intending to do. I'd like to select the kind of animation based on a method called. pushPage() would navigate and slide the entering page over the top - popPage() would slide the leaving page off the top.
https://plnkr.co/edit/atFX5SVUfpWAg6i2dXuM?p=preview
nav.pushPage(['angular', 'route'])
nav.popPage(['goes','here'])
I am just starting to learn how to use angular animations, any tips on how I could make this happen?