Convert the easeInExpo function from jQuery easing to vanilla JavaScript and CSS

Question

Convert the easeInExpo function from jQuery easing to vanilla JavaScript and CSS

Currently, I am in the process of converting a piece of code from jQuery to plain JavaScript and CSS. The specific code snippet I am focusing on involves creating easing functions without relying on jQuery.

const customEasing = {
    easeInExpo: function (x, t, b, c, d) {
        return (t == 0) ? b : c * Math.pow(2, 10 * (t / d - 1)) + b;
    }
};

let nset = false;

document.querySelector('button#hmenu').addEventListener('click', function() {
    if (!nset) {
        document.querySelector('ul#nav').style.transitionDelay = '35ms';
        document.querySelector('ul#nav').style.transitionDuration = '300ms';
        document.querySelector('ul#nav').style.transitionTimingFunction = customEasing.easeInExpo;
        
        document.querySelector('ul#nav').classList.add('active');
        nset = true;
    } else {
        document.querySelector('ul#nav').style.transitionDuration = '550ms';
        document.querySelector('ul#nav').classList.remove('active');
        nset = false;
    }
});

As I explore CSS transitions with easing functions, I'm curious about the available options. In my existing code, there are slideDown and slideUp easing functions that are utilized for a mobile menu navigation in a production environment.

javascript jquery css

Answer 1

Answer №1

Latest Update:

Check out this GitHub repository called "You don't need jQuery." It contains a comprehensive list of common jQuery functions rewritten in vanilla JavaScript.

You'll find animations, query selectors, Ajax, events, and other advanced jQuery features all covered here.

For those looking to support older IE versions, the slightly older resource youmightnotn eedjquery.com is also very helpful.

If you want an animation with an `easeInExpo` style, just use this CSS code snippet provided by this website:

transition: all 500ms cubic-bezier(0.950, 0.050, 0.795, 0.035);

The example below demonstrates this easing property on the `height` of a div. I've adjusted it to include the delay added in jQuery when clicked (35ms), timings (300ms and 550ms respectively), and jQuery's default easing ('swing') - courtesy of this answer for reference:

let expandable = document.getElementById('expandable');
let expandButton = document.getElementById('expand-button');

expandButton.addEventListener('click', () => {
  expandable.classList.toggle('expanded');
});

#expandable {
  background: red;
  transition: all 550ms cubic-bezier(.02, .01, .47, 1);
  height: 0px;
  width: 100px;
  transition-delay: 0ms;
}

#expandable.expanded {
  height: 100px;
  transition-delay: 35ms;
  transition: all 300ms cubic-bezier(0.950, 0.050, 0.795, 0.035);
}

<div id="expandable"></div>
<br />
<button id="expand-button">Toggle expand</button>

Answer 2

Latest Update:

Check out this GitHub repository called "You don't need jQuery." It contains a comprehensive list of common jQuery functions rewritten in vanilla JavaScript.

You'll find animations, query selectors, Ajax, events, and other advanced jQuery features all covered here.

For those looking to support older IE versions, the slightly older resource youmightnotn eedjquery.com is also very helpful.

If you want an animation with an `easeInExpo` style, just use this CSS code snippet provided by this website:

transition: all 500ms cubic-bezier(0.950, 0.050, 0.795, 0.035);

The example below demonstrates this easing property on the `height` of a div. I've adjusted it to include the delay added in jQuery when clicked (35ms), timings (300ms and 550ms respectively), and jQuery's default easing ('swing') - courtesy of this answer for reference:

let expandable = document.getElementById('expandable');
let expandButton = document.getElementById('expand-button');

expandButton.addEventListener('click', () => {
  expandable.classList.toggle('expanded');
});

#expandable {
  background: red;
  transition: all 550ms cubic-bezier(.02, .01, .47, 1);
  height: 0px;
  width: 100px;
  transition-delay: 0ms;
}

#expandable.expanded {
  height: 100px;
  transition-delay: 35ms;
  transition: all 300ms cubic-bezier(0.950, 0.050, 0.795, 0.035);
}

<div id="expandable"></div>
<br />
<button id="expand-button">Toggle expand</button>

Answer 3

Answer №2

To make your collapsible component expand to a variable height, some magic is required. Instead of expanding to a fixed height every time, you can create a class like "expanded" and toggle it on and off to control the height dynamically.

For variable heights, you'll need to use JavaScript to determine the height of each expandable element and adjust those values if the window size changes due to text wrapping or image resizing. Custom CSS properties with fallback values to unset can achieve this functionality smoothly.

The example below showcases both a toggle and accordion scenario, utilizing a cubic bezier easing function similar to easeInExpo. The easing function

cubic-bezier(0.95, 0.05, 0.795, 0.035)

was sourced from easings.net, which offers pure CSS easings for various effects.

Simple Demo

// JavaScript logic for expanding elements
const expandables = document.querySelectorAll('.expandable');
const setInnerHeights = () => {
  for (const expandable of expandables) {
    expandable.style.setProperty('--inner-height', Array.from(expandable.children).map(child => child.offsetHeight).reduce((a, c) => a + c, 0) + 'px');
  }
};
setInnerHeights();
document.addEventListener('click', e => {
  if (e.target?.matches('.expand-trigger')) {
    const expandable = e.target.nextElementSibling;
    expandable.classList[expandable.classList.contains('expanded') ? 'remove' : 'add']('expanded');
  }
});
window.addEventListener('resize', setInnerHeights);

/* CSS styles for expanding elements */
html {
  height: 100%;
  box-sizing: border-box;
}
*, *::before, *::after {
  box-sizing: inherit;
}
body {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  justify-content: flex-start;
  min-height: 100%;
  padding: 20px;
}
.expandable {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.25s cubic-bezier(0.95, 0.05, 0.795, 0.035);
  text-align: left;
}
.expandable > p {
  margin: 0;
  padding: 10px 0;
}
.expandable.expanded {
  --content-height: calc(var(--inner-height) + 20px);
  max-height: var(--content-height, unset);
}

<button class="expand-trigger">Expand #1</button>
<div class="expandable">
  <p>Lorem ipsum dolor sit amet.</p>
</div>
<button class="expand-trigger">Expand #2</button>
<div class="expandable">
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit...</p>
</div>
<button class="expand-trigger">Expand #3</button>
<div class="expandable">
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit...</p>
  <p>Integer convallis lectus eu felis bibendum, vel lacinia metus imperdiet...</p>
</div>

Advanced Demo

// JavaScript logic for accordion functionality
const initAccordions = () => {
  const getNode = selector => document.querySelector(selector),
      getNodes = selector => Array.from(document.querySelectorAll(selector)),
      findChildren = (node, selector) => Array.from(node.children).filter(e => e.matches?.(selector)),
      findChild = (node, selector) => Array.from(node.children).find(e => e.matches?.(selector)),
      _addInput = (node, position, id, checked) => node.insertAdjacentHTML(position, `<input type="radio" name="accordion-${id}"${checked ? ' checked="checked"' : ''}>`),
      setInnerHeight = node => {
        const height = Array.from(node.children).map(child => child.offsetHeight).reduce((a, c) => a + c, 0) + 'px';
        node.style.setProperty('--inner-height', height);
      },
      accordions = Array.from(document.querySelectorAll('.accordion'));
  let accordionIndex = 0;
  for (const accordion of accordions) {
    const isToggle = accordion.dataset?.type === 'toggle',
        panels = findChildren(accordion, '.accordion--panel');
    let panelIndex = 0;
    for (const panel of panels) {
      const title = findChild(panel, '.accordion--panel--title'),
          content = findChild(panel, '.accordion--panel--content'),
          addInput = (node, position, checked) => _addInput(node, position, accordionIndex + (isToggle ? '-' + panelIndex : ''), checked);
      setInnerHeight(content);
      addInput(title, 'beforebegin');
      addInput(title, 'afterbegin', true);
      panelIndex++;
    }
    accordionIndex++;
  }
  window.addEventListener('resize', () => {
    const panelContents = Array.from(document.querySelectorAll('.accordion > .accordion--panel > .accordion--panel--content'));
    for (const content of panelContents) setInnerHeight(content);
  });
};
initAccordions();

/* Additional CSS styles for accordions */
html {
  height: 100%;
  box-sizing: border-box;
}
*, *::before, *::after {
  box-sizing: inherit;
}
body {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  min-height: 100%;
  padding: 20px;
}
 /* Custom styling for accordion components */
...

Accordion and Toggle Demos...

You can explore more CSS easing functions at easings.net. Additionally, Chrome's DevTools allow you to visually customize easing functions by adjusting the transition-timing-function property within your stylesheets.

Answer 4

To make your collapsible component expand to a variable height, some magic is required. Instead of expanding to a fixed height every time, you can create a class like "expanded" and toggle it on and off to control the height dynamically.

For variable heights, you'll need to use JavaScript to determine the height of each expandable element and adjust those values if the window size changes due to text wrapping or image resizing. Custom CSS properties with fallback values to unset can achieve this functionality smoothly.

The example below showcases both a toggle and accordion scenario, utilizing a cubic bezier easing function similar to easeInExpo. The easing function

cubic-bezier(0.95, 0.05, 0.795, 0.035)

was sourced from easings.net, which offers pure CSS easings for various effects.

Simple Demo

// JavaScript logic for expanding elements
const expandables = document.querySelectorAll('.expandable');
const setInnerHeights = () => {
  for (const expandable of expandables) {
    expandable.style.setProperty('--inner-height', Array.from(expandable.children).map(child => child.offsetHeight).reduce((a, c) => a + c, 0) + 'px');
  }
};
setInnerHeights();
document.addEventListener('click', e => {
  if (e.target?.matches('.expand-trigger')) {
    const expandable = e.target.nextElementSibling;
    expandable.classList[expandable.classList.contains('expanded') ? 'remove' : 'add']('expanded');
  }
});
window.addEventListener('resize', setInnerHeights);

/* CSS styles for expanding elements */
html {
  height: 100%;
  box-sizing: border-box;
}
*, *::before, *::after {
  box-sizing: inherit;
}
body {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  justify-content: flex-start;
  min-height: 100%;
  padding: 20px;
}
.expandable {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.25s cubic-bezier(0.95, 0.05, 0.795, 0.035);
  text-align: left;
}
.expandable > p {
  margin: 0;
  padding: 10px 0;
}
.expandable.expanded {
  --content-height: calc(var(--inner-height) + 20px);
  max-height: var(--content-height, unset);
}

<button class="expand-trigger">Expand #1</button>
<div class="expandable">
  <p>Lorem ipsum dolor sit amet.</p>
</div>
<button class="expand-trigger">Expand #2</button>
<div class="expandable">
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit...</p>
</div>
<button class="expand-trigger">Expand #3</button>
<div class="expandable">
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit...</p>
  <p>Integer convallis lectus eu felis bibendum, vel lacinia metus imperdiet...</p>
</div>

Advanced Demo

// JavaScript logic for accordion functionality
const initAccordions = () => {
  const getNode = selector => document.querySelector(selector),
      getNodes = selector => Array.from(document.querySelectorAll(selector)),
      findChildren = (node, selector) => Array.from(node.children).filter(e => e.matches?.(selector)),
      findChild = (node, selector) => Array.from(node.children).find(e => e.matches?.(selector)),
      _addInput = (node, position, id, checked) => node.insertAdjacentHTML(position, `<input type="radio" name="accordion-${id}"${checked ? ' checked="checked"' : ''}>`),
      setInnerHeight = node => {
        const height = Array.from(node.children).map(child => child.offsetHeight).reduce((a, c) => a + c, 0) + 'px';
        node.style.setProperty('--inner-height', height);
      },
      accordions = Array.from(document.querySelectorAll('.accordion'));
  let accordionIndex = 0;
  for (const accordion of accordions) {
    const isToggle = accordion.dataset?.type === 'toggle',
        panels = findChildren(accordion, '.accordion--panel');
    let panelIndex = 0;
    for (const panel of panels) {
      const title = findChild(panel, '.accordion--panel--title'),
          content = findChild(panel, '.accordion--panel--content'),
          addInput = (node, position, checked) => _addInput(node, position, accordionIndex + (isToggle ? '-' + panelIndex : ''), checked);
      setInnerHeight(content);
      addInput(title, 'beforebegin');
      addInput(title, 'afterbegin', true);
      panelIndex++;
    }
    accordionIndex++;
  }
  window.addEventListener('resize', () => {
    const panelContents = Array.from(document.querySelectorAll('.accordion > .accordion--panel > .accordion--panel--content'));
    for (const content of panelContents) setInnerHeight(content);
  });
};
initAccordions();

/* Additional CSS styles for accordions */
html {
  height: 100%;
  box-sizing: border-box;
}
*, *::before, *::after {
  box-sizing: inherit;
}
body {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  min-height: 100%;
  padding: 20px;
}
 /* Custom styling for accordion components */
...

Accordion and Toggle Demos...

You can explore more CSS easing functions at easings.net. Additionally, Chrome's DevTools allow you to visually customize easing functions by adjusting the transition-timing-function property within your stylesheets.

Convert the easeInExpo function from jQuery easing to vanilla JavaScript and CSS

Answer №1

Answer №2

Simple Demo

Advanced Demo

Similar questions

The Typescript const assertion translated into Javascript

Introducing additional choices to the list and automatically refreshing the list with the latest updates

Are there ways to incorporate extra icons into NavMenu in Blazor 8?

Function invoking React Hook

Guide to dividing a URL in reactjs/nextjs

Updating and eliminating text within an array of objects using Vue JS

What is the best way to transition an absolute positioned element from right to center?

The issue of duplicate results appearing in the Wikipedia viewer persists even after conducting a second search

Navigating with VueRouter in your Chrome Extension is a breeze

Sending Data from Browser to Node.js using Ajax

What methods can I utilize to transmit Global variable data from a view to a controller?

Steps for interacting with a button of the <input> tag in Selenium using Python

I keep encountering an error that says "ReferenceError: localStorage is not defined" even though I have already included the "use

unable to successfully npm install canvas

The dropdown menu is obscured by the toolbar

If the session cannot be located, users will be redirected to the sign-in page

New Relic identifies mysterious delays caused by MongoDB's findOne method

An error occurred when attempting to hide or show a jQuery loading animation

A guide on embedding the flag status within the image tag

Discover the perfect method for combining two objects while updating any empty values with a new specified value. Furthermore, in the case where the new value is also