Is there a way to use the Foundation Animate Stack to animate on hover? I guess I can do it with BWD Button Plus, but I’m using some custom images that I made to act as buttons, and as near as I can tell (sorry, newbie here) Button Plus just works with Font Awesome. I’ll go that route if I need to but I was just curious if I could make it work with my own icons? Thanks.
Foundation animate cannot be triggered by hover unfortunately.
If you want ultimate flexibility, just use SectionsBox with SectionsPro Animate. You can use anything as the content and it works great with images - from “simple icon button like” animations to full blown hover captions. http://sectionspro.bigwhiteduck.com/box/
That entire demo is available as a downloadable project file to get you started.
5 Likes
Thanks so much. That sounds like exactly what I want to do. Have downloaded the SectionsBox and SectionsPro Stacks but I can’t seem to locate the project file you mentioned. I think that might help as I’m in over my head starting from scratch.
Go to this page:
https://www.bigwhiteduck.com/stacks/sectionsbox/
and click on the DOWNLOADS button to find the demo
2 Likes
Perfect. Thanks so much. Was missing the bit about adding Animate Elements to the Section Pro Stack. I’m just trying to add a little movement on hover to some custom made icons and this does it exactly! I appreciate your help.
Okay. Apologies again for being such a newb. I’m definitely missing something when it comes to resizing elements, backgrounds, etc. I’ve built a simple banner with a little animated custom icon (using Sections Pro and Box (thanks Andrew) and all I want to do now is resize the animated icon while leaving the background banner the same size. Everything I try just sizes down the background along with the icon. I’m sizing down the icon by changing the Layout Fill Mode to Flexible and pulling it down. But as you can see by the attached images everything is going with it. Like I said, I’m clearly missing the obvious “resize element only” option. Any thoughts. Thanks so much.
I can’t see your layout there but there are two simple ways to animate the size of an element within the Section.
Both just involve using the Scale setting in the Animate Elements child stack. You can use either the KenBurns motion animation or advanced setting.
Set the start scale to 1 and the end scale to something smaller, for example, 0.6. This will make the finished size 60% that of the original. Note that you do not need 2 different images to do this - just scale the one original.
The difference in the 2 ways available is just on how you target this scaling element in the animate stack:
If it is the only foreground element in the Sections stack you can simply select Foreground Content (DropZone) in the Target setting of the animate stack.
If you have other content that you don’t want to scale the the image should be put in a Sections box. This way you can give it a Box ID and then just target the animation at that ID rather than all of the contents.
You mention that you are using BOX so the latter would seem appropriate.
Also, don’t forget that if this image is the only content in your banner then it will be giving the Section its height - i.e if you shrink the image the Section height will be reduced. I presume you don’t want this. Just set the Section height control to proportional to section width and the height will be independent of the content.
You are most welcome to send me your layout to the BWD support email and I will show you how its done. It may save some time. There are also many examples in the download project for Sections Box that use exactly this technique of zooming content. The Box icon on the homepage of the demo does it too (plus a spin, shift and colour change) but the principle if the same.
1 Like
@adman17 I’ve made you a super simple example for you.
Only 3 settings required:
Change the SectionsBOX id to: 1
Set the Animate Elements stack target to SectionsBOX 1
Set the Zoom scale in the Motion Animation settings.
You can see the result here: http://sandbox.bigwhiteduck.com/simple-animation
and here is the project file for you http://bwd.d.pr/i7BJ
PS - That is set to animate on page load - just change it to hover if you want as per the title of the thread.
2 Likes
Thanks so much Andrew. Truly above and beyond the call of duty! I’m actually doing pretty well with the animation aspect of Sections Pro & Box. It’s more of a general problem sizing elements. Between “Equalize Height”, “Flexible Height” “Content Width”, “Layout”, “Flexible Fill Mode”, etc, etc, etc. I just don’t know what does what.
I’m coming from a background in Video editing and compositing so I think in terms of re-sizing elements, cropping, masking, etc. on individual elements - without necessarily affecting others.
You’re spot on with your comment “if this image is the only content in your banner then it will be giving the Section its height”. I think that’s the crux of my issue. Is there an easy way to add “dummy” content to a Sections Pro stack to set the height? Or is that where I should be using the Section Height control set to proportional? And that needs separate variables for Mobile and Desktop?
You too are spot on, if all the content in a Section is floating then you need to use the Flex height controls to give it some height.
If you set it to proportional to section width, then it will behave analogously to a responsive image (and most other elements) in that its height will decrease proportionally with its width. The reason for the separate aspect ratio for mobile is really to handle the discrepancy between scaling a landscape image into a portrait sized viewport. When used along with a separate “mobile” image in the background child stack, you can then provide a different crop for small screens which can often improve things.