Streaming live at 10am (PST)

Slider Animation - Headline Following Images (example inside)


#1

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?

Thanks ^^


Here is my public share link: LINK
(how to access public share link)


#2

Hi @mrpennisi,

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.

Here is the related topic :

Hope this helps


#3

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?

Regards


#4

I may have misunderstood your need :crazy_face:

Could you please share your read only link to have a look at your setup?


#5

Ahaha, no worries, I was not really clear at all
Please find the public link here : https://preview.webflow.com/preview/mcag-mediapack?preview=fb7b65986cdd05f17c850d02cf134794


#6

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.

This would be my idea.


#7

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?


#8

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. :slight_smile:


#9

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

if ($(’#element’).visible(true, ‘horizontal’); ) {
var alternate = anime({
targets: ‘#alternate .el’,
translateX: 250,
delay: 1000,
direction: ‘alternate’
});
} else {
var reverse = anime({
targets: ‘#reverse .el’,
translateX: 250,
delay: 500,
direction: ‘reverse’
});
}


#10

Update : apparently is not working xD
I will figure out something else ^^


#11

Update 2 : the anime works fine, I just need a js/jquery listener that works with the slider. Any Ideas?
Thanks in advance