Scroll Effects Question

Beta
#1

First of all. Congrats on the launch and well done :slight_smile: very impressed with Pro4.

I’m still trying to wrap my head around scroll effects so this may be an incredibly stupid question but here it goes:

With the new scroll effects, they appear to be triggered by viewport percentage (top / bottom) but do not necessarily appear to be relative to those percentages (no idea if I’m using the correct terminology).

For example, the viewport position triggers the effect start but has no control over current effect-state relative to scroll. So am I correct in assuming that I can’t accomplish something like the phones in the header in this example here. Where they move to their respective positions and back based on current viewport position?

Thanks in advance for schooling me on how the internet works.

1 Like
#2

Hi @DoncoMarketing,

You’re correct, the effects are triggered by an offset at which point they fully transition in or out. There isn’t a way with our effects system to reproduce the behavior on that site unfortunately. Our system lets you define the enter and exit transforms. These are defined as a set of styles that get added and removed with a simple class toggle.

What you’re seeing on that page is more involved because they’re using javascript to dynamically set the transform values by interpolating the scroll position. That approach is really specific to the content you’re working on and isn’t readily compatible with the techniques we’re using.

I’m sure it would be possible with the right custom javascript, and there are some ways to leverage our effects as a starting point. For example, add a base Translate effect (not scroll effects) and set this as the X value: calc(var(--shift-left))

Now add this to your element CSS:

$el {
  --shift-left: 30px;
}

You’ll see it pulls that variable through. It’s a bit more than I could get into here, but it’s possible to make a custom JS function that is updates --shift-left as an inline style on the element based on the scroll position.

This would be completely separate from the scroll effects of Pro since you’re dynamically updating the base transform using CSS variables instead.

Hopefully this helps provide some more context!

1 Like
#3

Hi @alexander - appreciate the detailed response. Totally makes sense.

This is one of those things that I realized Elementor includes in their pre-built scroll effects (as I understand it) so was just curious if I was missing something on the Pro scroll effects since they use much of the same terminology.

Was considering attempting a layered product construction / deconstruction on scroll but the trigger vs scroll position might make that tricky.

Regardless, great update and not complaining. Just learning.

Thanks.

#4

You’re welcome! Might be something we could come back to down the road, or perhaps we could do a video tutorial (would be pretty advanced, but should possible to follow along) doing the technique with some javascript.

1 Like
#5

Hi @alexander ,

When the effects section was added I was hoping to be able to achieve the same effects as Skrollr. Is this something you guys would be able to look at adding, as I am seeing more and more of my competition (web designers) using these effects on their site.

https://prinzhorn.github.io/skrollr/

Above is what I believe is used for the sites mentioned.

Thanks, Tom.

1 Like
#6

Would I be correct thinking I can use the Pro builder and assign the CSS to elements and Grid items to talk to the Skrollr JS as seen here?

Thanks, Tom.

#7

Hi Tom,

I see what you mean. Regretfully no, that isn’t possible. We don’t have a way to do effects based on interpolating the scroll position like that. You might be able to use a similar technique to what I described above to combine our custom attributes control with that library.

#8

@alexander - Would it not be possible to incorporate a basic scroll position interpolation that simply allows the picking of predefined motions based on screen position? The way the competition does it (as I understand it) is move left, move right, move down, move up. Once motion direction is selected, you define the viewport position of movement and adjust element movement speed.

That example link used above was recreated in the competition using only these parameters.

Screen Shot 2021-01-05 at 9.21.05 AM

1 Like
#9

Thanks! Yes, I’m sure it’s possible - it’s just quite a bit of work to get all the built out in a way that “just works” with everything else it will need to integrate with. They did a good job making all that feel simple while under the hood there’s quite a bit going on.

1 Like
#10

@alexander - completely understood. Definitely don’t mean to underestimate the time & skill it takes to boil a feature like that down so simply. But if anybody can do it… Themeco can :slight_smile:

In all seriousness though, would be a great feature to one day see. Appreciate you taking the time to entertain this thread.

#11

Thanks! Definitely opportunities here for some really cool stuff down the road. I imagine it might be after or alongside the Theme Options reboot when we come back to reconsidering all that. The current cycle will be a short followup to expand on Loopers, Element Conditions, and round out some of the more directly actionable feedback items.

1 Like