-
Posts
68 -
Joined
-
Last visited
Contact Methods
- Personal Website
Profile Information
-
Gender
Male
-
Location
London - Barcelona
Recent Profile Visitors
The recent visitors block is disabled and is not being shown to other users.
Thomas James Thorstensson's Achievements
-
Hello fellow Greensockers! Here is my little question. I'm calling an instance method of a Typescript class from my class Banner.ts .call(this.imageTiler.doFadeOut,[1], 3); In ImageTiler class I have doFadeOut(imgIndex) { this.tileCreatorArr[imgIndex-1].doFadeOut(); } Now of course, ''this" in ImageTiler will refer to the Tween I'm calling from in Banner.ts, so the tileCreatorArr is undefined. How do I best bind this up so that I can call doFadeOut and get this to refer to ImageTiler class ? Thanks in Advance 😎 "S"
-
Hi fellow Green Sockers, A small question. I have Animation.masterTL = gsap.timeline({ paused: true, repeat: AnimationSettings.loops, repeatDelay: AnimationSettings.loopDelay }); Animation.masterTL.stop(); This throws the error that stop is not a function of the timeline. Ok so the stop is called further down in the code after that the timeline starts. Is stop not part of GSAP 3+; I cannot see it in the documentation for 3+ This works fine: Animation.masterTL.paused(true) Thankful for help, well I guess I sorted it anyhow, so now this is just on "curious" flag level (orange with a tint of green). Thomas
-
Hello Greensockers of Iceland and other green areas of this planet I'm a bit confused about what the difference is between the two below. From GSAP 3 Release notes : ">" references the most recently-added animation's END time .to(..., "") //starts immediately after the previous tween's end time (sequenced) Is not the most recently added animation the same thing as the previous tweens end time so aren't the two above the same? Thanks Thomas
-
timeScale as creation parameter
Thomas James Thorstensson replied to Thomas James Thorstensson's topic in GSAP
Ahaaaa. Thanks for clarifying. Yes I can see the point now and it makes sense to me. Thanks for taking time! Thomas, over a cup of coffe! -
Hello, It seems to set timeScale I can not set it as creation parameter. Maybe I forgotten something here as I think I've done that before: this.tl = gsap.timeline({ repeat: defaultValues.customVariable3, repeatDelay: 2, // THIS DOESNT WORK timeScale: defaultValues.customVariable5 || 1 // * this will later be defaultValues.animationSpeed }); // THIS WORKS! this.tl.timeScale(defaultValues.customVariable5 || 1) Not a biggie as the second works but just checking if any fellow GSAP Mphil could advise me on why the first does not. Stay green, stay alive Thomas
-
onCompleteParams and this.
Thomas James Thorstensson replied to Thomas James Thorstensson's topic in GSAP
Sorry, It works! I was over stressed and of course just needed to access it as this.message see it say it sorted! Thomas -
onCompleteParams and this.
Thomas James Thorstensson replied to Thomas James Thorstensson's topic in GSAP
Okay, roger that, I will do that when I have the time but it will be EOP today I think. I have to push on into the mist as they say in the movies! Thanks Thomas, Greensocker -
onCompleteParams and this.
Thomas James Thorstensson replied to Thomas James Thorstensson's topic in GSAP
Ad.prototype.animateThreeFrames = function() { this.tl.set("#message5, #message4 ", { autoAlpha: 0 }); this.tl.to(".gwd-page-wrapper", { duration: .2, autoAlpha: 1 }, "+=0") this.tl.to("#cta", { duration: .2, autoAlpha: 1 }, "+=0") //1 .to("#baseImage", { duration: 1, autoAlpha: 1 }, "+=0") .from("#message1", {duration: 1,autoAlpha: 0,x: 100}) .to("#message1", {duration: 1,autoAlpha: 0}, "+=2") //2 .from("#message2", {duration: 1,autoAlpha: 0,x: 100}) .to("#message2", {duration: 1,autoAlpha: 0}, "+=2") //3 .from("#message3", {duration: 1,autoAlpha: 0,x: 100}) //if legal then show legal if (!defaultValues.legal == "") { this.tl.to("#message3", {duration: 1,autoAlpha: 0}, "+=2") this.animation = this.tl.from("#legal", {duration: 1,autoAlpha: 0, onComplete:this.legalLoopCount, callbackScope:this}) this.message = this.message3; }else { this.tl.set("#legal", { autoAlpha: 0 }); } }; Ad.prototype.legalLoopCount = function (el) { console.log("value of element is now" + this.animation.message) if (this.loopIncr == defaultValues.customVariable3) { gsap.to(this.animation.message, {duration: 1,autoAlpha: 0, delay:2}) gsap.to(this.animation.message, {duration: 1,autoAlpha: 1,delay:2}) } this.loopIncr +=1; } Hi, this is the best I can do at moment as I have to push on with work here in office sorry. I tried the above which is as close to the video example I could get but hmm value is undefined. Thanks -
onCompleteParams and this.
Thomas James Thorstensson replied to Thomas James Thorstensson's topic in GSAP
I spoke to early, sorry, I tried this line, but it didn't work. I will do a workaround now and pass a label! this.tl.from("#legal", {duration: 1,autoAlpha: 0, onComplete:this.legalLoopCount.bind(this), callbackScope:this, onCompleteParams:this.message3}) -
onCompleteParams and this.
Thomas James Thorstensson replied to Thomas James Thorstensson's topic in GSAP
Oh great Thanks Carl I thought this was removed in the new flavour of GSAP! I must have misread that part Yes I did here I see the fine comment: “scope” values at all (except callbackScope). So no onCompleteScope, onUpdateScope, onStartScope, etc. Okay, well this will fix it Thanks! Thomas -
Hello again Fellow Socks of Green! Wondering what the best approach is for this. I cannot bind the onCompleteParams but I cannot figure out how to do it with a string say onCompleteParams:"#message5" Silly, I shold be able to figure out how to rewrite the gsap bits in legalLoopCount to work with string as argument but can't. Hmm. this.tl.from("#legal", {duration: 1,autoAlpha: 0, onComplete:this.legalLoopCount.bind(this), onCompleteParams:this.message5}) /** * @param {*} elStr The element we are hiding when showing legal */ Ad.prototype.legalLoopCount = function (el) { console.log(el) if (this.loopIncr == defaultValues.customVariable3) { gsap.to(el, {duration: 1,autoAlpha: 0, delay:2}) gsap.to(el, {duration: 1,autoAlpha: 1,delay:2}) } this.loopIncr +=1; }
-
Hello here is the full code, and this works. As Long as I use an instance of gsap instead of timeline in legalLoopCount(), it works. If I instead use timeline, same timeline, in legalLoopCount, it no longer works. This works: "use strict"; /** * * Is initialized from the GWD default HTML document */ function Ad() { this.loopIncr= 0; this.tapArea = document.querySelector("#tapArea"); document.querySelector("#page1").style.opacity = 0; // GSAP ! // repeat: sets number of loops this.tl = gsap.timeline({repeat: defaultValues.customVariable3, repeatDelay:2}); this.tl2 = gsap.timeline(); // Init // this.setAnimationDefaults(); this.startAdLib(); this.callGWDPlayPause(); setTimeout(this.startAnimation.bind(this), 1000); } /** * !TODO It is not clear if this init is needed since we are using gsap.timline * */ Ad.prototype.setAnimationDefaults = function() { this.tl.set("#baseImage", { autoAlpha: 0 }); this.tl.set("#message1, #message2, #message3, #legal", { autoAlpha: 0 }); } /** * One method for each frame count */ Ad.prototype.animateThreeFrames = function() { //* See GWD html page where ad is opacity:0 from start this.tl.to(".gwd-page-wrapper", { duration: .2, autoAlpha: 1 }, "+=0") this.tl.to("#cta", { duration: .2, autoAlpha: 1 }, "+=0") //1 .to("#baseImage", { duration: 1, autoAlpha: 1 }, "+=0") .from("#message1", {duration: 1,autoAlpha: 0,x: 100}) .to("#message1", {duration: 1,autoAlpha: 0}, "+=2") //2 .from("#message2", {duration: 1,autoAlpha: 0,x: 100}) .to("#message2", {duration: 1,autoAlpha: 0}, "+=2") //3 .from("#message3", {duration: 1,autoAlpha: 0,x: 100}) //if legal then show legal if (!defaultValues.legal == "") { this.tl.to("#message3", {duration: 1,autoAlpha: 0}, "+=2") this.tl.from("#legal", {duration: 1,autoAlpha: 0, onComplete:this.legalLoopCount.bind(this)}) }else { this.tl.set("#legal", { autoAlpha: 0 }); } }; Ad.prototype.animateFourFrames = function() { }; Ad.prototype.animateFiveFrames = function() { }; Ad.prototype.legalLoopCount = function () { if (this.loopIncr == defaultValues.customVariable3) { gsap.to("#legal", {duration: 1,autoAlpha: 0, delay:2}) gsap.to("#message3", {duration: 1,autoAlpha: 1,delay:2}) } this.loopIncr +=1; } /** * !TODO Needs to change to defaultValues.numberOfFrames later * Maybe Ill end up making these methods into regular functions no hoisting can be annoying */ Ad.prototype.startAnimation = function() { switch (defaultValues.customVariable1) { case "3": console.log("CASE THREE"); this.animateThreeFrames(); break; case "4": console.log("CASE FOUR"); this.animateFourFrames(); break; case "5": console.log("CASE FIVE") this.animateFiveFrames(); break; default: console.log("something gone wrong") break; } }; /** * Default event handler */ Ad.prototype.handleEvent = function(e) { e.preventDefault(); switch (e.type) { case "click": break; case "webkitTransitionEnd": break; default: break; } }; /** * * Ad-Lib * Helper methods * * Reflection: we should be fine calling them from inside class */ Ad.prototype.startAdLib = function(e) { adlibStart(); }; Ad.prototype.endAdLib = function(e) { adlibEnd(); }; Ad.prototype.callAdlibScreenshot = function() { takeScreenshot(); console.log("screenshot!"); }; Ad.prototype.stopAdlibScreenshot = function() { this.endAdLib(); console.log("end screenshot!"); }; /** * * GWD * Helper methods */ Ad.prototype.callGWDPlayPause = function() { gwd.auto_PauseBtnClick = function(event) { TweenMax.pauseAll(true, true, true); console.log("Pause Timeline"); }; gwd.auto_PlayBtnClick = function(event) { TweenMax.resumeAll(true, true, true); console.log("Play Timeline"); }; }; /** * Start ad */ function initAd() { window.ad = new Ad(); } Thanks