Flip Text Block – @tuanphan

Description

flip text block with hover (desktop), click (mobile), use symbol # to recognize flip
view demo – password: abc
buy me a coffee

#1. Install Code

#1.1. Make sure you added some Text Blocks with symbol like this

#1front#
#1back#
#2front#
#2back#

These will help the code identify the Text objects that need to be flipped.

#1.2. Make sure Text Blocks for Front/Flip overlap together

#1.3. Hover on top right of section > Click EDIT SECTION

#1.4. at Design > Anchor Link > enter word: flip-text

#1.5. Next, use this code to Page Header Injection (page where you use Text Block)

If you use Personal/Basic Plan and your plan doesn’t support Injection, you can see #3.1

<!-- 07.26c10v1 Flip Text Block -->
<script>
window.FlipTextBlockConfig = {
  containerSelector: '.fluid-engine',
  blockSelector: '.fe-block',
  markerRegex: '#\\s*(\\d+)\\s*(front|back)\\s*#',
  autoHideBackOnParse: true,
  animationClasses: ['preFlex', 'flexIn'],
  disableInnerTransitions: true,
  replaceTextShapes: true,
  replaceShapes: ['underline'],
  textShapeSelector: '.TextShape-node',
  highlightSelector: '.sqsrte-text-highlight',
  underlineOffset: '0.16em',
  underlineThickness: '0.1em',
  perspective: '1400px',
  duration: 700,
  easing: 'cubic-bezier(0.19, 1, 0.22, 1)',
  axis: 'Y',
  flipDirection: 1,
  desktopTrigger: 'hover',
  mobileTrigger: 'tap',
  hoverMediaQuery: '(hover: hover) and (pointer: fine)',
  tapToggle: true,
  closeOnOutsideTap: true,
  keyboardAccessible: true,
  ariaLabel: 'Flip card'
};
</script>
<script src="https://code.beaverhero.com/textblock/0726c10v1fliptextblock.js"></script>
<style>body.sqs-edit-mode-active .ftb-card > .ftb-back {transform: unset !important;
}body.sqs-edit-mode-active #siteWrapper [data-ftb-side="back"]:not(.ftb-face){visibility:visible !important;position: relative;right: -30px;}</style>

#2. Customize

#3. Other

#3.1. If you use Personal/Basic Plan and your plan doesn’t support Injection, you can edit current page > Add a Markdown Block

Add this code into Markdown Block

<script>
window.FlipTextBlockConfig = {
  containerSelector: '.fluid-engine',
  blockSelector: '.fe-block',
  markerRegex: '#\\s*(\\d+)\\s*(front|back)\\s*#',
  autoHideBackOnParse: true,
  animationClasses: ['preFlex', 'flexIn'],
  disableInnerTransitions: true,
  replaceTextShapes: true,
  replaceShapes: ['underline'],
  textShapeSelector: '.TextShape-node',
  highlightSelector: '.sqsrte-text-highlight',
  underlineOffset: '0.16em',
  underlineThickness: '0.1em',
  perspective: '1400px',
  duration: 700,
  easing: 'cubic-bezier(0.19, 1, 0.22, 1)',
  axis: 'Y',
  flipDirection: 1,
  desktopTrigger: 'hover',
  mobileTrigger: 'tap',
  hoverMediaQuery: '(hover: hover) and (pointer: fine)',
  tapToggle: true,
  closeOnOutsideTap: true,
  keyboardAccessible: true,
  ariaLabel: 'Flip card'
};
</script>
<script src="https://code.beaverhero.com/textblock/0726c10v1fliptextblock.js"></script>
<style>body.sqs-edit-mode-active .ftb-card > .ftb-back {transform: unset !important;
}body.sqs-edit-mode-active #siteWrapper [data-ftb-side="back"]:not(.ftb-face){visibility:visible !important;position: relative;right: -30px;}</style>