Forum Discussion
Storyline360, Animation and GSAP ( Greensock )
I purchased Club Greensock, and I have not been able to successfully get SplitText plugin to work. Any idea what I am missing here:
================ code ==============
//name the vars of elements on the slide
var txt1 = document.querySelectorAll("[data-acc-text='text1']");
//load in the plugins
dynamicallyLoadScripts([
"https://(our server site is here)/greensock/minified/SplitText.min.js",
], onLoadScripts);
function onLoadScripts() {
split = new SplitText(txt1, {type:"chars"})
animation.from(split.chars, {opacity:0, y:50, ease:"back(4)", stagger:{
from:"end", //try "center" and "edges"
each:0.05
}})
}
//the function that look for and loads the urls
function dynamicallyLoadScripts(urls, onComplete) {
if (typeof urls === "string") {
urls = [urls];
}
let toLoad = urls.length;
urls.forEach(function(url) {
let script = document.createElement("script");
script.src = url;
document.head.appendChild(script);
script.addEventListener("load", function() {
if (!--toLoad) {
onComplete && onComplete();
}
})
});
}
- Jürgen_Schoene_2 years agoCommunity Member
SplitText only works for normal DOM text, not for SVG text <tspan> (which is used by storyline for text)
https://greensock.com/forums/topic/12165-splittext-with-svg-text-element-problems/
(Posted August 6, 2015 - I do not believe that anything has changed)
- PhilMayor2 years agoSuper Hero
Jurgen would it work with the accessible text which is not meant to be SVG based
Sent from my iPhone
- Jürgen_Schoene_2 years agoCommunity Member
probably accessible text could work - but I have not tested it
the test would only be worth it if articulate solved the problem with the annoying scroller in accessible text mode
- MathNotermans-92 years agoCommunity Member
As a reply on how to use DOM related plugins like GSAP's SplitText and ScrambleText on SVG text in Storyline i made a sample.
https://360.articulate.com/review/content/670bb432-b866-436b-8c1b-1b37d824dd0c/review
I use the lines of code as shown to Phil to grab the texts from all textfields in Storyline ( including buttons )...Determine which one i want to use ( in this case that is i1 ) Then i add a pure HTML text field to Storyline by appending it to a shape onscreen. And that textfield i can then target with GSAPs SplitText or ScrambleText.
Some weirdness with the missing i in textfield. Not sure where that comes from... but this is basically the setup you need to get this working.- PhilMayor2 years agoSuper Hero
Thanks Math for the help, I am sure this will work
Sent from my iPhone