Streaming live at 10am (PST)

Stable rotational parallax interaction in slider


#1

Hey everyone!
Australian Ad student new to both web design and Webflow here.

I’m looking to replicate the rotational parallax interaction (I believe that is the right terminology) found on this site’s work pages: https://www.raoul-gaillard.com/work but specifically within a slider.

I have built a replica as much as I can within a slider, however, am finding the various elements to not react as the example linked above.

http://jmerc-folio-test.webflow.io/

Any advice/help would be much appreciated!


Here is my site Read-Only: LINK
(how to share your site Read-Only link)


#2

Hi @Jmerc,

I think you are almost there, I also love playing with perspective and parallax ^^

I think just a minor tweak fixes this. Go into the interaction configuration for the Rotation Parallax Slider animation and instead of targeting the parent element target the class like in the following screenshot :

Let me know if it was what you were after :slight_smile:

Max


#3

Thanks so much for the reply @Maximosaurus !

Targeting the interaction to the class instead of the parent element helped to continue to interaction across the slider which is great, thanks.

However, I’m still struggling to get the elements within the slider to move smoothly (and almost slower) like they do in the example here: https://www.raoul-gaillard.com/work where the interaction is much more smooth and clean. Any advice on that?

Thanks again.


#4

Sure thing :slight_smile:

Smoothing property will act on the delay for the animation to catch up with your mouse pointer
(don’t hesitate to go quite high but I would recommend 98%)

You can also experiment with the easing of the animation curve

And to polish you can add a bit of rotation on Y position of the pointer as well and/or play with the depth of your elements in 3D space (move z) or even change the perspective effect strength with the children perspective of the parent (lower pixel value = stronger effect)

If it solves your problem think about marking it as resolved to close the topic.

Cheers


#5

Amazing, thanks for all your help @ Maximosaurus !