Build Complex CSS Transitions using Custom Properties and cubic-bezier()


I recently illustrated how we can achieve complex CSS animations using cubic-bezier() and how to do the same when it comes to CSS transitions. I was able to create complex hover effect without resorting to keyframes. In this article, I will show you how to create even more complex CSS transitions.

This time, let’s use the @property feature. It’s only supported on Chrome-based browsers for now but we can still play with it and demonstrate how it, too, and can be used to build complex animations.

I highly recommend reading my previous article because I will be referring to a few concepts I explained in detail there. Also, please note that the demos in this article are best viewed in Chromium-based browsers while @property support is still limited.

Let’s start with a demo:

Click on the button (more than once) and see the “magic” curve we get. It may look trivial at first glance because we can achieve such effect using some complex keyframes. But the trick is that there is no keyframe in there! That animation is done using only a transition.

Awesome right? And this is only the beginning, so let’s dig in!

The main idea

The trick in the previous example relies on this code:

@property --d1 {
  syntax: '<number>';
  inherits: false;
  initial-value: 0;
@property --d2 {
  syntax: '<number>';
  inherits: false;
  initial-value: 0;

.box {
  top: calc((var(--d1) + var(--d2)) * 1%);
    --d1 1s cubic-bezier(0.7, 1200, 0.3, -1200),
    --d2 1s cubic-bezier(0.5, 1200, 0.5, -1200);
.box:hover {
  --d1: 0.2;
  --d1: -0.2;

We’re defining two custom properties, --d1 and --d2. Then, we declare the top property on a .box element using the sum of both those properties. Nothing overly complex yet—just calc() applied to two variables.

The two properties are defined as <number> and I multiply those values by 1% to convert them into a percentage. We could define these as <percentage> right away to avoid the multiplication. But I’ve chosen numbers instead in favor of more flexibility for more complex operations later.

Notice that we apply a different transition to each variable—more precisely, a different timing-function with the same duration. It’s actually a different sinusoidal curve for both variables which is something I get deep into in my previous article.

From there, the property values change when the .box is hovered, triggering the animation. But why do we get the result we see in the demo?

It’s all about math. We are adding two functions to create a third one. For --d1, we have a function (let’s call it F1); for --d2 , we have another one (let’s call it F2). That means the value of top is F1 + F2.

An example to better illustrate:

The first two transitions illustrate each variable individually. The third one is the sum of them. Imagine that at in each step of the animation we take the value of both variables and we add them together to get each point along the final curve.

Let’s try another example:

This time, we combine two parabolic curve to get a… well, I don’t know its name it but it’s another complex curve!

This trick is not only limited to the parabolic and sinusoidal curve. It can work with any kind of timing function even if the result won’t always be a complex curve.

This time:

  • --d1 goes from 0 to 30 with an ease-in timing function
  • --d2 goes from 0 to -20 with an ease-out timing function

The result? The top value goes from 0 to 10 (30-20) with a custom timing function (the sum of ease-in and ease-out).

We are not getting a complex transition in this case—it’s more to illustrate the fact that it’s a generic idea not only limited to cubic-bezier().

I think it’s time for an interactive demo.

All you have to do is to adjust a few variables to build your own complex transition. I know cubic-bezier() may be tricky, so consider using this online curve generator and also refer to my previous article.

Here are some examples I made:

Build Complex CSS Transitions using Custom Properties and cubic-bezier() 1
Build Complex CSS Transitions using Custom Properties and cubic-bezier() 2
Build Complex CSS Transitions using Custom Properties and cubic-bezier() 3
Build Complex CSS Transitions using Custom Properties and cubic-bezier() 4
Build Complex CSS Transitions using Custom Properties and cubic-bezier() 5

As you can see, we can combine two different timing functions (created using cubic-bezier() ) to create a third one, complex enough to achieve a fancy transition. The combinations (and possibilities) are unlimited!

In that last example, I wanted to demonstrate how adding two opposite functions lead to the logical result of a constant function (no transition). Hence, the flat line.

Let’s add more variables!

You thought we’d stop at only two variables? Certainly not! We can extend the logic to N variables. There is no restriction—we define each one with a timing function and sum them up.

An example with three variables:

In most cases, two variables are plenty to create a fancy curve, but it’s neat to know that the trick can be extended to more variables.

Can we subract, multiply and divide variables?

Of course! We can also extend the same idea to consider more operations. We can add, subtract, multiply, divide—and even perform a complex formula between variables.

Here, we’re multiplying values:

Build Complex CSS Transitions using Custom Properties and cubic-bezier() 6
Build Complex CSS Transitions using Custom Properties and cubic-bezier() 7

We can also use one variable and multiply it by itself to get a quadratic function!

Let’s add more fun in there by introducing min()/max() to simulate an abs() function:

Notice that in the second box we will never get higher than the center point on the y-axis because top is always a positive value. (I added a margin-top to make the center of box the reference for 0.)

Build Complex CSS Transitions using Custom Properties and cubic-bezier() 8
Build Complex CSS Transitions using Custom Properties and cubic-bezier() 9

I won’t get into all the math, but you can imagine the possibilities we have to create any kind of timing function. All we have to do is to find the right formula either using one variable or combining multiple variables.

Our initial code can be generalized:

@property --d1 { /* we do the same for d2 .. dn */
  syntax: '<number>';
  inherits: false;
  initial-value: i1; /* the initial value can be different for each variable */

.box {
  --duration: 1s; /* the same duration for all */
  property: calc(f(var(--d1),var(--d2), .. ,var(--dn))*[1UNIT]);
    --d1 var(--duration) cubic-bezier( ... ),
    --d2 var(--duration) cubic-bezier( ... ),
    /* .. */
    --dn var(--duration) cubic-bezier( ... );
.box:hover {
  /* .. */

This is pseudo-code to illustrate the logic:

  1. We use @property to define numeric custom properties, each with an initial value.
  2. Each variable has its own timing function but the same duration.
  3. We define an f function that is the formula used between the variables. The function provides a number that we use to multiply the relevant unit. All this runs in calc() applied to the property.
  4. We update the value of each variable on hover (or toggle, or whatever).

Given this, the property transitions from f(i1,i2,…,in) to f(f1,f2,..,fn) with a custom timing function.

Chaining timing functions

We’ve reached the point where we were able to create a complex timing function by combining basic ones. Let’s try another idea that allow us to have more complex timing function: chaining timing functions together.

The trick is to run the transitions sequentially using the transition-delay property. Let’s look back at the interactive demo and apply a delay to one of the variables:

We are chaining timing functions instead of adding them together for yet another way to create more complex timing functions! Mathematically, it’s still a sum, but since the transitions do not run at the same time, we will be summing a function with a constant, and that simulates the chaining.

Now imagine the case with N variables that we are incrementally delayed. Not only can we create complex transitions this way, but we have enough flexibility to build complex timelines.

Here is a funny hover effect I built using that technique:

You will find no keyframes there. A small action scene is made entirely using one element and a CSS transition.

Here is a realistic pendulum animation using the same idea:

Or, how about a ball that bounces naturally:

Or maybe a ball rolling along a curve:

See that? We just created complex animations without a single keyframe in the code!

That’s a wrap!

I hope you took three key points away from this article and the previous one:

  1. We can get parabolic and sinusoidal curves using cubic-bezier() that allow us to create complex transitions without keyframes.
  2. We can create more curves by combining different timing functions using custom properties and calc().
  3. We can chain the curves using the transition-delay to build a complex timeline.

Thanks to these three features, we have no limits when it comes to creating complex animations.

This post was originally posted here

Check out our Starter Sites built with #ToolWeLove including Toolset, Elementor Pro, and Astra Pro.


Share this page
Hiring During A Recession: ✋ 5 Things You Need To Do Differently

2022 is a tough year for the job market.
The COVID-19 pandemic has caused widespread economic disruption, with millions of Americans losing their jobs. And even now, as we’re clawing our way out of a pandemic economy, a period of major economic downturn looks inevitable. 
We learned a lot from the Great Recession of 2008, and while the situation is different this time around, the main lesson is still the same. 
During tough economic times, your hiring process needs to change.
But… are we actually in a recession?
Economists are divided on whether we’re currently experiencing a recession or not. The National Bureau of Economic Research (NBER), the body that usually declares it, is yet to give the official word.
It’s true that back-to-back negative GDP quarters and rising interest rates usually indicate a recession, but the story is more complicated than that.
Recessions in the U.S usually sees:

A sharp decrease in GDP (which we are seeing)
A sharp increase in unemployment (which we’re not)

These two factors usually feed into each other. A decrease in economic output means companies have to cut costs, resulting in layoffs and hiring freezes. People stop spending as much, leading to a decrease in business profit. And on it goes.

But in 2022, the unemployment rate has actually dropped. To 3.5% in July 2022, in fact – the lowest since February 2020.
This is consistent with what we’re hearing on the ground. Everyone we know seems to be hiring and struggling to fill positions. Yet, data shows that there are currently over 11 million unfilled jobs in the U.S.
The economic downturn may be caused by a lack of confidence in spending due to high inflation. This puts a strain on businesses, yes. But in a post-pandemic economy where workers are hard to come by, many business owners may be reluctant to cut costs by laying off workers.
That’s why economists speculate that if we do go into a recession in 2022, it won’t be like any recession that they’ve seen before.
What does this mean for those who are hiring?
This is a unique time for hirers.
We’ve seen the trend of the Great Resignation movement and very high job openings over the past two years.

Source: Bureau of Labor Statistics
Companies are still desperate to make hires, even as the economy is contracting. But this state is unsustainable.
Best case scenario: the economy improves, and output increases. But at some point, the economy may also contract to a point where businesses can no longer afford to make new hires. So they will either put hiring on hold or begin making cuts.
This is why it’s so important for hirers to focus on preparing and making the right hires now.
The market is candidate-driven right now, but that may change very quickly. As a result, recruiters and hiring managers must rethink their strategies and prioritize data-driven hires to help their businesses weather any economic storm.
5 Things You Need to Do Differently
Every recession comes with different challenges. But when hiring during a recession, there are key changes you can make to your hiring practices to ensure that the wheels keep moving, no matter what the world throws at you.
Tip 1: Streamline the Screening Process
The screening process is a lot. 
And this is especially relevant for those hiring in the tech industry.

The key is to make it easy for yourself.
If you can do it in one step, why take two?
Zone in on the key skills that you’re looking for in a candidate and choose the most efficient way to test them. That might mean adding a screening question to the application or one technical test instead of two.
The reality is that most applicants won’t make it to the interview stage, and you need to get to the most suitable candidates as quickly as possible.
The key is ensuring that each stage of the process is designed to assess a specific skill set or quality. This will help you weed out candidates who are not a good fit early on, saving you time and effort in the long run.
We go into a lot more details here on how you can speed up that screening process.
Tip 2: Move Quickly
Time is of the essence, and even more so when you’re hiring during a recession.
Hiring is a costly process, so make sure that you’re not burning money trying to get the perfect candidate. By the time you finish prospecting, they might already be snapped up by another company. Fast and attentive responses also tend to make a better impression on quality candidates.
If you’re scouting for some talent, you can reduce your time-to-hire and increase the chances of getting a response by using tools like Contact Out to get contacts on LinkedIn in seconds.
[embedded content]
It’s also not just about the efficiency of the tool but the accuracy. You can read some of our case studies to see how recruiters like yourself have streamlined their contact hunting process.

(Our email search database is pretty good too, just saying. Give it a shot.)
Tip 3: Focus on Fit
Talent acquisition during a recession is all about strategy.
Make sure you’re making decisions on your hiring plan and candidate selection that is based on the latest recruitment data. Predicting a realistic time-to-hire and anticipating likely issues will allow you to work more efficiently and save your company more money.
(This State of Tech Recruitment industry report is a good place to start if you’re in the tech industry.)
Make sure you’re clear about the role and level of expertise needed in the job descriptions, and focus on the most qualified candidates. It’s important at this time that you make decisions informed by the workplace atmosphere, the team, and the likelihood that the candidate will integrate well into the workplace.
Be aware also that a recession usually sees the older people in the workforce retire, which means that you need to fill spaces in those roles. Try to build succession lines early for a smoother transition and match the qualifications of the candidates to the holes the older employees will leave behind.
Tip 4: Build Your Network
It’s especially important to cultivate your circle of contacts before and during recession years.
Building personal relationships with top talent will make them more likely to hear you out when you’re headhunting. Knowing a candidate more personally will also speed up the screening process.
You can also cast your net wider to reach candidates beyond your immediate area and offer remote work as an option if the role you’re trying to fill allows that. Non-traditional talents and candidates on different continents may be the perfect fit for your business, and you won’t know until you send out feelers in their direction.
Having a wide network also lets you fish for candidates in the talent pool more effectively, and you’ll likely be able to find a guy who “knows a guy” that can get you in direct contact with them. This will help cut down that exhausting process of chasing down emails and phone numbers.
Tip 5: Listen
It’s a difficult time for everyone. Employers want to make sure they and the people that rely on them survive through the lean years. Unsurprisingly, this takes a mental toll on business owners and hiring managers.
Job seekers may also be desperate to land a job – any job, and headhunting candidates may be scared to leave secure positions in their current jobs for a new position.
You hold a lot of power in your role, and the most important thing to do in this situation is to listen.
What do employers need? What do candidates prioritize?
In a long period of insecurity, you might see people with talent turn down dream jobs for one that offers better wages and benefits. But the story is different for every field, and some candidates will turn down better pay and benefits for more job security.
On the flip side – our studies reveal that if you’re a recruiter in the tech industry, you’re more likely to get candidate rejections.

So make sure you respond with empathy during each step of the process, and take it easy on yourself if you’re having a hard time filling roles (especially for the tech recruiters reading this!) 
A recession is a hard time to get through for everyone, but we won’t get through it by being callous about people’s needs.
A little kindness is free and goes a long way in tough times 💖
Recruiting is hard enough…
And recessions make everything harder. But as with everything, being prepared and bracing for the worst will help you weather the storm.
But remember! In times of crisis, put on your own oxygen mask before helping other passengers with theirs.
Your role takes a mental toll, and being in the trenches recruiting during a recession means that you see the front lines of it more than other people. Take care to plan with your mental health in mind. Any strategy that compromises your mental state is unsustainable.
Lean on the resources available to you, and let’s get through this together!

Ready to speed up your recruiting process? Get started with Contact Out for free today.

Read More »
How to nail candidate fit for every tech role 🎯

Achieving candidate fit in tech roles is harder than ever – which is the main reason tech role hire time has increased from 29 to 43 days.
Tech recruiters now spend 20 hours per hire on candidate screening calls alone.
(That’s 50% longer than their counterparts from other industries!)
Recruiters from some companies (Canva, Microsoft, Netflix, and Shopify) now spend more than 10 hours of their week just screening candidates on the phone.
That’s a lot of calls — and a lot of time — spent talking to candidates. Most who won’t meet the hiring manager’s criteria (or who won’t find the job offer appealing.)
But why — and what to do about it?
In this article, we’ll answer both of these questions.
Why finding a fitting candidate is hard from the tech recruiter side
Getting the right candidate fit is the most important thing to get right in any company.
Hiring the right person means lower worker turnover, higher engagement, increased productivity, and greater consistency for operations. 
A hiring manager can have the wrong vision, the wrong skills, and be poor operationally but still succeed if they have great people reporting to them.
In tech, “good on paper” does not mean candidate fit
When searching for the perfect candidate, tech recruiters receive a set of criteria from the hiring manager that are based on what they consider to be quality.
Hiring managers might overemphasize candidate filters that worked in the past (or filters that find them candidates like themselves.) 
They may ask for only candidates who graduated from a top 20 university, who have certain certifications, have specific degrees, or self-proclaimed skills.
Tech recruiters will then diligently run through a process of candidate list building, outreach, and screening, to send hiring managers the candidates they will like.

The reality is, skills and backgrounds — the very thing tech recruiters are filtering for during this process — are poor indicators of tech team success.
Harvard business scholar Frans Johansson talks about this in his groundbreaking study The Medici Effect. High-performing teams (like all teams) thrive when they contain all kinds of geographic, academic, ethnic, and experiential backgrounds.
And tech is no exception. 
Top teams of engineers and developers include everything from PhDs, to dropouts, to candidates who learned their skills mid-career.
Instead of just filtering for the “good on paper” attributes a hiring manager asks for, tech recruiters should identify candidates who:

Have the competency to perform the tasks the company needs
Have the intrinsic motivation to do the work

Measuring competency with take home challenges
Regardless of the candidate’s background, the only way to assess their competency is with a take home challenge.
Live brain teasers (Google famously asking candidates how many golf balls would fit in a Boeing 747) and live coding challenges do assess how tech workers work under pressure. 
But these are neither the work the candidate will do, nor the way they’ll do it.
No engineer works with their manager standing over them watching their performance. And they won’t be working out the relative volume of sports equipment and jet airplanes.
They will, however, be working on the company’s codebase — and on company projects. 
A take home challenge can assess this.
For example, ask the candidate how they would design software architecture for a project similar to one that has recently been completed.

It’s much easier for a head of engineering to assess a candidate’s competency if the problem relates to something that head has recently solved.
A challenge (typically taking 30 minutes to 4 hours to complete) will also help gauge the motivation of the candidate.
Typically, about 70% of candidates will complete a challenge when offered one.
If your rates are lower, either the challenge is too hard (or too confusing), or the candidate loses interest in the role before they will themselves through the task.
Lack of interest usually means the tech recruiter isn’t tapping into the candidate’s intrinsic motivation enough.
Measuring tech candidate intrinsic motivation
No matter a tech worker’s competency, they will only be productive if they have the intrinsic motivation to keep working — despite the inevitable frustration that comes with challenging work.
As world-renowned productivity expert Charles Duhigg writes in his book Smarter, Better, Faster, extrinsic motivation (primarily compensation, status, and fringe benefits like remote work and flex time) are short-term and don’t last. 
Our own recent study confirms Duhigg’s assessment, as tech recruiters reported that candidates care even less about extrinsic motivators than workers from other industries.
The factor tech workers care most about — impact — means “the opportunity to grow the company and make their mark.” 
This is at the top of the list for intrinsic motivators, a list which also includes:

Challenge (goals just daunting enough to deliver a sense of accomplishment)
Personal growth (not professional, job title-related)
Team (and the energy they can provide the candidate)

Tech recruiters deliver candidates with higher productivity, longevity, and quality when they spend their screening call time assessing these four intrinsic motivators for a candidate.
Some good questions to ask to assess these motivators include:

How much do you know about what our company does and why we’re doing it?
How would two years at this job get you two years closer to your personal and professional goals?
What challenges in your professional history have kept you most engaged and why?
Talk about the types of team collaboration you have thrived with in the past.

Level up your tech recruitment
As introduced above, achieving perfect candidate fit in tech roles comes down to talking about what they value. 
Our free report on the state of tech recruitment identifies 10 key takeaways to take the anxiety out of the hardest industry to recruit for.

Read More »
Tech recruiters get rejected by candidates most often — Here’s how to get more positive responses ✨

Tech recruiters have the toughest job in recruitment — by far.
Tech workers are so highly sought after, it’s hard just to get a response. Tech recruiters spend 1.9 hours longer each week doing outreach than recruiters from other industries.
But even when they get a response, tech recruiters face rejection much more often.
In our recent survey, tech recruiters told us that 43% of candidate responses were negative, vs. just 27% for other recruiters.
The top negative responses being:

“I’m not interested in this job”
“I’m not interested in any job”
“I don’t want to be contacted by you under any circumstances”

That means when tech recruiters get an email — ping! — every other response is likely to be a candidate complaining in some way about the job offer.

Tech workers are interested – in the right email!
Despite the difficulty in finding a candidate who matches a job requisition, 80% of tech workers surveyed said they would change jobs this year, and 73% talk to a recruiter each month.
So then, the keys to increasing the rate of positive candidate response in tech recruitment?
Here are the 4 most important ones.

Talk to them about impact.
We mentioned previously that candidates are only interested in one aspect of a job – impact. Or specifically, “the opportunity to grow the company and make their mark.”
Getting clear on that, and focusing on it in the initial email, will start the conversation in the right direction.
For example, instead of simply talking about the salary and job title, mentioning that the candidate could…

“help 10,000,000 introverts exercise without gym anxiety” 

“save coders across the world millions of hours of time” 

…with their work will help them frame why the job matters.
After all, when they change jobs, they have to tell their friends and loved ones. Make it easy for them to put an aspirational reason behind their decision.

Turn rejection into referral.
I use a method recommended by TripleByte co-founder and Y Combinator partner Harj Taggar (which I’ve dubbed “rejection referrals”) to hire many of the 60 new staff brought into ContactOut this year.
Whenever I get a negative response from a tech candidate, I ask them if they can refer someone else.Just doing this one thing increased our positive response rate for product managers in the sparse Singaporean job market by 30%.

Mention the compensation range in the email.
Although compensation alone isn’t usually enough to entice the best tech workers, 79% prefer to see a compensation range in the email. Truth is, “competitive pay and benefits” just won’t cut it in 2023.
Candidates will respond more positively if you include pay transparency in the initial outreach email.
And increasingly, laws are requiring it. With new pay transparency laws cropping up in Colorado, New York City, and Washington state, now is a good time to get ahead of this recruitment trend.
It’s good for you, too. As I mentioned in another blog post, this also saves you and the candidate time. Why spend 30 minutes in a screening call with a candidate only to learn that you can’t afford them?

Save the non-job-related personalization for the P.S.
Personalization in recruitment outreach emails is powerful – but can come across as awkward and insincere if you quickly move from:“Hey Peter, I see we’re both mountain climbers!”
“Now, let’s talk about this role that’s open…”
A better way? Open the email with the reason they stood out as a candidate for the job.

“I see you were a top performer at…”
“I see you helped Company XYZ scale from…”
“Person XYZ recommended I reach out to you…”

And save the non-job-related personalization for the p.s. at the bottom of the email.
When you read an email, your eye always goes to the p.s. — so people won’t miss it.

I get about 25% more positive responses with the personalized p.s. than without it.
It turns any cold email warmer. I can mention that you and I both went to the same university, both volunteer for the same cause, or even just to mention how impressed I am about your startup, patent, or cool project.

Level up your tech recruitment
The full study has many more insights that will help tech recruiters perform better in 2022 — get into “the 30% club” and accelerate your own career. Here’s how:

Read More »