[SOLVED] Scale Transformation Not Working

[Hugo_Lys]

Hello everyone,
Great to meet you.

I am facing a little yet mysterious issue with my Webflow Website.

Indeed, the template I am using has a bunch of boxes which I set up to create a Box Shadow when hoovering. It works well, and I smoothened it with the Transformation option.

We are talking about these Feature Cards, which are on the Homepage:

I also wanted to add a Scaling effect (from XY 1.0 to XY 1.02). I copied the process from this clonable template notably used on the PRODUCT-CARDS (The ones with a banana, a necklace, and a headphone).

But, here is the problem: while the effects work as expected on the Webflow Designer, it stops working as soon as I switch to the Live Preview - and it does not work either when I publish the website. Switching back to Webflow Designer: it works again.

Could you please help me with this?

Please: without damaging the original template classes / positions / responsiveness at all - as I’m not comfortable with optimization thus would like to keep it as close as possible to its original bought state.

On a sidenote: I noticed the scrolling-in apparition of those Feature Boxes looks a bit buggy - at least on my computer, could you confirm or refute this issue?

Let me know,
I am looking forward to your reply.

Thank you so much!

---

Here is my site Read-Only: https://preview.webflow.com/preview/pyramid-agency?utm_source=pyramid-agency&preview=4d85cc4439953c6ee69c7a243a80416d

[Maximosaurus (Maxime Duhamel)]

Hi @Hugo_Lys,

I ran into a similar issue.
From my understanding there is a conflict between the hover state and the initial states of interactions.

Specially with using prebuilt animation like the slide in you are using.
My work around seems to deal correctly with it and is as follow :

• Remove the hover state transform as well as the transition property for transforms of your featured card (Instead we’ll do an interaction)
• Add a mouse hover interaction to your feature card
• Select start an animation for on hover and as well for on hover out
• Create 1 animation for hover on targeting the class and affecting the interaction trigger
  
  
  
  
  
• Create 1 similar animation for hover out without the initial state
• Match the easing and timing of your box shadow animation and you should be good to go

It works on my end and solve the buggy behaviour of scroll in as well.

I’m still a bit confused on how Webflow deal with initial states under the hood.
For example if you set an animation with some initial states only triggering on desktop,
the animation will not trigger on tablet and below but you will still have those initial states apply.

I’ve been wondering about it for a while but I guess this will come in another thread.

I hope it helps you.

Max

[Hugo_Lys]

Hey @Maximosaurus
Thank you so much for figuring this out with me - it means a lot. Works perfectly now.

Before closing this topic, could you please just quickly post-check and confirm that I have done everything properly?

I don’t want any hidden impurity in my Webflow Designer, as I know it can create future issues.

Let me know,
Thank you again for taking the time to help me!

[Maximosaurus (Maxime Duhamel)]

Glad you could make it work.

Just one thing, you just need one parameter to animate the zoom.
The first one in ZOOM is the initial state (transform which should be applied when the page is loaded and it is global so no need for it in ZOOM 2)

All the best don’t forget to mark as solved

[Hugo_Lys]

Perfect. Thank you so much @Maximosaurus