Wow with Foundation Framer 6

User 244626 Photo


Registered User
811 posts

Adding animations and control to Foundation Framer 6 including scroll activation for elements
Put this...
wow/1.1.2/wow.min.js (search for this on cdnjs.cloudflare.com)
as a link in the Head or in a script in the Footer
Go here...
https://github.com/matthieua/WOW
and go down to the part that says JavaScript and copy into a script in the Footer. (This could be put its own js file and then link to it what ever you name it)
Add to the class of the the element you want to animate "wow" and "animated"
Add in the attributes data-wow-duration="2s" data-wow-delay="5s" data-wow-offset="10" data-wow-iteration="10" (you do not need the quotes for the data values you are gonna fiddle with)
Go here to read more...
http://mynameismatthieu.com/WOW/docs.html
enjoy:D
Bootstrap 5 CSS Grid.
User 244626 Photo


Registered User
811 posts

Twinstream wrote:

Add to the class of the the element you want to animate "wow" and "animated"


The above needs a animation of course "ha"
Add to the class of the the element you want to animate "wow" "animated" "slideInLeft"

Bootstrap 5 CSS Grid.
User 244626 Photo


Registered User
811 posts

Twinstream wrote:
Twinstream wrote:

Add to the class of the the element you want to animate "wow" and "animated"


The above needs a animation of course "ha"
Add to the class of the element you want to animate "wow" "animated" "slideInLeft"



and I forgot step 1 which is on this page http://mynameismatthieu.com/WOW/docs.html (add the animate.css to the head and link)

and you probably do not need the "animated" as a class of the element
Bootstrap 5 CSS Grid.
User 2846109 Photo


Ambassador
341 posts

Thanks for the new thread! I think I tried all of this but I missed putting that js code it I think. I think I had some other wow js saved as a file, though. I'll definitely be working on this!
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

Here is a FF demo project showing a simple example and the settings I used.
Attachments:
Bootstrap 5 CSS Grid.
User 2821938 Photo


Registered User
17 posts

Hello
It is possible to insert it into BB?
User 244626 Photo


Registered User
811 posts

Yes it will work in BB also. It will work for adding effects to FF orbit slideshow and BB Carousel.

I am thinking already of saving a orbit slideshow as a component to use over and over again. One thing I noticed when I was editing a similar setup in BB carousel is it can be difficult to add slides and edit them easily do to content being below the container. My take is to create a blank page in my project and add the (ortbit or carousel) component I have saved to that page and do my edit there. Then I can save that slideshow as a component and go back to the page I want it on and insert it. Basically what you are doing with RCS. One could even leave that blank page the slideshow is on to upload without any linking. Sometimes I just want to send a email to a customer with a link to a slideshow for something I sell. I could use this quickly.
Wow is basically using animate.css and adding scroll and timers and stuff. You can link to animate.css and get into the other deeper settings and do some really cool things like bezier curves and stuff.
Bootstrap 5 CSS Grid.
User 2846109 Photo


Ambassador
341 posts

Thanks Twinstream! This will really help getting going with the wow animations.

FYI, you need a 's' after the data-wow-duration value entry, such as 10s or 1s or 1.25s

Looking forward to playing with these!
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 2846109 Photo


Ambassador
341 posts

I really hope we get the feature to save and use components from project to project soon. It would be nice to share components on the forum as well.
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:
I really hope we get the feature to save and use components from project to project soon. It would be nice to share components on the forum as well.


Yes, and a folder structure for components would be awesome.
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.