### Animation Configuration Examples

Source: https://trenaro.com/

Provides example animation configurations for specific elements or states, including initial properties and target animated properties with transitions.

```javascript
i0mwi4:{
  default:{
    initial:{
      opacity:0.001,
      rotate:0,
      rotateX:0,
      rotateY:0,
      scale:1,
      skewX:0,
      skewY:0,
      x:0,
      y:0
    },
    animate:{
      opacity:1,
      rotate:0,
      rotateX:0,
      rotateY:0,
      scale:1,
      skewX:0,
      skewY:0,
      transition:{
        damping:30,
        delay:0,
        mass:1,
        stiffness:400,
        type:"spring"
      },
      x:0,
      y:0
    }
  }
},
zw42la:{
  default:{
    initial:{
      opacity:0.001,
      rotate:0,
      rotateX:0,
      rotateY:0,
      scale:1,
      skewX:0,
      skewY:0,
      x:0,
      y:0
    },
    animate:{

```

--------------------------------

### Animation Setup and Execution

Source: https://trenaro.com/pricing

Initializes and starts animations, potentially using performance.now() for timing. It manages an internal map 'b' for active animations and handles the initial setup based on readiness.

```javascript
let f = () => {
  C.cancel();
  let a = R(e, t, r, o);
  N === void 0 && (N = performance.now());
  a.startTime = N;
  b.set(i, { animation: a, startTime: N });
  s && s(a);
};
E.set(n, !1);
C.ready ? C.ready.then(f).catch(j) : f();
```

--------------------------------

### Responsive Appear Animation Setup

Source: https://trenaro.com/use-cases/by-training-type/sales-training

Code for setting up and triggering appear animations based on responsive design rules (media queries). It parses animation configurations and applies them to elements when their corresponding media query matches, optimizing the rendering process.

```javascript
[{"hash":"wwo8rv","mediaQuery":"(min-width: 1200px)"},{"hash":"8mm4ry","mediaQuery":"(min-width: 810px) and (max-width: 1199px)"},{"hash":"annrdp","mediaQuery":"(max-width: 809px)"}](()=>{
function c(i,o,m){
  if(window.__framer_disable_appear_effects_optimization__||typeof animator>"u")return;
  let e={detail:{bg:document.hidden}};
  requestAnimationFrame(()=>{
    let a="framer-appear-start";
    performance.mark(a,e),
    animator.animateAppearEffects(JSON.parse(window.__framer__appearAnimationsContent.text),(s,p,d)=>{
      let t=document.querySelector(s);
      if(t)
        for(let[r,f]of Object.entries(p))
          animator.startOptimizedAppearAnimation(t,r,f,d[r])
    },i,o,m&&window.matchMedia
```

--------------------------------

### JavaScript Animation Initialization and Optimization

Source: https://trenaro.com/use-cases/by-training-type/employee-onboarding

This JavaScript snippet handles the initialization and optimization of 'appear' animations. It checks for a global disable flag and uses `requestAnimationFrame` to schedule animation start, leveraging a global `animator` object to apply predefined animation effects based on content loaded from `window.__framer__appearAnimationsContent.text`.

```javascript
(()=>{function c(i,o,m){if(window.__framer_disable_appear_effects_optimization__||typeof animator>"u")return;let e={detail:{bg:document.hidden}};requestAnimationFrame(()=>{let a="framer-appear-start";performance.mark(a,e),animator.animateAppearEffects(JSON.parse(window.__framer__appearAnimationsContent.text),(s,p,d)=>{let t=document.querySelector(s);if(t)for(let[r,f]of Object.entries(p))animator.startOptimizedAppearAnimation
```

--------------------------------

### Responsive Appear Animation Setup

Source: https://trenaro.com/use-cases/special-use-cases/subject-matter-experts

Configures and triggers appear animations based on media queries. It parses animation content, selects the appropriate animation hash for the current viewport, and initiates animations using an 'animator' object.

```javascript
[{"hash":"3x6kyn","mediaQuery":"(min-width: 1200px)"},{"hash":"83msc4","mediaQuery":"(min-width: 810px) and (max-width: 1199px)"},{"hash":"hkq13f","mediaQuery":"(max-width: 809px)"}] (()=>{function c(i,o,m){if(window.__framer_disable_appear_effects_optimization__||typeof animator>"u")return;let e={detail:{bg:document.hidden}};requestAnimationFrame(()=>{let a="framer-appear-start";performance.mark(a,e),animator.animateAppearEffects(JSON.parse(window.__framer__appearAnimationsContent.text),(s,p,d)=>{let t=document.querySelector(s);if(t)for(let[r,f]of Object.entries(p))animator.startOptimizedAppearAnimation(t,r,f,d[r])},i,o,m&&window.matchMedi
```

--------------------------------

### Tween Animation Setup

Source: https://trenaro.com/pricing

Sets up standard tween animations based on provided start and end values, duration, and easing. It prepares keyframes and options for non-spring animations.

```javascript
function Fe(e) {
  let { type: t, duration: r, ...o } = e;
  return { duration: I(r), ...o };
}

function We(e, t, r, o, s) {
  let n = Fe(r);
  if (!n) return;
  let i = {},
    f = s ? Me : n,
    a = {};
  for (let p of ae(e, t)) {
    let c = e[p] ?? K[p],
      u = t[p] ?? K[p];
    c === void 0 || u === void 0 || p !== "transformPerspective" && c === u || (ie(p) ? a[p] = [c, u] : i[p] = { keyframes: [c, u], options: p === "opacity" ? n : f });
  }
  let m = De(a, o);
  return m && (i.transform = { keyframes: m, options: f }), i;
}
```

--------------------------------

### Animation Engine Exported Functions

Source: https://trenaro.com/use-cases/by-training-type/cybersecurity-training

This object (`Lr`) exports key functions from the animation engine, making them accessible for external use. It includes functions for animating appear effects, getting active variant hashes, and starting optimized appear animations.

```javascript
var Lr={animateAppearEffects:Oe,getActiveVariantHash:Ve,spring:D,startOptimizedAppearAnimation:oe};return Lr})()
```

--------------------------------

### Google Analytics Tracking Setup

Source: https://trenaro.com/book-a-demo

Initializes Google Analytics (gtag.js) for tracking website events and user interactions. Includes dataLayer setup for event management.

```javascript
window.dataLayer = window.dataLayer || [];
function gtag(){
  window.dataLayer.push(arguments);
}

gtag('js', new Date());
gtag('config', 'G-484914356');
```

--------------------------------

### Animation Spring Physics Configuration

Source: https://trenaro.com/use-cases/by-training-type/employee-onboarding

This section defines and configures parameters for animation physics, specifically focusing on spring behavior. It includes constants for stiffness, damping, mass, and duration, along with functions to resolve these parameters based on visual duration and bounce, or to calculate them from a given duration.

```APIDOC
var animator=(()=>{var k=(e,t,r)=>r>t?t:r<e?e:r;var F=()=>{};function W(e){let t;return()=>(t===void 0&&(t=e()),t)}var j=e=>e;var w=e=>e*1e3,v=e=>e/1e3;function X(e,t){return t?e*(1e3/t):0}var Y=e=>Array.isArray(e)&&typeof e[0]=="number";var q={value:null,addProjectionMetrics:null};var Z={layout:0,mainThread:0,waapi:0};var G=(e,t,r=10)=>{let o="",s=Math.max(Math.round(t/r),2);for(let n=0;n<s;n++)o+=e(n/(s-1))+ மாதிரிகள்",
    "description": "The number of samples to take for the ease function.",
    "type": "number",
    "default": 10
  }
]
}

// Calculates the duration of an animation based on its keyframes and easing function.
// Returns Infinity if the animation duration exceeds a threshold.
function $(e) {
  let t = 0,
    r = 50,
    o = e.next(t);
  for (; !o.done && t < 2e4; ) t += r, o = e.next(t);
  return t >= 2e4 ? 1 / 0 : t;
}

// Creates a keyframe-based easing function.
// Parameters:
//   e: An object with animation properties (e.g., keyframes, duration).
//   t: The target duration in milliseconds.
//   r: A function to create the animation object (e.g., from a physics engine).
// Returns an object containing the animation type, ease function, and duration.
function pe(e, t = 100, r) {
  let o = r({
    ...e,
    keyframes: [0, t]
  }),
    s = Math.min($(o), 2e4);
  return {
    type: "keyframes",
    ease: n => o.next(s * n).value / t,
    duration: v(s)
  };
}

// Constant for minimum damping adjustment.
var Ee = 5;

// Calculates the difference between a target value and the current value at a given time, adjusted for rest delta.
// Parameters:
//   e: The function to get the value at a given time.
//   t: The current time.
//   r: The target value.
// Returns the adjusted difference.
function me(e, t, r) {
  let o = Math.max(t - Ee, 0);
  return X(r - e(o), t - o);
}

// Default animation spring physics parameters.
var l = {
  stiffness: 100,
  damping: 10,
  mass: 1,
  velocity: 0,
  duration: 800,
  bounce: .3,
  visualDuration: .3,
  restSpeed: {
    granular: .01,
    default: 2
  },
  restDelta: {
    granular: .005,
    default: .5
  },
  minDuration: .01,
  maxDuration: 10,
  minDamping: .05,
  maxDamping: 1
};

// Small constant for numerical stability.
var H = .001;

// Calculates spring physics parameters (stiffness, damping, duration) from duration and bounce.
// Parameters:
//   duration: The desired duration of the animation in milliseconds.
//   bounce: The amount of bounce (0 for no bounce, 1 for critical damping).
//   velocity: The initial velocity of the animation.
//   mass: The mass of the object being animated.
// Returns an object with resolved spring physics parameters.
function fe({
  duration: e = l.duration,
  bounce: t = l.bounce,
  velocity: r = l.velocity,
  mass: o = l.mass
}) {
  let s, n;
  F(e <= w(l.maxDuration), "Spring duration must be 10 seconds or less");
  let i = 1 - t;
  i = k(l.minDamping, l.maxDamping, i),
    e = k(l.minDuration, l.maxDuration, v(e)),
    i < 1 ? (s = m => {
      let p = m * i,
        c = p * e,
        u = p - r,
        d = L(m, i),
        g = Math.exp(-c);
      return H - u / d * g;
    }, n = m => {
      let c = m * i * e,
        u = c * r + r,
        d = Math.pow(i, 2) * Math.pow(m, 2) * e,
        g = Math.exp(-c),
        y = L(Math.pow(m, 2), i);
      return (-s(m) + H > 0 ? -1 : 1) * ((u - d) * g) / y;
    }) :
      (s = m => {
        let p = Math.exp(-m * e),
          c = (m - r) * e + 1;
        return -H + p * c;
      }), n = m => {
        let p = Math.exp(-m * e),
          c = (r - m) * (e * e);
        return p * c;
      });
  let f = 5 / e,
    a = Ce(s, n, f);
  if (e = w(e), isNaN(a)) return { stiffness: l.stiffness, damping: l.damping, duration: e };
  {
    let m = Math.pow(a, 2) * o;
    return { stiffness: m, damping: i * 2 * Math.sqrt(o * m), duration: e };
  }
}

// Number of iterations for root finding.
var Pe = 12;

// Helper function for calculating damping.
function Ce(e, t, r) {
  let o = r;
  for (let s = 1; s < Pe; s++) o = o - e(o) / t(o);
  return o;
}

// Calculates the damping factor for a given frequency and damping ratio.
function L(e, t) {
  return e * Math.sqrt(1 - t * t);
}

// Arrays of parameter names for checking if they are defined.
var Ie = ["duration", "bounce"],
  Ke = ["stiffness", "damping", "mass"];

// Checks if any of the specified properties are present in an object.
function ce(e, t) {
  return t.some(r => e[r] !== void 0);
}

// Resolves animation physics parameters, prioritizing duration/bounce or stiffness/damping/mass.
// Parameters:
//   e: An object containing animation properties.
// Returns an object with resolved physics parameters.
function Be(e) {
  let t = {
    velocity: l.velocity,
    stiffness: l.stiffness,
    damping: l.damping,
    mass: l.mass,
    isResolvedFromDuration: !1,
    ...e
  };
  if (!ce(e, Ke) && ce(e, Ie))
    if (e.visualDuration) {
      let r = e.visualDuration,
        o = 2 * Math.PI / (r * 1.2),
        s = o * o,
        n = 2 * k(.05, 1, 1 - (e.bounce || 0)) * Math.sqrt(s);
      t = { ...t, mass: l.mass, stiffness: s, damping: n };
    } else {
      let r = fe(e);
      t = { ...t, ...r, mass: l.mass }, t.isResolvedFromDuration = !0;
    }
  return t;
}

// Creates an animation object with resolved physics parameters.
// Parameters:
//   e: The desired visual duration of the animation.
//   t: The amount of bounce.
// Returns an object representing the animation configuration.
function D(e = l.visualDuration, t = l.bounce) {
  let r = typeof e != "object" ? { visualDuration: e, keyframes: [0, 1], bounce: t } : e,
    { restSpeed: o, restDelta: s } = r,
    n = r.keyframes[0],
    i = r.keyframes[r.keyframes.length - 1],
    f = {
      stiffness: l.stiffness,
      damping: l.damping,
      mass: l.mass,
      velocity: l.velocity,
      isResolvedFromDuration: !1,
      ...r
    };
  if (!ce(r, Ke) && ce(r, Ie)) {
    if (r.visualDuration) {
      let a = r.visualDuration,
        m = 2 * Math.PI / (a * 1.2),
        p = m * m,
        c = 2 * k(.05, 1, 1 - (r.bounce || 0)) * Math.sqrt(p);
      f = { ...f, mass: l.mass, stiffness: p, damping: c };
    } else {
      let a = fe(r);
      f = { ...f, ...a, mass: l.mass }, f.isResolvedFromDuration = !0;
    }
  }
  return f;
}

// Placeholder for a function that might resolve animation parameters.
// This function is not fully defined in the provided snippet.
var me = (e, t) => {
  let r = D(e, t);
  return {
    type: "spring",
    ...r
  };
};

// Export the animator object with its methods and configurations.
return {
  spring: me,
  config: l
};
})()
```

--------------------------------

### Framer Specific Component Styling (ILGiR)

Source: https://trenaro.com/use-cases/by-training-type/employee-onboarding

Contains detailed styling for specific Framer components identified by class names like 'framer-ILGiR' and its nested elements. This includes layout, background, borders, and positioning for various parts of the UI.

```css
.framer-ILGiR.framer-1pn7frp,.framer-ILGiR .framer-1pn7frp{display:block}.framer-ILGiR.framer-xsbe57{align-content:center;align-items:center;background-color:var(--token-cd1e8e92-b91e-4022-84c2-a059ee7f7bad, #ffffff);display:flex;flex-direction:column;flex-wrap:nowrap;gap:0px;height:min-content;justify-content:flex-start;overflow:visible;padding:0;position:relative;width:1200px}.framer-ILGiR .framer-7brvy2{--border-bottom-width: 1px;--border-color: #f4f4f5;--border-left-width: 0px;--border-right-width: 0px;--border-style: solid;--border-top-width: 0px;-webkit-backdrop-filter:blur(10px);align-content:center;align-items:center;backdrop-filter:blur(10px);background-color:#ffffffe6;display:flex;flex:none;flex-direction:column;flex-wrap:nowrap;gap:0px;height:min-content;justify-content:center;overflow:visible;padding:0;position:sticky;top:0;width:100%;z-index:9}.framer-ILGiR .framer-1heoqx6-container{flex:none;height:auto;position:relative;width:100%;z-index:9}.framer-ILGiR .framer-lrornn{align-content:center;align-items:center;display:flex;flex:none;flex-direction:column;flex-wrap:nowrap;gap:20px;height:min-content;justify-content:center;overflow:visible;padding:0 15px;position:relative;width:100%}.framer-ILGiR .framer-vyreqk{align-content:center;align-items:center;display:flex;flex:none;flex-direction:row;flex-wrap:nowrap;gap:50px;height:min-content;justify-content:flex-start;max-width:1400px;overflow:visible;padding:100px 0;position:relative;width:100%;z-index:1}.framer-ILGiR .framer-1qzlfcb{align-content:flex-start;align-items:flex-start;display:flex;flex:1 0 0px;flex-direction:column;flex-wrap:nowrap;gap:20px;height:min-content;justify-content:flex-start;overflow:visible;padding:0;position:relative;width:1px}.framer-ILGiR .framer-1sjowyx{--framer-link-text-color: #0099ff;--framer-link-text-decoration: underline;flex:none;height:auto;max-width:700px;position:relative;white-space:pre-wrap;width:auto;word-break:break-word;word-wrap:break-word;z-index:1}.framer-ILGiR .framer-b6n6dp{--framer-link-text-color: #0099ff;--framer-link-text-decoration: underline;flex:none;height:auto;max-width:650px;position:relative;white-space:pre-wrap;width:auto;word-break:break-word;word-wrap:break-word}.framer-ILGiR .framer-osqdi7{align-content:center;align-items:center;display:flex;flex:none;flex-direction:row;flex-wrap:nowrap;gap:20px;height:min-content;justify-content:flex-start;overflow:hidden;padding:20px 0 0;position:relative;width:100%}.framer-ILGiR .framer-r98zea-container,.framer-ILGiR .framer-1fbdr17-con
```

--------------------------------

### Get Legacy Variant Hash

Source: https://trenaro.com/

Retrieves a hash from animation variant configurations, prioritizing legacy configurations if available.

```javascript
function Ve(e){
  return e?e.find(r=>r.mediaQuery?window.matchMedia(r.mediaQuery).matches===!0:!1)?.hash:void 0
}
```

--------------------------------

### Framer Responsive Layout Adjustments

Source: https://trenaro.com/use-cases/by-training-type/employee-onboarding

Media queries to adjust Framer component layouts and styling for different screen sizes, particularly between 810px and 1199px.

```css
@media (max-width: 1199px) and (min-width: 810px) {
  .framer-IXhGJ.framer-v-kfok77.framer-pap3zt {
    align-content: center;
    align-items: center;
    gap: 2px;
    overflow: visible;
    padding: 20px;
    width: 440px;
    will-change: unset;
  }
  .framer-IXhGJ.framer-v-kfok77 .framer-1kjl88h {
    aspect-ratio: 1.6 / 1;
    height: var(--framer-aspect-ratio-supported, 250px);
  }
  .framer-IXhGJ.framer-v-kfok77 .framer-8tn7lb {
    padding: 25px 10px 15px;
  }
  .framer-IXhGJ.framer-v-kfok77 .framer-1ntaju4 {
    padding: 0 10px 15px;
  }
}
```

--------------------------------

### Google Analytics Setup

Source: https://trenaro.com/cookies-policy

Initializes Google Analytics tracking for the website. This snippet configures the data layer and sends initial events to Google Analytics.

```javascript
window.dataLayer = window.dataLayer || [];
function gtag() {
  window.dataLayer.push(arguments);
}

gtag('js', new Date());
gtag('config', 'G-484914356');
```

--------------------------------

### Apply Global CSS Resets and Typography

Source: https://trenaro.com/use-cases/by-training-type/employee-onboarding

This CSS block applies global reset styles to remove default browser margins and paddings, sets box-sizing to border-box for consistent layout, and defines basic typography for the body, input elements, and headings.

```CSS
html,body,#main{margin:0;padding:0;box-sizing:border-box}:root{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}*{box-sizing:border-box;-webkit-font-smoothing:inherit}h1,h2,h3,h4,h5,h6,p,figure{margin:0}body,input,textarea,select,button{font-size:12px;font-family:sans-serif}
```

--------------------------------

### Google Analytics Tracking Setup

Source: https://trenaro.com/pricing

Initializes the Google Analytics data layer and tracking functions. This script is essential for website analytics, event tracking, and campaign monitoring.

```javascript
window.dataLayer = window.dataLayer || [];
function gtag(){
  window.dataLayer.push(arguments);
}

gtag('js', new Date());
gtag('config', 'G-484914356');
```

--------------------------------

### JavaScript Animation Utility Functions

Source: https://trenaro.com/use-cases/by-training-type/employee-onboarding

This snippet contains a collection of utility functions for handling UI animations. It includes logic for processing animation properties, generating keyframes for spring and non-spring transitions, and applying transformations. Key functions manage duration, easing, and property interpolation for smooth visual effects.

```javascript
ll(e[e.length-1]);return e.concat(o)}function I(e){return e*1e3}var Me={duration:.001},K={opacity:1,scale:1,translateX:0,translateY:0,translateZ:0,x:0,y:0,z:0,rotate:0,rotateX:0,rotateY:0};function ve(e,t,r,o,s){return r.type==="spring"?Ne(e,t,r,o,s):We(e,t,r,o,s)}function Re(e,t,r){let o={},s=0,n=0;for(let i of ae(e,t)){let f=e[i]??K[i],a=t[i]??K[i];if(f===void 0||a===void 0||i!=="transformPerspective"&&f===a&&f===K[i])continue;i==="transformPerspective"&&(o[i]=[f,a]);let m=Ze(f,a,r),{duration:p,keyframes:c}=m;p===void 0||c===void 0||(p>s&&(s=p,n=c.length),o[i]=c)}return{keyframeValuesByProps:o,longestDuration:s,longestLength:n}}function Ne(e,t,r,o,s){let n={},{keyframeValuesByProps:i,longestDuration:f,longestLength:a}=Re(e,t,r);if(!a)return n;let m={ease:"linear",duration:f,delay:r.delay},p=s?Me:m,c={};for(let[d,g]of Object.entries(i))ie(d)?c[d]=se(g,a):n[d]={keyframes:se(g,a),options:d==="opacity"?m:p};let u=De(c,o);return u&&(n.transform={keyframes:u,options:p}),n}function Fe(e){let{type:t,duration:r,...o}=e;return{duration:I(r),...o}}function We(e,t,r,o,s){let n=Fe(r);if(!n)return;let i={},f=s?Me:n,a={};for(let p of ae(e,t)){let c=e[p]??K[p],u=t[p]??K[p];c===void 0||u===void 0||p!=="transformPerspective"&&c===u||(ie(p)?a[p]=[c,u]:i[p]={keyframes:[c,u],options:p==="opacity"?n:f})}let m=De(a,o);return m&&(i.transform={keyframes:m,options:f}),i}var je=["duration","bounce"],Xe=["stiffness","damping","mass"];function we(e){return Xe.some(t=>t in e)?!1:je.some(t=>t in e)}function Ye(e,t,r){return we(r)?`${e}-${t}-${r.duration}-${r.bounce}`:`${e}-${t}-${r.damping}-${r.stiffness}-${r.mass}`}function qe(e){return we(e)?{...e,duration:I(e.duration)}:e}var be=new Map,Se=10;function Ze(e,t,r){let o=Ye(e,t,r),s=be.get(o);if(s)return s;let n=[e,t],i=D({...qe(r),keyframes:n}),f={done:!1,value:n[0]},a=[],m=0;for(;!f.done&&m<I(10);)f=i.next(m),a.push(f.value),m+=Se;n=a;let p=m-Se,u={keyframes:n,duration:p,ease:"linear"};return be.set(o,u),u}function De(e,t){let r=[],o=Object.values(e)[0]?.length;if(!o)return;let s=Object.keys(e);for(let n=0;n<o;n++){let i={};for(let[a,m]of Object.entries(e)){let p=m[n];p!==void 0&&(i[a]=he(a,p))}let f=Te({transform:i,transformKeys:s},t);r.push(f)}return r}function Ue(e,t){if(!t)for(let r in e){let o=e[r];return o?.legacy===!0?o:void 0}}function Oe(e,t,r,o,s,n){for(let[i,f]of Object.entries(e)){let a=n?f[n]:void 0;if(a===null||!a&&f.default===null)continue;let m=a??f.default??Ue(f,n);if(!m)continue;let{initial:p,animate:c,transformTemplate:u}=m;if(!p||!c)continue;let{transition:d,...g}=c,y=ve(p,g,d,He(u,o),s);if(!y)continue;let h={},T={};for(let[S,V]of Object.entries(y))h[S]=V.keyframes,T[S]=V.options;let B=n?`:not(.hidden-${n}) `:"";t(`${B}[${r}="${i}"]`,h,T)}}function He(e,t){if(!(!e||!t))return(r,o)=>e.replace(t,o)}function Ve(e){return e?e.find(r=>r.mediaQuery?window.matchMedia(r.mediaQuery).matches===!0:!1)?.hash:void 0}var Lr={animateAppearEffects:Oe,getActiveVariantHash:Ve,spring:D,startOptimizedAppearAnimation:oe};return Lr})()
```

--------------------------------

### Framer Responsive Content Layout (CSS)

Source: https://trenaro.com/use-cases/by-training-type/employee-onboarding

Styles for responsive Framer content sections, adjusting layout, padding, and aspect ratio based on screen size or specific variants. This ensures content adapts gracefully.

```css
.framer-RCTYl.framer-v-sunl0i.framer-x3uchi{align-content:center;align-items:center;cursor:unset;gap:2px;overflow:visible;padding:20px;width:440px;will-change:unset}.framer-RCTYl.framer-v-sunl0i .framer-1i6nw54{aspect-ratio:1.6 / 1;height:var(--framer-aspect-ratio-supported, 250px)}.framer-RCTYl.framer-v-sunl0i .framer-15tjvyr{padding:25px 10px 15px}.framer-RCTYl.framer-v-1ij0e85 .framer-1i6nw54{align-content:flex-start;align-items:flex-start;height:min-content;justify-content:flex-start;order:0;padding:0 0 22px}.framer-RCTYl.framer-v-1ij0e85 .framer-144iarf-container{order:0}.framer-RCTYl.framer-v-1ij0e85 .framer-15tjvyr{order:1}
```

--------------------------------

### Animation Default Constants

Source: https://trenaro.com/use-cases/by-training-type/cybersecurity-training

Defines default values for animation properties. 'Me' sets a minimal duration, while 'K' provides a comprehensive set of default transform properties, ensuring a consistent starting point for animations.

```javascript
var Me={duration:.001},K={opacity:1,scale:1,translateX:0,translateY:0,translateZ:0,x:0,y:0,z:0,rotate:0,rotateX:0,rotateY:0};
```

--------------------------------

### WAAPI Animation Creation

Source: https://trenaro.com/use-cases/by-training-type/employee-onboarding

Creates and manages animations using the Web Animations API (WAAPI). This function abstracts the `element.animate()` call, handling options like duration, delay, easing, repeat, and direction. It also includes logic for WAAPI readiness and cleanup.

```javascript
function R(e,t,r,{delay:o=0,duration:s=300,repeat:n=0,repeatType:i="loop",ease:f="easeOut",times:a}={},m=void 0){let p={\[t\]:r};a&&(p.offset=a);let c=J(f,s);Array.isArray(c)&&(p.easing=c),q.value&&Z.waapi++;let u={delay:o,duration:s,easing:Array.isArray(c)?"linear":c,fill:"both",iterations:n+1,direction:i==="reverse"?"alternate":"normal"};m&&(u.pseudoElement=m);let d=e.animate(p,u);return q.value&&d.finished.finally(()=>{Z.waapi--}),d}
```

--------------------------------

### Spring and Tween Animation Factory

Source: https://trenaro.com/pricing

A factory function that selects and calls the appropriate animation generation function based on the animation type ('spring' or other). It handles initial setup and parameter conversion.

```javascript
function ve(e, t, r, o, s) {
  return r.delay && (r.delay = I(r.delay)), r.type === "spring" ? Ne(e, t, r, o, s) : We(e, t, r, o, s);
}
```

--------------------------------

### URL Parameter Preservation for Navigation

Source: https://trenaro.com/

Appends current URL search parameters to specific links (starting with '#', '/', or '.') that have the 'data-framer-preserve-params' attribute or are targeted by a general selector. This ensures state is maintained across page navigations.

```javascript
!(function() {
  function c(t, r) {
    let e = r.indexOf("#"),
    n = e === -1 ? r : r.substring(0, e),
    o = e === -1 ? "" : r.substring(e),
    a = n.indexOf("?");
    if (a === -1) return n + t + o;
    let d = new URLSearchParams(t),
    h = n.substring(a + 1),
    s = new URLSearchParams(h);
    for (let [i, m] of d) s.has(i) || s.append(i, m);
    return n.substring(0, a + 1) + s.toString() + o;
  }
  var l = 'div#main a[href^="#"],div#main a[href^="/"],div#main a[href^="."]',
  u = 'div#main a[data-framer-preserve-params]',
  f,
  g = (f = document.currentScript) == null ? void 0 : f.hasAttribute("data-preserve-internal-params");
  if (window.location.search && !/bot|-google|google-|yandex|ia_archiver|crawl|spider/iu.test(navigator.userAgent)) {
    let t = document.querySelectorAll(g ? `${l},${u}` : u);
    for (let r of t) {
      let e = c(window.location.search, r.href);
      r.setAttribute("href", e);
    }
  }
})();
```

--------------------------------

### Framer CSS Styles for .framer-74cBD Component

Source: https://trenaro.com/use-cases/by-training-type/employee-onboarding

Defines typography and styling for the .framer-74cBD component, including paragraph elements, with responsive adjustments for various screen sizes. Sets font families, sizes, weights, and line heights.

```css
.framer-74cBD .framer-styles-preset-1btcpgd:not(.rich-text-wrapper),.framer-74cBD .framer-styles-preset-1btcpgd.rich-text-wrapper p{
  --framer-font-family: "Inter Display", "Inter Display Placeholder", sans-serif;
  --framer-font-family-bold: "Inter Display", "Inter Display Placeholder", sans-serif;
  --framer-font-family-bold-italic: "Inter Display", "Inter Display Placeholder", sans-serif;
  --framer-font-family-italic: "Inter Display", "Inter Display Placeholder", sans-serif;
  --framer-font-open-type-features: normal;
  --framer-font-size: 18px;
  --framer-font-style: normal;
  --framer-font-style-bold: normal;
  --framer-font-style-bold-italic: italic;
  --framer-font-style-italic: italic;
  --framer-font-variation-axes: normal;
  --framer-font-weight: 400;
  --framer-font-weight-bold: 700;
  --framer-font-weight-bold-italic: 700;
  --framer-font-weight-italic: 400;
  --framer-letter-spacing: .02em;
  --framer-line-height: 1.6em;
  --framer-paragraph-spacing: 20px;
  --framer-text-alignment: left;
  --framer-text-color: var(--token-4e3d4b62-b411-4488-b97a-8ff2a61d3177, #4b5563);
  --framer-text-decoration: none;
  --framer-text-stroke-color: initial;
  --framer-text-stroke-width: initial;
  --framer-text-transform: none;
}
@media (max-width: 1199px) and (min-width: 810px){
  .framer-74cBD .framer-styles-preset-1btcpgd:not(.rich-text-wrapper),.framer-74cBD .framer-styles-preset-1btcpgd.rich-text-wrapper p{
    --framer-font-family: "Inter Display", "Inter Display Placeholder", sans-serif;
    --framer-font-family-bold: "Inter Display", "Inter Display Placeholder", sans-serif;
    --framer-font-family-bold-italic: "Inter Display", "Inter Display Placeholder", sans-serif;
    --framer-font-family-italic: "Inter Display", "Inter Display Placeholder", sans-serif;
    --framer-font-open-type-features: normal;
    --framer-font-size: 16px;
    --framer-font-style: normal;
    --framer-font-style-bold: normal;
    --framer-font-style-bold-italic: italic;
    --framer-font-style-italic: italic;
    --framer-font-variation-axes: normal;
    --framer-font-weight: 400;
    --framer-font-weight-bold: 700;
    --framer-font-weight-bold-italic: 700;
    --framer-font-weight-italic: 400;
    --framer-letter-spacing: .02em;
    --framer-line-height: 1.6em;
    --framer-paragraph-spacing: 20px;
    --framer-text-alignment: left;
    --framer-text-color: var(--token-4e3d4b62-b411-4488-b97a-8ff2a61d3177, #4b5563);
    --framer-text-decoration: none;
    --framer-text-stroke-color: initial;
    --framer-text-stroke-width: initial;
    --framer-text-transform: none;
  }
}
@media (max-width: 809px) and (min-width: 0px){
  .framer-74cBD .framer-styles-preset-1btcpgd:not(.rich-text-wrapper),.framer-74cBD .framer-styles-preset-1btcpgd.rich-text-wrapper p{
    --framer-font-family: "Inter Display", "Inter Display Placeholder", sans-serif;
    --framer-font-family-bold: "Inter Display", "Inter Display Placeholder", sans-serif;
    --framer-font-family-bold-italic: "Inter Display", "Inter Display Placeholder", sans-serif;
    --framer-font-family-italic: "Inter Display", "Inter Display Placeholder", sans-serif;
    --framer-font-open-type-features: normal;
    --framer-font-size: 16px;
    --framer-font-style: normal;
    --framer-font-style-bold: normal;
    --framer-font-style-bold-italic: italic;
    --framer-font-style-italic: italic;
    --framer-font-variation-axes: normal;
    --framer-font-weight: 400;
    --framer-font-weight-bold: 700;
    --framer-font-weight-bold-italic: 700;
    --framer-font-weight-italic: 400;
    --framer-letter-spacing: .02em;
    --framer-line-height: 1.6em;
    --framer-paragraph-spacing: 20px;
    --framer-text-alignment: left;
    --framer-text-color: var(--token-4e3d4b62-b411-4488-b97a-8ff2a61d3177, #4b5563);
    --framer-text-decoration: none;
    --framer-text-stroke-color: initial;
    --framer-text-stroke-width: initial;
    --framer-text-transform: none;
  }
}
```

--------------------------------

### Physics-Based Animation Generator

Source: https://trenaro.com/pricing

Creates an animation generator function based on physics principles. It calculates the animation curve and provides a `next` method to get the value at a given time, and a `done` property to indicate completion.

```javascript
function D(e = l.visualDuration, t = l.bounce) {
    let r = typeof e != "object" ? {visualDuration: e, keyframes: [0, 1], bounce: t} : e;
    let {restSpeed: o, restDelta: s} = r;
    let n = r.keyframes[0], i = r.keyframes[r.keyframes.length - 1], f = {done: !1, value: n};
    let {stiffness: a, damping: m, mass: p, duration: c, velocity: u, isResolvedFromDuration: d} = Be({...r, velocity: -v(r.velocity || 0)});
    let g = u || 0, y = m / (2 * Math.sqrt(a * p)), h = i - n, T = v(Math.sqrt(a / p)), B = Math.abs(h) < 5;
    o || (o = B ? l.restSpeed.granular : l.restSpeed.default);
    s || (s = B ? l.restDelta.granular : l.restDelta.default);
    let S;
    if (y < 1) {
        let x = L(T, y);
        S = A => {
            let M = Math.exp(-y * T * A);
            return i - M * ((g + y * T * h) / x * Math.sin(x * A) + h * Math.cos(x * A))
        }
    } else if (y === 1) S = x => i - Math.exp(-T * x) * (h + (g + T * h) * x);
    else {
        let x = T * Math.sqrt(y * y - 1);
        S = A => {
            let M = Math.exp(-y * T * A), z = Math.min(x * A, 300);
            return i - M * ((g + y * T * h) * Math.sinh(z) + x * h * Math.cosh(z)) / x
        }
    }
    let V = {calculatedDuration: d && c || null, next: x => {
        let A = S(x);
        if (d) f.done = x >= c;
        else {
            let M = x === 0 ? g : 0;
            y < 1 && (M = x === 0 ? w(g) : me(S, x, A));
            let z = Math.abs(M) <= o, ke = Math.abs(i - A) <= s;
            f.done = z && ke
        }
        return f.value = f.done ? i : A, f
    }, toString: () => {
        let x = Math.min($(V), 2e4), A = G(M => V.next(x * M).value, x, 30);
        return x + "ms " + A
    }, toTransition: () => {}
    };
    return V
}
```

--------------------------------

### Framer Border and Pseudo-element Styles (CSS)

Source: https://trenaro.com/use-cases/by-training-type/employee-onboarding

Applies border styles to Framer elements using pseudo-elements, allowing for dynamic border creation based on CSS variables. This enables flexible border customization for components.

```css
.framer-rhq4G[data-border=true]:after,.framer-rhq4G [data-border=true]:after{content:"";border-width:var(--border-top-width, 0) var(--border-right-width, 0) var(--border-bottom-width, 0) var(--border-left-width, 0);border-color:var(--border-color, none);border-style:var(--border-style, none);width:100%;height:100%;position:absolute;box-sizing:border-box;left:0;top:0;border-radius:inherit;pointer-events:none}
```

--------------------------------

### Framer Page Content and Device Component Styling

Source: https://trenaro.com/use-cases/by-training-type/employee-onboarding

Styles the wrapper for page content and device components. It ensures that elements within these wrappers maintain relative positioning and that device components fill their containers when no device is present.

```css
[data-framer-component-type=PageContentWrapper]>*,[data-framer-component-type=PageContentWrapper]>[data-framer-component-type]{position:relative}[data-framer-component-type=DeviceComponent].no-device>*{width:100%!important;height:100%!important}
```