is-next-container class is not applied during transition.
trych opened this issue · 13 comments
Hi there,
First of all, thanks for this great plugin, it is a very welcome addition to swup.
When using this plugin, the is-previous-container class gets applied to the previous container as described in the docs, however, the is-next-container-class does not get applied to the newly inserted next container.
This can also be seen in the demo that is linked on the plugin's doc page:
https://replit.com/@swupjs/Swup-Demo-Slideshow
It's a bit confusing but it actually does get applied, however just for a single frame.
The class .is-next-container is added right before the container is inserted to the DOM, then removed right after, thus triggering the whole animation. That way, the starting state of the next container is defined in .is-next-container, and the end state is defined by the normal styles it has without classname. The classname is just never visible in the dev tools as it's removed almost immediately.
Same for the previous container, but in reverse: the starting state is the normal style without classname, and the end state is the style of .is-previous-container. Just that you can still see the classname in the dev tools as it needs to stay applied for the animation to finish.
Let me know if this makes a bit more sense now. We might need an adapted version of the lifecycle diagram to make this a bit more intuitive.
I'm closing this as it's working as expected but feel free to get back anytime if this needs further clarification.
Ah, I see. Thank you for the explanation, yes, this makes sense. I think some mentioning of this in the docs would be great.
True — I've created a new issue to clarify the readme on these.
Hm, for some reason the transforms that are supposed to be applied via the is-next-container selector do not get applied in my setup. I tried to pretty much copy the slide animation demo into my website (with the grid setup of placing the two slides in the same position), but while the previous container animates to the side, the next container is already in its final position, right below the previous container, so the one frame of applying the is-next-container class does not seem to have any effect. That's why I discovered the "missing" is-next-container class in the first place.
Any idea what could be wrong here and how to debug this?
Can you create a demo with just the basic styles applied? Hard to debug this from afar otherwise. Forking the replit example and taking it step by step should also give you some pointers at which step it breaks down.
@trych We've also updated the styling section of the readme to hopefully be more clear about when the animation classnames are added to and removed from each type of container.
@daun Thanks, much appreciated. And also understandable, that my issue is too hard to debug, it's unfortunately a bit hard to reproduce because this was within a very involved CSS setup. I had to move on though and I switched to animating it with gsap in the end, which I got to work after a while.
During coding I did thinkt that it would be helpful to have some sort of class attached to the "next-container" for the entire duration of the animation though to target it more easily with some JS or by other means. I mean I could do something with the first of type pseudo class, but then I have to be specific again that this is only valid during the animation, so a separate class for targeting this container during the animation would be helpful, I think.
@trych Are you using this in conjunction with GSAP? Or did you decide to drop the plugin altogether?
The intended use case of the plugin was for pure CSS animations: something like parallel animations has been complicated but already doable in JS, whereas it was definitely impossible to do with CSS only. That's kind of the focus of the plugin, and might be a bit of a blind spot for us conceptually.
So if I'm getting this right, the main issue for JS animations is there's currently no way of applying initial styles to the next container before it's inserted into the DOM. The solution might just be a new hook — content:insert or something — which, when hooking before it, would give you the new container right before it's inserted. This should be enough to support most JS use cases, but eager to hear your point of view about this.
Are you using this in conjunction with GSAP? Or did you decide to drop the plugin altogether?
Yes, I use this in conjunction with GSAP and did not drop the plugin. This seems to work fine (and is still a lot easier for me than setting this up with JS only). I could not get it to work with CSS and had to get something to work quickly for a presentation today, that's why I moved to GSAP. I guess CSS only would be preferable but might be too complicated in my specific setup (it is basically entire layouts that slide vertically which is specifically challenging due to the containers being taller than 100vh).
So if I'm getting this right, the main issue for JS animations is there's currently no way of applying initial styles to the next container before it's inserted into the DOM.
Yeah, basically I would like to be able to easily style / target the next container during the animation. Even when I just want to give it a pink background color for debugging purposes I will have to resort to something like
html.is-changing {
.my-container-class:not(.is-previous-container) {
background-color: deeppink;
}
}(off the top of my head)
or something like that. Would be nicer to have a simple class like next-container or something that is applied to the next container during the animation.
Are you using this in conjunction with GSAP? Or did you decide to drop the plugin altogether?
Yes, I use this in conjunction with GSAP and did not drop the plugin. This seems to work fine (and is still a lot easier for me than setting this up with JS only). I could not get it to work with CSS and had to get something to work quickly for a presentation today, that's why I moved to GSAP. I guess CSS only would be preferable but might be too complicated in my specific setup (it is basically entire layouts that slide vertically which is specifically challenging due to the containers being taller than 100vh).
Hey @trych, do you have any demo to have a look at how you use GSAP with Parallel? :) Thanks <3
@Eric-llos Unfortunately no, nothing public and nothing that would be easy to take apart.
@trych The latest version 0.3.0 adds a new hook content:insert. If you register a handler to run before that, you can style and add classes to your container right before it's inserted into the DOM.
swup.hooks.before('content:insert', (visit, { containers }) => {
for (const { next } of containers) {
console.log('About to insert container', next);
}
});