Andrew Tavernor recommended me to post here after posting this om the realmac forum. Hope someone can help me out !-)
I’m trying to build an animated multilayer image with Section Pro and Section Box. The images stack up very well and appear as one image on the website. So far so good :slight_smile:
Getting all the layers to animate-in with the animate settings provided with SectionPro is challenging at the moment. Only the background layer works according to the settings. All the other layers appear at the same time.
I have a simplified project available via: https://we.tl/t-nkdukzQCE0 (download available for 7 days)
The ulitmate goal would be to have each layer animate-in on a form field selection. For example: Booking a video studio: If you add the option of stuidolights and a camera that the studio lights animate in and also the camera etc.
I had a quick look at this and noticed a few things.
You have an animate setting for Box 3 but you don’t have a Box 3.
Also your animation is working as far as I can tell, but the delays and durations are too small, i.e too short, to make it noticeable. I increased many of the times by 10x, and then I could see the individual animations.
Remember that 200ms is just 0.2 of a second. Using 2000ms will give to 2s which you will see.
Beside the missing box id 3 target (which seems to be irrelevant) I couldn’t find a way either to make section box content to appear according to the (delay) settings specified. The first 3 boxes always appear at once.
I didn’t take the time to go through all the animations, but I was able to have the images appear one after the other - here are my suggestions:
-
the preview in RW seems to quickly show the image before the animation actually happens. When you preview in the browser (e.g. Safari), the animation works fine (e.g. appears out of nowhere)
-
Build up your animations one by one, checking that it works every step - it is difficult to troubleshoot when having multiple different animations all happening at once. I needed to take animations and images away to see what is happening …
-
start with a simple animation like ‘Fade-In’. Once the image appears as desired, you can switch to the other animation and check its working then
-
use very generous delay times between the different animations (e.g. always 2000 ms longer), such that you can visually follow the animations. Once it is working as desired, you can reduce the timing again
-
you started several animations on ‘page load’ - I suspect the short animations with little delay might be done before everything is loaded. Not sure, whether it is a problem, but I used the ‘hover’ trigger to have control when the animations should start. Once it works, you can go back to ‘page load’ or ‘when in view’
-
When your Section Box images needed to be floating, you selected the positioning relative to ‘Parent Stack’ - I switched to relative to ‘Section Pro Parent,’ which then made the animations work properly (i.e. not immediately visible)
Hope these ideas will help you to get it to work on your side - again, I only played with the first three images/animations, and followed the steps above (larger delays, only fade-in, hover trigger etc.), and it worked as expected.
@GKs Thanks so much for helping Gerd. Really appreciate it at this time while I’m stuck in a delivery van!
Thanks all of you for responding! I currently in the proces of testing everyones tip. So far not very succesful sadly. Once the animations work the layering of the images gets messed up.
I have to find a quiet moment to do a step by step rebuild.
You can use your test project and create a second page - this allows you to copy the elements over step-by-step, while testing your progress. You don’t have to recreate it from scratch.
If I find more time later, I can keep modifying your example and send it back to you - of course only with fade-in animations to keep it simple
Here is a DropBox link to your modified project file:
Please note, that I changed all animations to ‘Fade-in’ with a timed delay to see them appear one after the other. Animation #3 wasn’t linked to anything, and you animated both the background image and the seemingly same image in Section Box 1 - (I might be wrong as I didn’t spent the time to ‘reverse engineer’ your thinking without further explanation). You seem to use Foundation, but I deleted the base stack, as it was not necessary for the demo. All the modified project is demonstrating, is that the individual images can appear in sequence after being triggered by hovering over the image. Please preview it in the browser, and then adjust the timing and animation filter one-by-one to achieve your desired outcome, hope this helps.
What image stack are you using?
I only modified his project, and just realised that he used the Foundation (old) Image stack - I should have left the ‘Site Styles’ stack in there, too - otherwise the images look unscaled.
So, yes, looks like his project was made with Foundation (which I have, too), but I don’t think the specific image stack matters in this case. Though for anyone else w/o foundation, the project file might not be directly useful …
Wow Gerd, you saved my day. It works!
Indeed I used the ‘old’ Foundation image stack. For Foundation 6 it needs to be the picture stack. At first I also used the picture stack in the “old” foundation and mixed them up.
I really appreciate that you took the time to figure this out! Thank you very much!