statswork

Facebook X-twitter Youtube Linkedin Instagram
Transcripition | Corporate Statistics  | Hire a Statiscian
Statswork Logo - Data Analysis & Research Services
Facebook X-twitter Youtube Linkedin Instagram
Statswork Logo

Tech Debt & Reverse Engineering Costs
Draining Your Budget?

Statswork’s Agentic AI Solution:

Explore the Statswork

Brands that believe in us

DAI

Powering your vision

Pushing your boundaries

We help organisations integrate AI into their websites, marketing and data. From smarter search and personalised content to data analysis and automated marketing campaigns. Built securely and designed to last.

The good news is you don’t need to rebuild everything from scratch. Most of the time, the biggest wins come from adding the right AI features to what you already have. A smarter chatbot here, better search there, marketing that actually learns from your data.

Services

Crafting success through our expertise in AI

AI-infused engineering that speaks your language—innovative, efficient, and built to solve real problems.

01

Data & Gen AI

Harness the power of ML models, LLMs, and advanced data modernization techniques.

Read More →
02

Product Engineering

Build scalable, secure, and high-performance software products for enterprises.

Read More →
03

Intelligent Automation

Automate workflows and reduce manual effort with AI-driven solutions.

Read More →
04

Quality Engineering

We deliver flawless software with AI-driven testing, continuous integration, and DevOps automation.

Read More →
05

iXie Gaming

Game testing and QA services that ensure top quality gameplay.

Read More →

Scrollnapping animations

Effects

First, we set up the snapping points

We set the scrolling element, in this case our HTML element, to forcibly snap to the Y axis by using scroll-snap-type: y mandatory.

And then we set section as the snapping elements by using scroll-snap-align: start.

Next, we set up the scrolling animation

We track the view() position of the section elements using the named timeline view-timeline: --section;. We had previously set the timeline-scope: --section up in our HTML element, so we can access it from anywhere in the document.

We animate the .content children using animation-timeline: --section;. The .content element will now animate based on its parent section's position. This is important due to how we're handling the layout in the next section.

Then, we position a fixed layout

We set the .content elements to position: fixed, so they're removed from the normal document flow and stack on top of each other, giving them a solid background, so only one is visible at a time.

Their parent sections are positioned as normal in the layer below, taking up space, scroll-snapping, and powering the animation-timeline.

Finally, we create the transition effects

By setting the .content elements to position: fixed, we can now transition between them without a visible scrolling movement.

We create a normal @keyframe animation to our liking to transition between them. Check the navigation menu to see different effects.

Caveats

  • Scrolling animations are not currently available in Firefox. This demo is using a polyfill.
  • This layout is fragile due to the use of position: fixed. You need to carefully manage stacking contexts.
  • Snapping points have their own caveats, such as content taller than the viewport becoming inaccessible, along with the general annoyance of scrolljacking.
  • The blink effect uses the contrast() filter, which modifies the colors of the entire section. Thus, the background is set to black (or white), ensuring that it appears unchanged during transitions due to already being at maximum contrast.

That's it 🌸