Cubic-bezier () function - Post ID...

User 122279 Photo


Senior Advisor
14,647 posts
Online Now

You probably have seen that I'm trying to create building blocks for the CC responsive sitebuilders, mostly SDv3 nowadays.
I have come across some kind of transition like this:
transform: translateX(-100%) rotateX(40deg);
transition: all 400ms cubic-bezier(1, -0.4, 0.44, 0.985);

a couple of times.
How would I include that cubic-bezier function? Suggestions? Adding it as extra styling to Settings?
Ha en riktig god dag!
Inger, Norway

My work in progress:
Components for Site Designer and the HTML Editor: https://mock-up.coffeecup.com


User 2903050 Photo


Registered User
260 posts

If I understand, I would give the object a class of say .fancy-transition or whatever name. Then add your code to the head on settings page in <style>
. fancy-transition {
transform: translateX(-100%) rotateX(40deg);
transition: all 400ms cubic-bezier(1, -0.4, 0.44, 0.985);
}
</style>
User 122279 Photo


Senior Advisor
14,647 posts
Online Now

Thanks. It's something like that I was thinking of. I just wondered if there was something 'well tucked away' in the programme to take care of it. ;)
Ha en riktig god dag!
Inger, Norway

My work in progress:
Components for Site Designer and the HTML Editor: https://mock-up.coffeecup.com


User 2903050 Photo


Registered User
260 posts

It would be nice to be able to add to the CSS file within the program???
User 122279 Photo


Senior Advisor
14,647 posts
Online Now

Yes, absolutely.
Ha en riktig god dag!
Inger, Norway

My work in progress:
Components for Site Designer and the HTML Editor: https://mock-up.coffeecup.com


User 244626 Photo


Registered User
811 posts

Inger wrote:
Yes, absolutely.


Transitions are under the Effects tab. To make a transition you need two states. Hover is a good example. Set the state of a button to regular In State and adjust the opacity to 50%. Then change the state of the button to hover and adjust it to 100%. Then while still in the hover state add a transition. Target only the opacity instead of all. Pick your transition, ease, linear, ease-in-out, ease-in, or ease-out. Set duration and a delay if needed.

Now the button will go from 50% opacity to 100% opacity.

It would be nice if they added the additional cubic-bezier also but ease-in should get you close with a adjustment to the duration.

You can also add states to the list of In State by creating a Dynamic Class of your own. Then toggle that class with a button that has data-toggle. You can also target multiple id's at once with data-toggle, just remember that none of the id's can have a dash in the name, like sub-nav or it will not work.

You can add your transform translate rotate thing in to a transition also. Just need two states to transition from and to.
Bootstrap 5 CSS Grid.
User 2846109 Photo


Ambassador
341 posts

Maybe open a service ticket to request the cubic-bezier option be added for the transitions? If it's not too complicated it might be something they'll add during some of the updates.
http://www.pixelandpoly.com/ (built with Bootstrap Builder)
Video Tutorials - https://www.youtube.com/channel/UCQMcF0 … EKA/videos
The Universe from A to Z - https://universeatoz.com/ (built with Foundation Framer)

Have something to add? We’d love to hear it!
You must have an account to participate. Please Sign In Here, then join the conversation.