Its hard to follow what you are saying, I would suggest to expand and share a repro link
I'm grateful for your response. How may I share the link?
Thank you in advance!
Should I share it here or privately
I will expand now.
So we add animotion code from the market. It has CSS code, in addition to other codes like html and Java.
I learned that I can modify the code and edit it.
I chose expand value to my accordion.
I wanted to use expand for another element and that is the seperator between my services.
So I changed the "hight" value and replaced it with "width" to apply the expand on my element in a good way.
It worked completely.
But when I checked my accordion, I found the accordion animation is now totally changed according to the width value.
So I tried to get another animotion code from the market. I thought it will come with the standard values so I can make the accordion animation normal again.
But it wasnt. The values in the CSS code of that one was the same as the values in the one I modified.
So I can't modify animotion code for one element and then keep the distributed codes in the same page to be intact
Thank you in advance @Oleg Isonen !!
May I know if there's a way around it please?
@John Siciliano do you have an idea about how I can edit one animotion code without changing in other places?
I want to use "expand" with "width" and "hight" variables in the same page
All I did was replacing "hight" variables with "width"
But it changed in all animotion codes I have on the page
Not sure I totally follow but expand uses the following CSS variables
--newHeight: var(--custom-height, var(--radix-accordion-content-height, var(--radix-collapsible-content-height, 100%)));
By default, it falls back to radix stuff as that's where its primarily used. But you can override that by defining --custom-height css property
Thank you for your support, I'm really grateful for that.
I did override it and replaced all "hight variables" with "width variables, but I faced one little issue.
I would like to use expand (with hight variable) for FAQ accordion,
and expand (with width variable) for a box separator.
Both at the same time.
It turned out I can't do both simultaneously cause I tried so many things like getting another code from the market to override it, but didn't work separately.
I also have another issue with duration of animations.
I can't set a specific duration for each animation because it's rooted for all animation types.
I did some research that taught me a bit. I now know I can add "Ani-duration" variable somewhere for each animation, but I have no idea where.
I'm just trying to gain some flexibility in setting animations and durations for each specific ones.
Sorry for the long paragraph 😅
:root {
--accordion-duration: 0.5s; /* Default duration for accordion / --separator-duration: 0.3s; / Default duration for box separator /}/ For the FAQ accordion /.accordion { transition: height var(--accordion-duration) ease; / Adjust height animation / overflow: hidden; / Hides overflow content /}/ For the box separator /.box-separator { transition: width var(--separator-duration) ease; / Adjust width animation / overflow: hidden; / Hides overflow content */
}
If we can make something specific like this one, that would be amazing.
I found this code
Those are css variable which can be defined in the advanced panel. See our YouTube and watch any CSS variable tutorials such as CSS vars 101
I really don't know what I've done without your videos, you're incredible.
I just realized I used css variables for menu list like you explained in the video and it worked amazingly well.
Are there other resources for animotion, please?
Local changes coming soon 🥲
I was making global changes all along
I still don't have a good grip on css variables to make local changes with animotion
Can you please make a tutorial on it? 😁
You're so good at explaining more than anyone else tbh
Oh whoops yeah that's already out. Updated doc to remove that. I probs wont make a video on it, at least anytime soon tbh. I think it's too niche. Maybe I'm wrong.
Doc says this:
To adjust settings for a specific section, set the variable within that section using the Style Panel > Advanced > +, and specify the variable and its new value (e.g., --ani-duration and .1s).
If anything I'd just clarify the docs so let me know what dosen't make sense/what you try
Thank you so much for your amazing helping spirit
It was simpler than I expected
I was only wanting to set a different duration to different components for same animation
I thought I had to define new variables and put in the CSS code of animotion
I was all over the place desparate to find a way
I didn't think about using the globally defined variables locally
Webstudio is the best website builder ever!!!!!!!!
is it applicable to use any css variables you defined globally and change it locally.
Like for example replacing hight with width locally?
Yes you can override global css variables locally with whatever values!
Thank you so much John for your amazing hospitality and this incredible software!
