camel-components/demo-assets/animationWindowCode.txt

Camel Components

import React from 'react'
import { FakeTyping } from 'camel-components'

class YourApp extends React.Component {
  render () {
    return (
      <AnimationWindow
        frameSpeed={45} // in ms
        frameStart={'toggle bubbles'} // scene name or frame number
        animation={true} // false to freeze frame for easy scene creation
        transitionSpeed={800} // default transition speed, overwritten by element styles
        windowStyles={{position: 'relative', height: 400, width: 400, background: 'rgba(0.0.0.0)'}}
        stopOnEnd={false} // optional: false (default) => endless set repetition, true => set will run once
        scenes={[
          {name: 'social login', frames: 10, elements: {
            bar: {style: {top: '35%', left: '20%', height: '30%', width: '60%', background: 'rgba(255, 255, 255, 0.1)', border: 'rgba(255, 255, 255, 0.2) 1px solid'}},
            wording: {style: {top: '40%', left: '10%', height: '10%', width: '80%', fontSize: 17}, content: 'social login'},
            avatar: {style: {top: '19%', left: '44%', height: '12%', width: '12%', backgroundImage: 'url(./avatar/boy-1.svg)'}},
            facebook: {style: {top: '51%', left: '46%', height: '8%', width: '8%', backgroundImage: 'url(./socialnetwork/facebook.svg)', zIndex: '20'}},
            googlePlus: {style: {top: '51%', left: '36%', height: '8%', width: '8%', backgroundImage: 'url(./socialnetwork/google-plus.svg)'}},
            twitter: {style: {top: '51%', left: '56%', height: '8%', width: '8%', backgroundImage: 'url(./socialnetwork/twitter.svg)'}},
          }},
          {name: 'facebook trigger', frames: 4, elements: {
            facebook: {styleUpdate: {top: '47%', left: '42%', height: '16%', width: '16%', transition: 'all 400ms cubic-bezier(0.250, 1.085, 0.785, 1.650)'}},
          }},
          {name: 'logged in', frames: 12, elements: {
            bar: {styleUpdate: {top: '10%', left: '10%', height: '10%', width: '80%'}},
            wording: {removeAfterScene: true, styleUpdate: {opacity: '0'}}, //fade out
            avatar: {styleUpdate: {top: '12%', left: '78%', height: '5%', width: '5%'}},
            facebook: {styleUpdate: {top: '12%', left: '84%', height: '5%', width: '5%', zIndex: '20', transition: 'default'}},
            googlePlus: {removeAfterScene: true, styleUpdate: {top: '49%', left: '16%', height: '12%', width: '12%', opacity: '0'}}, //fade out
            twitter: {removeAfterScene: true, styleUpdate: {top: '49%', left: '76%', height: '12%', width: '12%', opacity: '0', zIndex: '18'}}, //fade out
            user1: {style: {top: '79%', left: '16%', height: '12%', width: '12%', backgroundImage: 'url(./avatar/boy-18.svg)', opacity: '0', zIndex: '18'}}, // invisible add user
            user2: {style: {top: '79%', left: '46%', height: '12%', width: '12%', backgroundImage: 'url(./avatar/girl-3.svg)', opacity: '0', zIndex: '18'}}, // invisible add user
            user3: {style: {top: '79%', left: '76%', height: '12%', width: '12%', backgroundImage: 'url(./avatar/boy-12.svg)', opacity: '0', zIndex: '18'}}, // invisible add user
            wording2: {style: {top: '40%', left: '10%', height: '10%', width: '80%', fontSize: 17, opacity: '0'}, content: 'realtime collaboration'}, // invisible new text
          }},
          {name: 'show users', frames: 12, elements: {
            user1: {styleUpdate: {top: '60%', left: '27%', height: '10%', width: '10%', opacity: '1'}}, // invisible add user
            user2: {styleUpdate: {top: '60%', left: '47%', height: '10%', width: '10%', opacity: '1'}}, // invisible add user
            user3: {styleUpdate: {top: '60%', left: '67%', height: '10%', width: '10%', opacity: '1'}}, // invisible add user
            wording2: {styleUpdate: {opacity: '1'}}, // fade in
          }},
          {name: 'speech bubbling', frames: 3, elements: {
            speechBubble1: {style: {top: '50%', left: '61%', height: '10%', width: '10%', backgroundImage: 'url(./communication/speech-bubble.svg)'}},
          }},
          {name: 'speech bubbling2', frames: 3, elements: {
            speechBubble2: {style: {top: '50%', left: '35%', height: '10%', width: '10%', backgroundImage: 'url(./communication/speech-bubble.svg)', transform: 'scaleX(-1)'}},
          }},
          {name: 'toggle bubbles', frames: 10, elements: {
            speechBubble1: {styleUpdate: {left: '20%'}},
            speechBubble2: {styleUpdate: {left: '74%'}},
          }},
        ]}
      />
    )
  }
}