Hello! I’m using Foundry 3 to rebuild my website, and while doing so I found the beauty in the Transition tool. Unfortunately if I use transition on my home page, a lot of functionality breaks (notably the background images for my portfolio and contact sections). I thus created a nice landing page with a cool intro transition. Funnily, the transition stack seems to be creating an extra white area at the bottom of the landing page. Removing the transition stack cures this, but I’m curious to why there would be some extra space created with the transition stack and if there is anything that can be done about this.
I’m also getting a weird glitch right at the end of the transition on the very left-hand edge of the picture, but that reproduces in chrome and not in safari for example.
The Transition tool is one that should be used sparingly and on simple pages, that is for sure.
Provide me a copy of your project file please.
Create a ZIP file containing your project file. This is the file you open in RapidWeaver to edit your site. After creating the ZIP file, upload it using a service like Dropbox, WeTransfer, Droplr, or a similar service to create download link for me. Paste that download link in your reply.
The image on your landing page needs to be a lot smaller. It takes a long time to load when not cached. This means it’s slow for all new visitors, and they my bail waiting for it to load.
It’s over 630k. It’s 2948px by 2300px. You should also play with compression to get it much smaller.
Yeah, I’ll be looking at correctly sizing the images once I get the layout sorted out and all bugs fixed etc But good point, thanks! I don’t even know whether I’m going to use that or something else on the landing page or a landing page at all to begin with, so I’m not worried about that for the time being.
The extra space is created by the Zoom Out effect you’ve chosen. The animation has to start somewhere and since it begins beyond the bounds of the browser’s visible area it is creating spacing at the bottom because you’ve also enabled Parallax scrolling in your Background tool. This wouldn’t be a problem with normal pages, but yours is a bit of unique situation.
You can see what I mean if you switch the animation from Zoom Out to Fade In instead or if you simply turn off the Parallax effect on your Background.
