Hiding/Showing A Div - Post ID 268643

User 434929 Photo


Ambassador
938 posts

User 2846109 Photo


Ambassador
341 posts

Twinstream wrote:

I assume you are linking the mui ?
<!-- Insert this within your head tag and after foundation.css -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/motion-ui/1.1.1/motion-ui.min.css" />


Haha don't assume anything here! ;)

I didn't put that into the head but I just tried putting it in head section in RFF and it didn't work, and also tried just adding it to the html in chrome in the head and that didn't seem to work either.

Thanks for those links, Mansour! I'll look at them. I must admit that as a non-coder integrating many of these elements into RFF can be quite daunting but I'm going to keep on pushing/learning. :)
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)
User 244626 Photo


Registered User
811 posts



Great links and video(s) Mansour !

Learning lots !
Bootstrap 5 CSS Grid.
User 2846109 Photo


Ambassador
341 posts

Does anyone have a RFF project they've build that has any of the 'wow' or 'animate' elements in it that they could share? I still can't get any of those to work in RFF.

Thanks!
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)
User 244626 Photo


Registered User
811 posts

Jeff wrote:
Does anyone have a RFF project they've build that has any of the 'wow' or 'animate' elements in it that they could share? I still can't get any of those to work in RFF.

Thanks!


Really if you just want the animation like "tada" on a heading you first make sure you link to the animate.css file in your header. I download it and add it to a folder in resources I create named css. Then I choose it and link. (When exported then the folder is the same as the other css so it is added without destruction. I do the same with JS too....

After that it is simply creating a class "animated" and "tada" on your heading class and thats it.

Now adding additional control of that is another story. If you want duration, delay, and all the other deep diving stuff in animate.css you are going to have to use javascript to pass the FF attribute you create to the correct name of the control effect. I started to do that but found out some info for BB that showed me how to apply that to a slideshow. There was not anything I could find for FF but always thought of coming back and advancing it. I will see if I have a FF slideshow with the animate.css to share or the codpen for the BB carousel with duration and delay with the javascipt code. You might be able to transfer the same logic.

Please keep in mind I have no idea what i am talking about....just learning as I go.:rolleyes:
Bootstrap 5 CSS Grid.
User 2846109 Photo


Ambassador
341 posts

I think we're on the same page and we're learning as we go here... and I'm totally good with that! lol

I'll post what I have so far a little later today and maybe upload the current one to my sdrive. But I have the js and css min files downloaded and imported into my resources in my RFF file. I think I have all the classes needed but I'm sure I'm missing something. Just not sure what.

Not sure if we should start a new thread for these wow and animate.css questions??

to be continued....
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)
User 244626 Photo


Registered User
811 posts

Ok I should apologize. I was trying to answer something I did not even know the question to. I downloaded Masour's project file and see the animation. I went to the container with the class "callout" and the data attributes data animate and data toggle. I went to transitions and selected ease-in. I adjusted to duration to 2 seconds and the delay to 1 and it controls the animation. Is this what you are looking to do ?
Bootstrap 5 CSS Grid.
User 244626 Photo


Registered User
811 posts

Here is an old file I created for a orbit slideshow with animate css. No duration or delay though but has all the animate effects available.
Attachments:
Bootstrap 5 CSS Grid.
User 2846109 Photo


Ambassador
341 posts

Twinstream wrote:
Ok I should apologize. I was trying to answer something I did not even know the question to. I downloaded Masour's project file and see the animation. I went to the container with the class "callout" and the data attributes data animate and data toggle. I went to transitions and selected ease-in. I adjusted to duration to 2 seconds and the delay to 1 and it controls the animation. Is this what you are looking to do ?


Thanks Twinstream, yes that's what I'm trying to do. I can get an element to animate in. And when I apply a transition to the element I can get the delay to work but any change in the duration value does not affect it at all. Can you try on your end and put in a duration of 5 sec to see if actually changes it? It's not on my end.
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)
User 244626 Photo


Registered User
811 posts

Yes it is duration.....5 sec or 10 seconds it slowly takes to become flipping downward and stop. 0 delay.
Try redownloading the project ? Container with "callout"
Bootstrap 5 CSS Grid.

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.