Animation not working if element have transform

Hi,

I'm not an expert and I would like to understand why an animation on Scroll set in BSS isn't working if I already have a transform set to my card. If I remove the transform: scale(1.2) the animation works. but I need the transform as well as the animation.

Since the scroll animations in BSS are also done by using CSS transforms, it's likely that your transform declaration is overriding them. One solution is to apply your transform rule to a child element or a parent, instead of the animated one.

Good idea. Thank you ;)

Hi,
I have this problem the other way round.

I wrote a parallax effect in html and css in Visual Code. Testing it in Firefox, everything fine.
I’ve done a website in Bootstrap Studio, which is working well.
Now I’m implementing the parallax code into the style.css of the Bootstrap Studio project and transformZ is working inside Bootstrap Studio, but not in browser. It shows in the Inspector, but somehow Bootstrap Studio is overwriting it when it shows in browser.

Greetings

Unfortunately there is no generic advice that I can give to problems like these. It will involve inspecting your CSS line by line, looking for typos, checking specificity and organizing your CSS differently until it works.

Since this is not related to the use of the BSS software, I’d recommend you try posting your question in the proper forum category (Webdesign Help), where people with coding experience may be able to help you.

Also, there is little chance anyone will be able to solve your problem if you don’t post a link to your live website, so people can see the actual issue in real time.

Thank you. The website is for a customer and not yet released, can’t post it anywhere.

If it helps, you can send your code to any member of this forum via a message. Messages are private, and only the recipient will see it.

Of course, you’ll first need someone to offer to do this. I do not think you will get a solution here simply by describing the problem. As Martin explained, problems of this nature are typically code-related, and someone must be able to view your code if you hope for them to identify your problem.

(Note: I do not review code for people, but if you message me a link to where I can see your website, I will gladly take a look at it. You don’t have to make the address public, or even publically accessible. Just put it in a subfolder temporarily on your server with a unique name. If I can spot the problem, then you can fix the file, and remove it from the server.)

Also worth noting, since this is a website development question, and not a question about how to use the software, you might get better response if you post it in the Webdesign Help category of the Forum.