Hello,
I am tryng to do something with this slider : http://mcag-mediapack.webflow.io/
What I want is that every time that the slide moves, the headline of the slide appers from the same direction of the slide (something similar to this https://cdn.dribbble.com/users/107759/screenshots/4839844/team_profiles4.gif).
Now, if I use I slide trigger, and say for example that I set the headline to appear from right when in and left when out, it works, but of course if you just go forward with the slider. If you go backward, it keep going arriving from the right when the slides slides in (looking a little clunky since the slide come from the left).
So, in few words, I want the headline to always follow the slider. Is there a way to do with IX2? Or should I go with some custom JS?
You can definitely do this with IX2.
I just made 2 videos tutorials on how to make a custom slider without custom code and you can improves/adapt the interactions to your needs.
Hi @Maximosaurus and thank you for your reply.
The problem is not to creat the slider (I have already done that), but to create the same animation for the tiltes. Iāve tried different option, and I canāt make the title follow the slide (so apper and disappear from the same direction where the slide comes from). Any Idea about that?
Completely in Webflow I would use the triggers Iām talking about in my tutorial to separate motion left and motion right but might not fit your need as youāre using the Webflow component and I didnāt find a way to add swipe gesture to mine.
Otherwise I think you would need to do it with code with an array of slides and depending of the index of the next slide setting the according initial transform.
Hi @Maximosaurus,
I was thinking about having a simple if else for each slide, and then use the ādirection alternateā and ādirection reverseā from the anime.js library; the condition of the if else is if the slider image is in the viewport or not (https://www.customd.com/articles/13/checking-if-an-element-is-visible-on-screen-using-jquery)(can check horizontally, so It should work).
I will try with this, and see if it fix my problems or not.
Do you think this can work?
Sounds like a possible solution. It might work but isnāt the different slides of the slider transformed rather than positioned?
Meaning that Iām not sure how the webflow slider works behind the scene but the jquery method is probably using the document flow position to calculate if is in view.
I experienced that with parallax project for example where the scroll into view trigger doesnāt have the expected behaviour as it uses the scroll position relative to the body top.
I would love to here your feedbacks if you get it sorted this way.
HI,
I am tryng as we speak, I looked at the code via chrome inspect, and everytime that the slider scrolls, webflow alters the x positioning of the div
So should it work? We will see, it may not work due to the fact that the slider is inside a mask, so for the browser is always āvisible?ā
I just wrote this for now, I will read again later (busy now) and see if it can work with my html
