Animate elements' movement with CSS?

tanaka.jun.jp · 2020-12-15T18:57:47.084Z

Hi Bubblers,

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

Any help would be much appreciated!

Plugin I used: Classify

Bubble

Classify Plugin for Bubble, by Julien Allard

Classify Plugin page on Bubble, by Julien Allard. Add Classify in one click to your app. Bubble lets you build web apps without any code.

Inspired by:

screenshot-bubble.io-2020.12.12-17_53_38967×846 399 KB

screenshot-bubble.io-2020.12.12-17_58_13811×778 397 KB

screenshot-bubble.io-2020.12.12-17_55_01925×520 370 KB

screenshot-bubble.io-2020.12.12-17_57_08783×758 364 KB

screenshot-bubble.io-2020.12.12-17_56_05902×515 173 KB

Code I put in the Bubble page:

.glow {
transition: .5s;
}
.glow:hover {
transform: translateX(-200px);
background: whitesmoke;
box-shadow:
inset 0 0 60px whitesmoke,
inset 20px 0 80px #f0f,
inset -20px 0 80px #0ff,
inset 20px 0 300px #f0f,
inset -20px 0 300px #0ff,
0 0 50px #fff,
-10px 0 80px #f0f,
10px 0 80px #0ff;
}
.lorem:hover {
box-shadow:
inset 0 0 60px whitesmoke,
inset 20px 0 80px #f0f,
inset -20px 0 80px #0ff,
inset 20px 0 300px #f0f,
inset -20px 0 300px #0ff,
0 0 50px #fff,
-10px 0 80px #f0f,
10px 0 80px #0ff;
}

niven · 2020-12-17T09:55:46.351Z

Hey there,

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?

I hope I’ve got that right.

I literally added a box, added the class name you used with the help of Classify and then pasted your CSS into an HTML element and it works fine for me.
My test - https://hover-animation-test.bubbleapps.io/version-test

tanaka.jun.jp · 2020-12-17T20:08:08.956Z

Hi Niven,

Thank you so much for your reply!

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?

Yes, exactly!

I literally added a box, added the class name you used with the help of Classify and then pasted your CSS into an HTML element and it works fine for me.
My test - https://hover-animation-test.bubbleapps.io/version-test

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).

Thank you!

niven · 2020-12-18T10:00:12.689Z

Awesome, glad I understood your issue

Absolutely, take a look at this - https://bubble.io/page?name=index&id=hover-animation-test&tab=tabs-1
Feel free to have a play and change it. I created a test app solely for helping you out so no problem if it changes.

Honestly, all I did was draw a shape, set the class and then add an HTML element and pasted your CSS. So nothing fancy in there.

tanaka.jun.jp · 2020-12-19T21:17:11.882Z

Hi Niven,

Thanks so much, now I got mine working as well!

What I’ve discovered are:

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.)

Edit: Posted a video of my achievement on Twitter https://twitter.com/Junichi_FTanaka/status/1340411782746267651?s=20

Bubble’s CSS can’t seem to affect any other element than its own.

For example, the following works because it (“glow”)'s trying to affect its own element (“glow”) only —
.glow:hover {
transform: translateX(-220px);
}
But this one doesn’t work, because it (“glow”) is trying to affect another element (“lorem”) —
.glow:hover {
.lorem {
font-size: 36px;
}
}

Anyway thanks again for your kind help!

niven · 2020-12-20T10:33:52.482Z

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.

tanaka.jun.jp · 2020-12-21T19:16:49.126Z

Hi Niven,

I really appreciate this discussion.

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?

niven · 2020-12-22T09:32:27.036Z

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.

tanaka.jun.jp · 2020-12-22T15:34:18.019Z

Hi Niven,

Are you able to recreate this set of elements in another app for me to take a look at?

Definitely I’ll try! But give me a few days till I can. Thank you for this really!
Happy healthy holidays

tanaka.jun.jp · 2021-01-06T19:16:18.711Z

Hi Niven,

Hope you had good holidays.

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.)

niven · 2021-01-06T19:52:08.280Z

Hey mate,

I did, thanks!

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.

tanaka.jun.jp · 2021-01-08T16:04:57.484Z

Hi Niven,

Thanks so much for figuring this out!

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!

How can I add css to a page or my entire application? Question

Hi @GB44, If you want to add CSS to the whole application, using your example, you can add it here, [image] If you want to add CSS to a particular page, you have to open the settings popup (Click anywhere on a page) and include the CSS in the HTML header section, [image] PS. Remember: You might have to add ‘!important’ to ignore Bubble styling. eg. a { outline: 0!important; }

image1208×1326 133 KB

Really appreciate your kind help, Niven.
Happy Bubbling!
Jun

system · 2021-02-23T18:57:47.032Z

This topic was automatically closed after 70 days. New replies are no longer allowed.