Search the Community
Showing results for tags 'constructor'.
Found 3 results
-
Hello! Relatively new to GSAP but have loved the forums for awhile now, hugely helpful for almost anything I encounter! However, I've stumbled into a canvas animation I can't quiet figure out. I have a canvas wave animation whose height is controlled by an "amplitude" value on line 7. I am unsure of where the .to tween must be placed to have access to the draw function and the amplitude. Would love any pointers you may have to offer! Please let me know if there is any additional information I can provide. Thanks, Nye
-
Please note that I'm heavily editing my pen, so I just put some code below too. Sorry if this is a silly question, but is my assumption in the comments below correct? That I can set ```transformOrigin``` in the constructor as a default fallback property? Yes, I realize that it would be the normal way, but don't have time to set up a test and I'm being lazy hehe function targetReady() { var tl = new TimelineMax(); //If I pass a property to constructor like this origin: //var tl = new TimelineMax({transformOrigin: "center center"}); //Is my assumption correct that this will be an overridable default fallback, such that any .to, .from, etc., that supplies it's own will take precedent? Also, if it supplied a svgOrigin property...would that take precedence over transformOrigin set in the constructor? //Trying to "DRY up" this sort of redundant setting of transform origin: tl.addLabel('targetReady') .from(finger, .7, {opacity: 0, x: -400, ease: Linear.easeNone}, "targetReady-=.5") .from(circleStroke, .7, {opacity: 0, x: 400, ease: Linear.easeNone}, "targetReady-=.5") .to(finger, .1, {scale: .99, transformOrigin: "center center", ease: Linear.easeNone}, "targetReady+=.7") .to(circleStroke, .1, {scale: .98, y:1, transformOrigin: "center center", ease: Linear.easeNone}, "targetReady+=.7") .to(finger, .1, {scale: 1, transformOrigin: "center center", ease: Linear.easeNone}, "targetReady+=.85") .to(circleStroke, .1, {scale: 1, y: 0, transformOrigin: "center center", ease: Linear.easeNone}, "targetReady+=.85") .from(glass, 2, {opacity: 0, transformOrigin: "center center", ease: Linear.easeNone}, "targetReady+=2") .to(circle, 1, {scale: 30, opacity: 0, transformOrigin: "center center", ease: Linear.easeNone}, "targetReady+=1") .set(circle, {scale: 0, opacity:0, transformOrigin: "center center", ease: Linear.easeNone}, "targetReady+=2.2") .to(circle, .5, {scale: 1, opacity: .4, transformOrigin: "center center", ease: Power2.easeOut}, "targetReady+=2.4") .to(uxTest, 2, {opacity: 0, scale: 0, svgOrigin: "center center", ease: Linear.easeNone}, "targetReady+=3") .from(checkmark, 2.5, {opacity: 0, scale: 0, transformOrigin: "center center", ease: Back.easeOut.config(1.7)}, "targetReady+=4.5") return tl; }
-
I know this might sound like a dumb question but is there an alternative to calling TimelineLite or TimelineMax without the constructor method. Some of our clients have strict vendors that serve their advertisements and won't allow constructor methods. So this essentially means we can't use GSAP because to invoke it means using var tl = new TimelineLite( ); and for whatever reason these systems don't like it. Any suggestions perhaps using Object.create( ) ? It's not a huge deal if there isn't an alternative but I prefer to use GSAP it makes banner development a breeze and we aren't allowed to use jQuery either so GSAP is the perfect solution. Thank you
