Triggering animation

[yoyoann]

Hello!

I am trying to achieve a specific task and I am wondering what is the best way to do it with Cwicly.
I have a div with a 3 columns pricing tab (green), and a div with a payment form (red).
(Normally the payment form is completely hidden on the right, I put it this way to make things more clear).

Is it possible that when a user click a button (in this case one of the "get started’), the first div slide to the left to be hidden, and the second dive takes his place sliding from the right?

I tried with relative styling but I did not succeed, I am not sure that it is possible as the trigger should act on a separate div.

Thank you for your time, let me know if something is not clear or if I missed important information.
Have a great day,
Yoann

[StrangeTech]

Hi @yoyoann,

Depending on your specific requirements, the second div “Change package” may be a good candidate for a modal or a popover.

[yoyoann]

Hi @StrangeTech and thank you for your reply!

I initially tried modal but unfortunately forms are not rendered properly inside.
I quickly tried popup and it seems to be working like a charm, so I will certainly go for this solution. Thank you!
I am yet still curious if it’s possible to create the kind of animation I explained in my previous message?

[StrangeTech]

Please check the animation settings of the popover block in the Cwicly docs - this may provide some options for you:

[yoyoann]

Yes thank you, my curiosity was about the possibility to move a div from any position to any position by clicking another non-related div

[StrangeTech]

You may find this post by @Araminta interesting regarding the current status and future plans of triggering arbitrary CSS animations:

Animate on Scroll (direct children)

Hello @grantambrose, Thank you for bringing this up! What a nice looking website Correct! This is a current limitation with AOS, which we do plan to address when possible. I’ll move this thread to Feature Requests so the team and I can keep track of it. This would require a few lines of code to achieve at the moment. I’ve looped @Louis in on this, and he’ll be sure to get back to you with this. Unfortunately we don’t have an in-depth video explaining the Animations tab. …

[Araminta]

Hi @yoyoann,

@yoyoann

I tried with relative styling but I did not succeed, I am not sure that it is possible as the trigger should act on a separate div.

Well actually this is possible to achieve with a bit of Relative Styling and Interactions.

I have recorded a short video to guide you on this:

https://www.youtube.com/watch?v=TGulWlkzADs

Hope this helps!

[yoyoann]

Hi @Araminta
Wow, mind blown!
Thank you so much for your time on this, I’m sure the community would love to see this tutorial if you highlight it in a special post.
Again thank you, that is awesome.
Have a great evening!