Scroll based animation helps adding simple scrolling effects to the creatives.
As the user scrolls down the page, various elements within the creative can be made to scale, rotate, translate and change the opacity. It's easy to set up and not a single line of javascript is required.
How to use
By default all the animations are set for time based animations. One can choose to change the animation to be based on scroll by using the switch on the timeline pane.
Switch from time to scroll
You'll see this switch only on compatible formats & page types.
Also, to preview these ads correctly, a scroll needs to be induced in the preview. In order to this, there is a switch available within the preview.
Preview option to induce scroll
Compatibility
A few points to note here are that the scroll based animation is compatible only with:
Banner pages of standard formats like Banner & Expandable
ScrollX format
Web based creatives. Not supported for In-app inventory.
How it works
When the animation pane is switched from the time based one to the one based on scroll, the unit automatically switches from time (secs) to percentage of scroll in view (%).
Understanding scroll based animation
Now the percentage is always between 0 to 100% of scroll. Here this can't be altered as the animation is always being set between the creative entering the view (0%) and leaving the view (100%).
In scroll based animation, the speed of the animation is totally based on how fast the user scrolls. Here we can't control the speed.
The other aspect is scroll based animations can play in reverse as well i.e. if the user starts scrolling in the reverse order, the animation will also play in reverse.
So, the order of animation and the speed of animation is a derivative of the direction the user is scrolling in and also how fast the scroll is, respectively.
Points to note
If you switch from 'Time based' to 'Scroll based' animation pane in error, just Undo using the hard key or the keyboard shortcut Ctrl/Command + Z.
If you switch from an existing 'Time based' animation to a 'Scroll based', the canvas will automatically extrapolate the keyframes between 0 to 100%.
If you switch from a 'Scroll based' animation to a 'Time based', it will extrapolate the keyframes between 0 to 10 secs.
In the preview screen, if you don't switch to induce the scroll by changing the placement, the creative will load and play the animation till the current position in the preview.
For the best output, it is best to keep all the animation keyframes between 25% to 75% of the scroll based timeline.
Avoid giving the same element conflicting animations based on time as well as based on scroll.
Possible Outcome
The below example shows how the scroll based timeline is used within a creative from the Auto sector. Here various layers like the mountains, land, the car and the wheels are all animated based on scroll.
The next creative from the technology sector has a stop motion effect. Various frames of the phone opening from the folded state is shown and hidden based on scroll.
The next examples shows how motion graphics can be achieved using the scroll based animation.
