Search the Community
Showing results for tags 'json'.
Found 3 results
-
Hello Folks, Been having a hell of a frustrating time trying to combine GSAP with React. I'm fairly new to both technologies. I'm basically doing a fetch request to get data from a json file (public/data.json) and mapping it into a div in the Test.js component. I just cant seem to animate anything thats returned in the response with GSAP. From everything I was able to find online, it seems I need to use useRef() with GSAP. Any help would be greatly appreciated. I've created a code sandbox here: https://codesandbox.io/s/musicapp-with-react-and-gsap-odjxq?file=/src/Test.js
-
Working on a project whereby a little creativity is called for. I have attached a zip file that contains the results of running forced alignment on a transcript using gentle that aligns an audio file to its transcript. I am looking for a way to "animate" the text as the speech is spoken in order to maximise the focus on the text being spoken as it is spoken. If someone looks away and comes back to it - they should be straight in. It is kind of like subtitles but for audio - except I want it to be as creative as possible. I originally had in mind - simply fading the text in and out whilst scrolling see the links to the examples I have tried out. Please also bear in mind that the actual audio may be over an hour long, so the animation needs to take into account the stream effect of keeping only the current text in focus (related to what is being spoken at the playhead). Any text that is not within 20-25 words of the word being spoken is not really relevant - unless it is and I'm not seeing it. Furthermore there are certain words that the forced-aligner does not pick up and marks them as <unk> - in the example "specialise" is an unknown word because it is spelt wrong. It is an American speaking so it should be spelt with a 'z'. However - there should still be a start and end number for the timeline. { "alignedWord": "<unk>", "case": "success", "end": 16.19, "endOffset": 301, "phones": [ { "duration": 0.69, "phone": "oov_S" } ], "start": 15.5, "startOffset": 291, "word": "specialise" }, http://jsfiddle.net/wuj6xqpz/18/ https://codesandbox.io/s/fervent-villani-vbero https://codepen.io/rustyleaf/pen/oNNwZpB 314a0bf1.zip -
I just finished creating 2 minutes animation with ~80 objects. I spend more time then i would we spend in after effects or photoshop, but i can make edits 10 times faster, then in Adobe programs. I already asked about UI and got an answer that Greensock using tweenui.com behind the scene (or vise versa). (I can't use this tool, because it's same "Adobe layers timeline system" that i am trying to get rid of using greensock.) One of the most time consuming thing was in the end - adding new object to my scene. 1. I create div element with a path to image source and id 2. I create var shortcut image_name = $("#image_name") (just realized this is not necessarry) 3. I set object to opacity:0 and showing it when it's time My question is - what technologies i can use to make this step easier? I think i should create json array and parser for it. And add image to json dynamicly. And create new array for this image that will have greensock .set function ... okay, my brain just pooped at that point. Can you give me a hint of what should i use? Thank you forum.
