You can animate any element on your site with unique motion paths, transitions and speed using a pixel-perfect visual interface, without writing code. Here's how to get started:
When you want to create a parallax animation, firstly select the element you'd like to be animated, right click, and select "add parallax animation"
After adding the animation, 2 You will see 2 things added onto your element so it becomes a group of 3.
1. The starting line of the animation; when scrolling past this point the animation will begin to play
2. This is the element itself, and the starting point of the element in the beginning of the animation
3. This is the destination of the animation and the final position of the element
*You can also add an additional motion path, giving the element an additional destination*
On Properties Panel you'll be able to control the animation properties;
You can determine the exact location of the animation target (destination)
You can also control the animation speed per scroll- the shorter the site- the faster the animation needs to be.
Using the + Add effect button you can add effects to the animation.
This will enable you to enrich the animation and add not only motion but also an effect.
Delay Before: makes the element stay an extra X amount of pixels before beginning the animation
Delay After: after the animation is done, the element stays "pinned" to the screen for X amount of pixels
Rotate: you can make the element rotate while moving- this is great for any circular graphic elements or of you'd like to create a 'tilt' effect.
Fate To: you can make an element go from 0% opacify to 100% or vice-versa.
Scale: make the element become larger/ smaller using animation.
Multiple effects can be combined in one animation.If you'd like to only use the affect but have the element stay in the same place you will simply need to place the target on top of the original element,
Just make sure that the X and Y properties are the same.
We would suggest completing the design of the site before adding in the parallax animation as a finishing touch.