How to set properties dynamically

[lgehrig4]

I'm creating a SplitText reference using a dropdown to choose properties and a button to start the animation with the chosen properties. With the properties hard coded everything works, but I can't figure out how to dynamically add them. I've tried using back ticks (`${property}` and just the variable name. I logged property and it's correctly grabbing values (chars, words and lines)

const property = document.querySelector('select').value



const tl = new TimelineLite



mySplitText = new SplitText(".splittext", {type: "words, lines, chars"})



chars = mySplitText.chars
lines = mySplitText.lines
words = mySplitText.words


tl.staggerFrom(property, 1, {opacity:0, y:80, ease: Elastic.easeOut}, 0.4)



document.getElementById("animate").onclick = function() {
  tl.restart();
}

 

[OSUblake]

Demo please.

 

[lgehrig4]

I wasn't able to add the SplitText plugin so I'm not sure if this helps

 

See the Pen vYYZwMb by lgehrig4 (@lgehrig4) on CodePen

 

 

[GreenSock]

I assume you were trying to do something like this?: 

See the Pen gOORVPW?editors=0010 by GreenSock (@GreenSock) on CodePen

 

For the record, all the bonus tools can be used on codepen for free, and here are all the URLs: 

See the Pen OPqpRJ by GreenSock (@GreenSock) on CodePen

 

Does that help? 

[OSUblake]

You should probably brush up on how bracket notion works.

https://codeburst.io/javascript-quickie-dot-notation-vs-bracket-notation-333641c0f781

 

See the Pen e8fe421d2e05f9fef465fc0e1642f0f8 by osublake (@osublake) on CodePen

 

EDIT: Jack is 30 seconds faster than me.

[lgehrig4]

Thanks guys! Yes, I should get to know bracket notation, as well as many other things to be honest. I've only been coding for 9 months (teaching myself) and I had 0 technical background prior (finance guy).