[Feature] Any progress on the drag effects?

[bobmulder]

At your todo-list I see 'Add drag effects e.g. zoom, blur, darken'. The zoom functionality seems to be useful for my app :)

So, whats your 'state' on this feature? I can imagine you don't have any code yet, but do you have any idea for the implementation?

I guess the drag effects should be done on the background-side of the page right?

Maybe I can help ;)

[zachgibson]

I’ve experimented with zoom and darken, but I hadn’t really landed on the API.

Here’s a possible API for this:

<ParallaxSwiper
  effect="zoom"
  effectConfig={{ fromValue: 1, toValue: 3, extrapolate: 'clamp' }}
>
...
</ParallaxSwiper>

What do you think? :)

[bobmulder]

Good to hear!

The API is okay, but not very clear to me on first sight. Maybe we can look at Animatable, check out the properties of the Animatable object...

[zachgibson]

Yeah I agree it is confusing. Animatable looks really cool, but not sure some of those prop names translate to how these scrolling animations work. Since I expose an Animated.Value and you can do any animation your heart desires, I think I just want to add this as a basic add-on with no configuration for now. It will be animations that I come up with or re-create from other apps and have as an option for ParallaxSwiper to just plug and play.

Like:

<ParallaxSwiper pageAnimation="zoom">
...
</ParallaxSwiper>

[bobmulder]

What about:

<ParallaxSwiper zoom={true|false}>
...
</ParallaxSwiper>

Or:

<ParallaxSwiper effect={ParallaxSwiper.Effects.Zoom({1, 2, 'clamp'})}>
...
</ParallaxSwiper>

(referring to your configuration before)

[zachgibson]

I haven’t thought of any other effects besides zoom, blur, and darken. So maybe something like this would work just fine:

<ParallaxSwiper zoom={true} darken={true} blur={true}>
...
</ParallaxSwiper>

You can have any combination of these or none at all.

[bobmulder]

But these effects should be 'triggered' by certain drag-events right? What kind of? And how are they defined?

[zachgibson]

They are triggered onScroll like the parallax (translateX and translateY). What do you mean when you ask how they are defined? Like defining how much zoom aka scale() you want?

[asciifaceman]

@zachgibson are you using panHandlers for this?

[zachgibson]

@asciifaceman Nope, just Animated ScrollView. I interpolate the Animated scroll value.

[asciifaceman]

iiiinteresting

[zachgibson]

I do like the idea of implementing stuff like react-native-parallax-swiper with a gesture handler because you get so much flexibility, but on the other hand they don’t feel native. But with a lot of tweaking you could probably get it to feel native. i.e. getting all the timing, easing, thresholds, bouncing right.

I wonder if UIScrollView and ViewPager have there configuration values documented somewhere. Or if you could log them.

[asciifaceman]

Yes, I was just curious how you were able to get the movement information which is something that still feels really immature in native any time I've tried to touch it. I had dug around the source and didn't see any panHandlers and wasn't sure if I wasn't looking in the right place! I agree that they are stiff as well.

[zachgibson]

This first paragraph explains it. Using this with useNativeDriver={true} so it’s all natively driven. Can’t do this yet with PanResponder but react-native-gesture-handler is looks promising.

[asciifaceman]

Yeah I've found the PanResponder to be really, really lacking. Gesture handler requires linking which for me is a huge turnoff, but increasingly hard to get around :(

[zachgibson]

Why is linking a turn off for you?

[asciifaceman]

For my specific use case it is because I develop on the expo api rather heavily to take advantage of a few things for rapid prototyping etc etc.

Linking means ejecting or using expokit and losing their automatic building, it's my own failing in skill to take it on myself (which I should get over) lol.

[zachgibson]

Haha nah man Expo is great! You can actually use react-native-gesture-handler in Expo.

[asciifaceman]

Yeah I know thats one of the ones they added to their API iirc

[bobmulder]

Just to be sure, what do we mean with the drag effects? About the zoom functionality I thought it would be possible to zoom into your picture (like you do at a photo-app) after you scrolled into it. I understand you guys mean an 'auto-scroll' feature based on the Animated value when you swipe into a screen?

[zachgibson]

@bobmulder No I was referring to adding scroll-based animations on your pages in addition to parallax. e.g. as you scroll, the background component—an image let’s say—starts to increase it’s scale (zoom).

[bobmulder]

I was afraid of that ;) but it's good to have this clear :)

[zachgibson]

ScrollView on iOS works out of the box for image zooming, Android does not. But there seems to be multiple options to handle this. Like react-native-photo-view.