How to do this (slider?) animation?

How do I design this without any additional code? I’m hoping to get it done using a slider. The difficult part will be making the slide stick out before clicking on an arrow trigger.

Also, how can I change the trigger to the entire right part of the screen?
Any help would be appreciated!

ezgif.com-video-to-gif

:point_down: :point_down:This is the best I’ve been able to do so far x(

https://preview.webflow.com/preview/slider-animation-de6fda?utm_medium=preview_link&utm_source=designer&utm_content=slider-animation-de6fda&preview=fe06d72ecf95d6c4243287587824497f&mode=preview

Just a quick idea:

I’m not very seasoned with interactions yet, but I’d probably use a div, put the contact page inside and let it partly flow in from the right when scrolling into the section.

You could use a mouse click/ tap interaction on the partly shown contact div and/ or the button to move the full div into view and move the rest of your section to the left.

Does that make any sense? :sweat_smile:

1 Like

UPDATE

I’ve almost figured out everything. I just need to get the animations working correctly. I could really use some help here :pleading_face:

https://preview.webflow.com/preview/deependuajish?utm_medium=preview_link&utm_source=designer&utm_content=deependuajish&preview=9263f99d94870e0b6c3815ebbd11d0e5&mode=preview

1 Like

:open_mouth:

Wow! What a progress. Very impressive work, I love your choice of colours!

Here is what I did:

Add a mouse interaction on click/tap to your contact holder div. Then add an animation targeting the same div and set x-movement to “0”.

You could use the same concept to push your about div a little more left.

Looks something like this:

https://www.loom.com/share/68cac877bf244665912fd4bf0ac67118

Thanks!
The click/tap animation trigger makes sense. I like the execution as well. But it isn’t exactly what I’m looking for. I know the ‘GIF’ I used for reference shows a tap animation, but that doesn’t seem to work well with my content.

Now I’m trying to make the ABOUT page sticky, and scrolling past that should reveal CONTACT. So CONTACT only reveals after I’ve finished scrolling through ABOUT. I know it sounds confusing on text. Maybe I’ll work on it some more and update it tmrw for better reference :+1: