I have been trying to do a complex (for me at least) animation in react for a week and I am still unable to do it. I have attached the ss of a minimalist demo I made up in figma because I cannot share the actual design file.
I am using Next.js and I have to trigger this animation when the route changes (which happens automatically).
I have so far been using react-spring with its useTranslate hook. With this hook, I can use a state change to trigger the animation and also unmount the component at the end of it. For me the, automatic redirect happens after a state change that is coming from the backend via a subscription. I am hoping to use that to trigger the animation.
I am logically dividing this animation into two parts:
First part is the background gradient fading out along with the list while the avatars is fading in. This happens all the same time.
The cards duplicating behind it's back and slowly translating downwards and fading out.
So far I have figured out:
How to simultaneously trigger the animations. This is easy as I can pass the same state to different useTranslate hook with the same config object and the animations can be triggered at the same time and lasted the same duration.
How to trigger the opacity animation which can fade the avatars in while fading out the list.
But I am yet to figure out how:
To fade out background like that.
Duplicate the cards one behind another and then slowly translating them down. Not sure how to target each individual cards either.
Actually chain these animations so I can trigger the second one after the first.
Has anyone ever dealt with these kind of situations? Any other option than react-spring? Is it possible or easier if I use SVGs? Any piece of advice would be great.
Link to ss
Related
I know how to animate between routes, but how can these animations be made "interactive"? For example, rather than simply triggering a preset slide animation on swipe, I would like the animation to map directly to the user's drag gesture. Another side effect of this type of interaction is that a user should be able to start a transition, but then cancel it using the same gesture.
This sort of pattern seems important for building the sort of animated transitions seen in Google's Material Design. I can accomplish these transitions within a route, but for organizational reasons I would like to be able to do so between routes.
Any examples or descriptions of designs would be greatly appreciated.
I would do this :
Detect touchstart event and trigger behaviour
detect the finger position while moving, and shift your wrapper html element accordingly. Probably with css, like transform3d: translateX( ... )
on touchend, evaluate if the distance is enough to trigger route change
if not, animate back to original position with css transition.
You probably want to have a look at http://hammerjs.github.io/ for gesture detection.
Good luck !
I've been working on the Sequence slider from www.sequencejs.com. The slider is very intuitive but it can only do one kind of animation on an object, from what i've observed so far, here's how the slider works:
1.the html section consist of an unordered list which in turn have list-items
2.the js file edits the li's class to "animate-in" marking the rest of them "animate-out"
3.after 5s, the second li is marked "animate-in" and rest are marked "animate-out"
4.the css file uses the css3 transitions to animate classes when "animate-in" is triggered on that class
What i need?
I need to do multiple animations on one object. But not together, rather one after another, for instance, an image would slide in from the right; then scale up.
Maybe there's some way of doing it that i might not know, i would appreciate your help with that
Or, I was thinking if the javascript file could add more classes at certain times, I could get the effect. I went through the javascript but I'm not skilled enough to understand that yet.
Could you guys take a look at it and explain me which parts handle the class changing? How can I make it add more classes between "animate-in" and "animate-out"?
You can get the slider from here: sequencejs.com/slider-parallax/
Hope I was clear enough.
I'm building an AngularJS app and am looking to do something a little tricky with animations that I'm not quite sure how to do. One aspect of the app entails animation between views in a panning manner, but the appearance of a single view needs to be maintained. For example, if there is a scene with a square in the center, on view-change that square would appear to leave the screen as if we were panning across (while other elements enter in), all without it feeling like the view has really changed.
I know that ng-animate provides a lot of powerful animation functionality, but I'm stumped on what the best way to maintain the appearance of a single view while transitioning between them is.
Does anyone have experience trying to do this or know of an animation library that would make this possible?
I'll update this question with possible solutions as I find them.
When a view is added, the following classes are added:
.ng-enter
.ng-enter.ng-enter-active
When a view is removed, the following classes are added:
.ng-leave
.ng-leave.ng-leave-active
You can attach CSS 3 transition styles to the classes to achieve the animation effect you want.
If I understand correctly, the 'leaving' animation should pan left to right, and fade-out, starting from a 0px offset. The 'entering' animation should also pan left to right, but fade-in, starting from a negative offset.
Here is an example:
Plunker Demo
JS FIddle Demo
I've got a question. I've been working on this site for a while, and I've hit a bit of a brick wall. I've thought this over a few times and I'm not sure how to go about this.
I've got 5 different configurations for content on a page, and I need to swap between them. What's supposed to happen, is when the user clicks on a button, a series of animations is supposed to happen, and ultimately replace the button and the top with the one that was pressed. The one that was at the top should return to its original position ("Home" should always be on top, "About" should always be just beneath that, save for when it's the current page).
My site is here, http://www.logicanddesign.ca, and all the javascript is open for you to see. Any help you guys could provide would really help. I'd like to do this without completely rewriting my site, but if it's the only way, I will.
Well, the first thing I'd like to point out is that you're associating the button_click function with the images instead of the divs containing them. You would be better off using the div tags for event handling.
Secondly, you only move the current button and the pressed button. To achieve the affect you're going for, you need to move the buttons in-between the default positions of buttonPressed and currentPage.
Moreover, you can't just statically define moveUp function for the button pressed and nothing else. Because sometimes you'll need to move the buttons between the button pressed and current button upwards.
As is apparant, you need to account for in-between moves when you set divs to animate. Possibly in the moveDivs function.
I made a fiddle representing what changes you could do to achive required effect, but I feel what I have written is a mess. The sort of mess which is worthy of nightmares, really...
In my opinion, you could create a javascript class to handle animations and movements. Making a class will make code much cleaner and you could indefinitely add buttons without breaking your code.
I'm trying give users the option of selecting a different homepage by clicking left or right, and having an entirely new page appear. I'm aware of a few jQuery carousels that accomplish this in a purely x axis, or y axis manner, but not a rotation. Ideally the background images will sync up, and the overall effect would be like a globe spinning, with a different set of elements at a different portion of the globe. The elements at each section of the globe still need to be interactive and
Does anyone have any ideas on that?
using jQuery, you should be able to do this using the .slideDown and slideUp methods.
Essentially, when they perform the action that you want to trigger a switch, you add a slideUp() to the 'current' container and do a slideDown() on the next one. The animations will run concurrently.
http://jsfiddle.net/g19fanatic/stLvj/
Not many people here will write you a full solution, but they'll be happy to work through specific issues.
Are these homepages on different domains and/or are they under your control?
How globe-like do you mean? A kind of sphere distortion, or just seamlessly connected at the edges?
How important is the smoothness of the concept?
Off the top of my head, here's how I would (attempt to) do it:
Load the homepages in separate iframes
Stretch the iframe to the window's dimensions
Adapt a carousel script to animate iframes instead of images
Some sort of "prev/next" controls overlaying the iframe. Maybe with z-index.
Check out landing.js file on http://thetruth.com/ (or just let the page timer run to see the carousel)
What you want is basically that but with animations instead of fading the page in/out.
Just add CSS3 transforms to scale and slide instead of the fadein/out when a new page loads.
A polyfill will add the transform capability in JS (see jquery.transform.js, jquery.transition.js by https://github.com/louisremi and Modernizr)