A central place to set and manage consistent global animations
This requires custom javascript and styling to determine what the fade looks like. We can adjust this.
The code is on this page, so will need to be rolled out across the pages that we want it to affect.
Also adding a different styling option for the borders so that it smoothes out the gradient top and bottom line as it turns into full colour.
[Content Links]
[Our People grid]
[Search results]
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat. Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet. Nunc ut sem vitae risus tristique posuere.
Once happy with the animation styling, we can roll out to the rest of the blocks in a similar layout.
This is implemented using 'slide' on 'scroll into view' with a staggered delay on each element of 150ms.
This is implemented with a custom interaction.
It's set to tackle any image with the ratio wrap 10:9 or 3:2 all with one interaction - but can roll out across all image ratios once we're happy and apply it to the right spaces.
It's currently set to zoom to 1.05x the existing size of the image, but we can ramp this up or down and adjust the speed.
This is implemented with a custom interaction.
It's set to tackle any image with the ratio wrap 10:9 or 3:2 all with one interaction - but can roll out across all image ratios once we're happy and apply it to the right spaces.
The animation is set to take just over a second to fully take place, but this can be adjusted depending on how fast we want it to be.
This is set to a 2 second animation with a large offset, to try and make it a more visible animation. As it's so light, it will be quite a subtle animation I think.
Updated the structure of the share box so that it smoothly transitions in and out.
