Please be aware that Ceros SDK plugins are non-native tools and are provided "as is". As such, we cannot guarantee that plugin functionality will work as intended across all implementation instances.
About This Plugin
This plugin creates a ticker that can increase and decrease at different increments and speeds.
Click here to import demo experience
How To Implement
Step 1: Add the Custom HTML
Copy the SDK Script below and paste it into the Custom HTML field within the Settings panel in the Studio. Press OK to finish and close the panel.
<script
src="https://labs.ceros.com/sdk-plugins/ticker/main.js?v=1">
</script>Step 2: Set Up Text Box with Animation, Tags, and Payload
1. Create a text box with the Text Tool.
2. Set the stylization for the text box and place the starting number within it.
Note: The starting number isn't actually required within the text box, but we recommend that you include it so you can visualize the spacing and layout.
3. With this text box selected, navigate to the Animate tab and add an On View animation. This MUST be done so the SDK code can detect when the textbox is showing on the screen to start the ticker functionality. The animation type, easing, delay, and/or duration can be anything.
4. With this text box still selected, open the SDK Panel.
5. In the second Enter Tag field beneath the SDK ID, type in the tag animate and then press Enter / Return to finish adding the tag. Then, add a second tag x - where "x" is a unique whole number (eg, 1).
Note: Each ticker text box that you create in an experience MUST have a unique x numerical value tag used as an identifier (1, 2, 3, and so on depending on the number of ticker boxes you have present).
6. With the SDK Panel open, type in a Payload in the second Enter Payload field: A, B, C, D.
• A = starting number (integer)
• B = ending number (integer)
• C = tick value (integer)
• D = tick duration (whole number >0)
Note: Regarding tick durations, 1000 = 1 second. For a faster ticker time, use a value between 50 - 100.
In the above example:
• Starting number: 5000
• Ending number: 15000
• Tick value: 300 (ie, the number will increase by 300 until it reaches its end number)
• Tick duration: 100 (ie, 1/10th of a second or 10 ticks per second)
Example Payloads
If you want to tick 'up' in value, use a positive number.
Example:
• Starting number: 0
• Ending number: 10
• Tick value: 2
The sequence will be: 0, 2, 4, 6, 8, 10.
If you want to tick 'down' in value, use a negative number.
Example:
• Starting number: 1000
• Ending number: 0
• Tick value: -100
The sequence will be: 1000, 900, 800, 700, ..., 0.
Note: If you put the starting number and ending number in the wrong order with respect to your tick value, the ticker will still go in the desired direction.