Search the Community

this.menuTimeLine = gsap.timeline({ paused: true, }); this.menuTimeLine .fromTo(this.ref.menu, { x: "-100%", }, { x: "0%", duration: this.state.open ? 0.3 : 2, ease: this.state.open ? "linear" : "expo.out", }, 0).reverse() if (this.menuTimeLine.reversed()) { this.menuTimeLine.play() } else { this.menuTimeLine.reverse() } Button.addEventListener('click', () => { if (this.menuTimeLine.reversed()) { this.menuTimeLine.play(); } else { this.menuTimeLine.reverse() } }) Update Prop or Tween value conditionally whatever it is normal gsap or gsap timeline In Gsap version 2.x.x updateTo can update tweening values or gsap props but what to do in gsap 3.x.x or Gsap vars can help in this issue ? in Codepen example dynamic ease or duration ? besause timeline is outside of onClick ?

I'm loading an XML file that follows this format, s'all working perfectly. <?xml version="1.0" encoding="UTF-8"?> <data> <LoaderMax name="PEDThumbs" load="true"> <ImageLoader docTitle="Candidate Registration Form" url="data/images/pre/thumbs/Candidate Registration Form.png" file="data/files/pre/Candidate Registration Form.pdf"> <docDesc><![CDATA[<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque nec rhoncus nisi. Quisque nec augue eu dui vestibulum blandit. Proin viverra turpis suscipit, vestibulum velit consectetur, ullamcorper dolor. Donec ornare facilisis nulla non elementum. Phasellus mattis nunc nisl. Nam elementum fermentum commodo. Cras et metus faucibus, cursus odio vel, sodales ante. Donec non odio vitae urna sodales blandit quis ac magna. Vivamus viverra laoreet ligula, nec fermentum augue condimentum eu.</p> <p>In vel congue mauris. Maecenas consequat tempor eros a scelerisque. Nulla facilisi. Donec id nisi vel odio iaculis eleifend in in lorem. Aliquam lorem tortor, commodo a pretium quis, laoreet nec odio. Phasellus posuere bibendum dolor vitae elementum. Vestibulum quis bibendum eros. Nulla et lacinia est.</p> <p><a href="www.google.com">This is a hyperlink, it takes the user to external websites</a></p>]]></docDesc> </ImageLoader> <ImageLoader docTitle="Example ID Verification Procedure" url="data/images/pre/thumbs/Example ID Verification Procedure.png" file="data/files/pre/Example ID Verification Procedure.pdf"> <docDesc><![CDATA[<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque nec rhoncus nisi. Quisque nec augue eu dui vestibulum blandit. Proin viverra turpis suscipit, vestibulum velit consectetur, ullamcorper dolor. Donec ornare facilisis nulla non elementum. Phasellus mattis nunc nisl. Nam elementum fermentum commodo. Cras et metus faucibus, cursus odio vel, sodales ante. Donec non odio vitae urna sodales blandit quis ac magna. Vivamus viverra laoreet ligula, nec fermentum augue condimentum eu.</p> <p>In vel congue mauris. Maecenas consequat tempor eros a scelerisque. Nulla facilisi. Donec id nisi vel odio iaculis eleifend in in lorem. Aliquam lorem tortor, commodo a pretium quis, laoreet nec odio. Phasellus posuere bibendum dolor vitae elementum. Vestibulum quis bibendum eros. Nulla et lacinia est.</p> <p><a href="www.google.com">This is a hyperlink, it takes the user to external websites</a></p>]]></docDesc> </ImageLoader> </LoaderMax> <LoaderMax name="PEDImages" load="true"> <ImageLoader url="data/images/pre/Candidate Registration Form.png"> </ImageLoader> <ImageLoader url="data/images/pre/Example ID Verification Procedure.png"> </ImageLoader> </LoaderMax> </data> I'm trying to access the data held in docDesc in preperation for parsing it as HTML (hyperlinks are important), so I created an array called docDesc and attempt to fill it like so: docDesc[i] = loadedThumbs[i].vars.rawXML.i.i; and I instance it like this: currentTitle = event.target.name; // equates to a numeric index that can be used to pick items out of an array txt2.docIntro.text = String(docDesc[currentTitle]); When I trace the array it returns as ' , '. Checking the contents of vars.rawXML.i.i in the debugger shows that loaderMax has picked up the content, so why has it not cast it to the array? Is there a limitation on the number of characters I can place into the array or have I made some other error?

Hi, I'm just wondering how to use TweenLite to tween a css property without using the CSSPlugin? I know this is probably really dumb, but I'm trying to get a better sense of what's going on in the Tween. What would I use to do this without the CSSPlugin? element = document.getElementById("element") TweenLite.to(element, 1, { css:{opacity:0.5} }); Thanks for reading.