[PAID](Version2)AnimScroll - Introducing Parallax Effect Extension 🥳 🥳 🥳

Introduction

Introduction

Hey guys, you can easily create any type of Parallax Effect or Custom animated Title Bar.
There are total 24 blocks in this extensions but according to me mainly two block is important to understand.

Layout Understanding

Layout Understanding

Layout must be something like this


You have to take vertical scroll arrangement inside the Vertical Arrangement also the first Vertical or Horizontal Arrangement inside Vertical Scroll Arrangement will be treated as TopBar Layout(Or you can say custom title bar…).

Picture of blocks

Picture of Blocks

Introducing Blocks

Introducing Blocks

So starting with two most important blocks.

First is Register Block
image
1. arrangement - In this you have to set your vertical scroll arrangement the you have to taken inside Vertical Arrangement.
2. topBarHeight - The final height you want for your Top Bar or title bar

Now the Second block i.e. Add Animation
This block may be little bit tricky to understand.
image
Let’s talk about the parameter it accepts
1.component - component you want animate.
2. propertyName - The property of the component you want animate. All the property is given as block mentioned above in picture of blocks. Or you can pass a string value like Height,Width,Alpha,PositionX,etc.Property values is explained below.

  • All the Positioning property like TopPosition, BottomPostion, LeftPosition and RightPosition that need coordinates must be givn in px value from top or Left of the parent layout.
  • Property like Height and Width must be in Px value you want.
  • Property that controls opacity of any View like Alpha must be between 0 to 1.
  • Property like Scale,ScaleX,ScaleY can be any positive value.
  • Property like Rotation,RotationX, RotationY can be any positive or negative Value

3. fromValue - The value for property of component you want when Vertical Scroll Arrangement is not scrolled or when scroll position is 0.
4. toValue - The final value for property of component you want when Vertical Scroll Arrangement is scrolled till the max scroll position you gave in toMaxScroll.
5. toMaxScroll - The value of maximum scroll you want to reach the final value of property.


Using these block you will get value of component
But Positioning block like TopPosition, BottomPosition, LeftPosition and RightPosition will return the postion in px value that you can understand easily.


This block can be used to pass as parameter in propertyName of block AddAnimation.In case, if you don’t want to pass property name by String.

Example

Example

There are many UI you can create. So giving the example of very basic animation used in many app.
So lets have preview first.


So from above video you can see TopBar hides the app title and sticks only with SearchBar.

So now have a look in arrangement first.


Here TopBarLayout have fixed height of 115px and the height of Label arrangement is 50px and the heights of spaces is 5px and 10px respectively.
So sum of Height of label arrangement and spaces is 65px.

Now lets have a look at blocks


From Register block the first arrangement will be sticked and also I am telling that final height will 115px. it mean i don’t want any changes TopBarHeight and from addAnimation block i am shifting TopBarLayout by -65px wrt Y-axis. Now you can notice that 65px was total height of spaces and LabelArrangement.

What You Can Create

What You Can Create

Following are all the example i have already created.

How to buy?
Gpay,Paytm,Upi - 600 Paypal - $10 Send me PM. You'll get aia of all video and aix both. Note - aia of last video can't be given as the project is deleted its only uploaded as a example.

Version2

29 Likes

Excellent work

2 Likes

Superb​:money_mouth_face: nice extension keep it up.

2 Likes

Your extensions are always nice. Best Wishes to you man :smiling_face_with_three_hearts: :hugs: :v:

2 Likes

Nice Extension :cat:

2 Likes

wow!!! great!!

1 Like

That was great.100/100.

4 Likes

Amazing Now we can improve UI designs…
:star_struck:

2 Likes

Good work :crossed_fingers:
This also make with Animation Utilities + Scroll Handler)
https://docs.kodular.io/components/utilities/animation-utilities/

3 Likes

But. If you make with animation utility and handler then it will not be that smooth.
Also you can’t create all of them.
And this extension gives flexibility that also decereases number of blocks
Give a try​:+1:

2 Likes

May smooth, need add Space to top.)
The height of the space = height of the menu

1 Like

Not talking about that…

Sample Parallax, + ala whatsapp) :slightly_smiling_face:
may screen orient change/

Video SVID_20210216_145344_1.mp4 - Google Drive

Загрузка SVID_20210216_145344_1.mp4

APK
Orthodox_test1.apk (7.1 МБ)

2 Likes

How much blocks it took to create ?
It’s coming like this.:no_mouth:

Sometime this too

This time i got this

Sometime its epic

So According to my extension it took 13 total blocks similar effect as yours…


video

Just using one more block you can achieve this

1 Like

thank, fix it)

block more, but responsive.
You need remove px, for moder ui design)

Apk
Orthodox_FIX.apk (7.1 MB)

4 Likes

do you mean fixed it?

This is not the complete block btw have you did it without overlapping?
also using extension it will be responsive too as will as uses minimal number of block

px value is only for users who don’t understand dp concept btw that px value is converted to dp in code.

Overlap on Space, (hight spase=hight menu).

May also with make external Extension: Floating Action View : Customized Version Of A FAB and Floating View: float your component.

publish you apk

I DM you for purchase, but got no response from past 2 days.

1 Like