Hello, I’m trying to apply a scroll in effect I already watched the video tutorial a few times but for some reason my column doesn’t behave as expected sometimes the effect kinda works and the next time it doesn’t. Maybe I’m doing things wrong but I can’t seem to figure it out so I decided to contact support. Will be adding the login details in a secure note.
Thanks in advance.
Cheers.
@SchoonhovenOntwerpStudio, thanks for writing in! I’ll be happy to help provide some more context for working with Effects to help you achieve your desired result.
So you mentioned that you’re wanting your image to come into view when the Section is “fully visible” and disappear when the Section is almost out of the viewport. The thing to remember with Effects is that they are directly related to the positioning of the inspected Element only. This means that your Effect timing of one Element cannot be based off of another Element’s positioning, you have to time it and specify it based on the Element itself. This makes the most sense anyway, as for almost every situation of wanting to trigger an Effect, you’ll want to trigger it when that Element itself is in view and then operate on it.
As for timing your Effects, the Offset positions are triggered like so:
So our Effects timing is all based off of the TOP of our Element hitting either the TOP or BOTTOM of our viewport. And really, the Top Offset is only used for the In - Out behavior.
So think of it more from the standpoint of: “How far should the TOP of my Element come into view when I want to trigger its IN positioning and how far AWAY FROM THE TOP of my viewport should the TOP of my Element be when I want it to go back to it’s OUT positioning (if you’re using ‘In - Out’ behavior).” There’s no specific value we can provide to achieve a certain result, as it’s really a matter of trial and error with your content, how long your timing transition, and how you want the Effect to be applied.
Hopefully this information will help you time things out a little better and provide some more perspective for you to achieve what you’re after. Cheers!
Hello @Kory, can you maybe have a look if everything is working as it should? Your explanation and video are quite straight forward but on my end this isn’t working at all. I tried already so many different things but nothing seems to be giving any consistency in behavior so I keep thinking that maybe something else is going on.
Thanks once again.
Cheers.
@SchoonhovenOntwerpStudio, thanks for writing in. I logged into your site and took a look at your homepage, and I think before you even start playing around with the Effects module, it would be good to take some time to refine your general page layout and markup. For instance, I see that you have lots of hard dimensions set on various Columns throughout your page, we encourage people to only use these values on Columns / Cells if they have a very specific layout need in mind. For most people, setting a simple layout on the Row itself will get you where you need to go. Because of the numerous conflicting widths and heights set throughout the page, I couldn’t even really deduce how you were attempting to structure things at the moment.
Effects are an additive feature meant to enhance an already solid foundation in structure and design. I would first recommend starting with a clean slate, do not use any hard dimensions on your columns at this time, and just get a couple simple Sections setup—maybe one with your four white buttons, one with two columns and your images you want to come in—and once you have that in place and you’re not fighting general layout concerns, try adding some simple Effects and playing around with the offsets and other things to get a sense of how things work. Cheers!
Thanks @Kory I will start with that, the fact that I wasn’t aware of creating these conflicting dimensions in my layout probably says enough. So thank you for your time and advice and I will start over and see how that goes.
Cheers.
Hello @SchoonhovenOntwerpStudio
Glad that we were able to help you. Please let us know how it goes. Please feel free to reach us if you have any query.
Have a great day!
Thanks
This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.