https://www1.appliedsystems.com/JavaScript/utils/animation-helpers…MXsHaU9g6PmuY6aKt-1g8X94L12HgQiFOcGBDo86y8k

1/**
2 * Animation Helper Utilities
3 * Vanilla JavaScript replacements for jQuery animations
4 */
5
6/**
7 * Fade in element
8 * @param {Element} element - Element to fade in
9 * @param {number} duration - Animation duration in milliseconds
10 * @param {Function} callback - Optional callback function
11 */
12function fadeIn(element, duration = 300, callback) {
13  if (!element) return;
14  
15  element.style.display = 'block';
16  element.style.opacity = '0';
17  element.style.transition = `opacity ${duration}ms`;
18  
19  requestAnimationFrame(() => {
20    element.style.opacity = '1';
21    
22    if (callback) {
23      setTimeout(callback, duration);
24    }
25  });
26}
27
28/**
29 * Fade out element
30 * @param {Element} element - Element to fade out
31 * @param {number} duration - Animation duration in milliseconds
32 * @param {Function} callback - Optional callback function
33 */
34function fadeOut(element, duration = 300, callback) {
35  if (!element) return;
36  
37  element.style.opacity = '1';
38  element.style.transition = `opacity ${duration}ms`;
39  
40  requestAnimationFrame(() => {
41    element.style.opacity = '0';
42    
43    setTimeout(() => {
44      element.style.display = 'none';
45      if (callback) {
46        callback();
47      }
48    }, duration);
49  });
50}
51
52/**
53 * Slide down element
54 * @param {Element} element - Element to slide down
55 * @param {number} duration - Animation duration in milliseconds
56 * @param {Function} callback - Optional callback function
57 */
58function slideDown(element, duration = 300, callback) {
59  if (!element) return;
60  
61  const originalHeight = element.scrollHeight;
62  element.style.height = '0';
63  element.style.overflow = 'hidden';
64  element.style.display = 'block';
65  element.style.transition = `height ${duration}ms`;
66  
67  requestAnimationFrame(() => {
68    element.style.height = originalHeight + 'px';
69    
70    setTimeout(() => {
71      element.style.height = '';
72      element.style.overflow = '';
73      if (callback) {
74        callback();
75      }
76    }, duration);
77  });
78}
79
80/**
81 * Slide up element
82 * @param {Element} element - Element to slide up
83 * @param {number} duration - Animation duration in milliseconds
84 * @param {Function} callback - Optional callback function
85 */
86function slideUp(element, duration = 300, callback) {
87  if (!element) return;
88  
89  element.style.height = element.scrollHeight + 'px';
90  element.style.overflow = 'hidden';
91  element.style.transition = `height ${duration}ms`;
92  
93  requestAnimationFrame(() => {
94    element.style.height = '0';
95    
96    setTimeout(() => {
97      element.style.display = 'none';
98      element.style.height = '';
99      element.style.overflow = '';
100      if (callback) {
101        callback();
102      }
103    }, duration);
104  });
105}
106
107/**
108 * Slide toggle element
109 * @param {Element} element - Element to toggle
110 * @param {number} duration - Animation duration in milliseconds
111 * @param {Function} callback - Optional callback function
112 */
113function slideToggle(element, duration = 300, callback) {
114  if (!element) return;
115  
116  const isHidden = window.getComputedStyle(element).display === 'none';
117  
118  if (isHidden) {
119    slideDown(element, duration, callback);
120  } else {
121    slideUp(element, duration, callback);
122  }
123}
124
125/**
126 * Animate element properties
127 * @param {Element} element - Element to animate
128 * @param {Object} properties - CSS properties to animate
129 * @param {Object} options - Animation options (duration, easing, callback)
130 */
131function animate(element, properties, options = {}) {
132  if (!element) return;
133  
134  const duration = options.duration || 300;
135  const easing = options.easing || 'ease';
136  const callback = options.complete || options.callback;
137  
138  // Set initial values
139  const initialValues = {};
140  Object.keys(properties).forEach(prop => {
141    initialValues[prop] = window.getComputedStyle(element)[prop];
142  });
143  
144  // Apply transition
145  element.style.transition = `all ${duration}ms ${easing}`;
146  
147  // Set target values
148  requestAnimationFrame(() => {
149    Object.keys(properties).forEach(prop => {
150      element.style[prop] = properties[prop];
151    });
152    
153    if (callback) {
154      setTimeout(() => {
155        callback.call(element);
156      }, duration);
157    }
158  });
159}
160
161/**
162 * Smooth scroll to element
163 * @param {Element} element - Target element
164 * @param {number} offset - Optional offset from top
165 * @param {number} duration - Scroll duration in milliseconds
166 */
167function scrollToElement(element, offset = 0, duration = 300) {
168  if (!element) return;
169  
170  const targetPosition = element.getBoundingClientRect().top + window.pageYOffset - offset;

171  const startPosition = window.pageYOffset;
172  const distance = targetPosition - startPosition;
173  let startTime = null;
174  
175  function animation(currentTime) {
176    if (startTime === null) startTime = currentTime;
177    const timeElapsed = currentTime - startTime;
178    const progress = Math.min(timeElapsed / duration, 1);
179    
180    // Easing function (easeInOutQuad)
181    const ease = progress < 0.5
182      ? 2 * progress * progress
183      : 1 - Math.pow(-2 * progress + 2, 2) / 2;
184    
185    window.scrollTo(0, startPosition + distance * ease);
186    
187    if (timeElapsed < duration) {
188      requestAnimationFrame(animation);
189    }
190  }
191  
192  requestAnimationFrame(animation);
193}
194
195/**
196 * Stop all animations on element
197 * @param {Element} element - Element to stop animations on
198 */
199function stop(element) {
200  if (!element) return;
201  element.style.transition = 'none';
202}
203
204// Export functions for use in other files
205if (typeof module !== 'undefined' && module.exports) {
206  module.exports = {
207    fadeIn, fadeOut, slideDown, slideUp, slideToggle,
208    animate, scrollToElement, stop
209  };
210}
211