I’m trying to get some animation to work with CSS on Bubble.
Does anyone know how to animate elements’ movement? - In this video I’m meaning to get the 2 elements, image and text, moving when the image is hovered. Image to the left, text to the right, taking like 0.5 sec.
I’ve been able to achieve the glow effect animation (see all what I’ve done in the attached images), but not this moving animation
So if I understand this correctly, you have the CSS effects on the .glow & .lorem objects. The glow effect/animation is transitioning smoothly and correctly, but the shift to the left of the .glow object via the transformX property isn’t working?
The glow effect/animation is transitioning smoothly and correctly, but the shift to the left of the .glow object via the transformX property isn’t working?
You achieved exactly what I wanted to do!
Could you please tell me how you did that, esp the “adding a box” part and HTML element part? (I feel I’m missing something there.) Or better yet, if possible, it would be nice if you could share the editor (of course, I don’t need to be able to edit it but just view it).
when the image is too big (data-wise), the moving animation won’t work for some reason.
when I copy-paste my working example into a newly created Bubble app, only the moving animation won’t work while any other things work. (So unfortunately I am not able to show you what I’ve achieved. Checked many times that it was exactly the same, but still didn’t work. Re-built the exact same things on the newly created app, still wouldn’t work.)
Ahh hang on… This won’t work:
.glow:hover {
.lorem {
font-size: 36px;
}
}
CSS doesn’t natively allow for nesting style declarations.
For nested HTML elements, you need:
.glow:hover .lorem {
font-size: 36px;
}
As long as .lorem is nested inside of .glow in the HTML, the browser can then look at your CSS and correctly traverse the HTML structure and apply your styles.
CSS doesn’t natively allow for nesting style declarations.
Ah I didn’t know! Seems that way studying back my CSS memos.
.glow:hover .lorem {
font-size: 36px;
}
I understand that normally this should work outside Bubble, but it does not seem to work here in Bubble for some reason… So this - “3. Bubble’s CSS can’t seem to affect any other element than its own” might still be true.
Also, this might count as my Discovery 4; when there’s any Conditional (to be precise, any property to change set in Conditional) in the image, the Page HTML Header that was working the image becomes disabled.
Did you get to figure these things out? Or perhaps this is just how Bubble works and nothing can be done to change them?
To be honest, I haven’t encountered any limitations on the CSS side in Bubble.
For example, I’ve been able to add my own SVG icons via the HTML block and then animate them via my own CSS.
I’ve also been able to add animation and transitions to some of the Bubble elements I added that I couldn’t achieve through the property editor, but I have to admit my exposure to styling Bubble elements isn’t huge.
Are you able to recreate this set of elements in another app for me to take a look at?
You could be completely right and there is a limitation but if you can do this, then you get a fresh pair of eyes which could make the difference.
Are you able to recreate this set of elements in another app for me to take a look at?
So, again, what I want to be able to recreate is the globe one from this thread. But still no luck so far
Could you take a look at this app (feel free to edit) and shed me a light on what might be going wrong?
I’ve checked many times that this app’s structure (CSS contents, ID Attribute, Conditionals and Transitions) is exactly the same as that of what I achieved in the tweet, but can’t get it to work the same.
Thanks again!
Edit: Here’s the image I used for the recreated app. (Just any pic with a transparent background should be fine, though.)
So I finally found & fixed your issue
Shift your CSS out of the HTML Header section you’ve currently got it in.
I don’t know why this doesn’t work. I think I found this limitation when I started too, but I think this will eventually need to go in the SEO section in app’s settings. But during development, for ease, I would suggest adding an HTML block to your app and placing your CSS in there instead.
I’ve added the HTML section and shifted your CSS there for you.
Check the forum for the best place to put your CSS once you’ve finished developing your app/page.
But during development, for ease, I would suggest adding an HTML block to your app and placing your CSS in there instead.
Now I confirmed that, that way, things get to work on my main app too!
I think this will eventually need to go in the SEO section in app’s settings.
Check the forum for the best place to put your CSS once you’ve finished developing your app/page.
I believe the following is what you mean - got it, thank you!
