Thomas James Thorstensson

--- Thanks Jack that fixed that! +1 Barcelona beer owed ! Thomas

Thanks! As that did not change anything I will provide a demo tomorrow morning! But thanks for taking your time with the arrow call!

Hello fellow Green sockers! Sorry for not providing a CodePen, up against it today.😅 I'm trying to get this to randomize; .fromTo(".exclam", { y: 5 }, { duration: .2, y: gsap.utils.random(-5, 20), yoyo: true, repeat: 20}, "<") But it is not working! It seems to stop at same value each time. I been away from the green a while and must be missing something obvious. I've set repeatRefresh to true like so const tL = gsap.timeline({ repeatRefresh: true, defaults: { ease: "Circ.out", duration: 1 } }); Any help and I owe you a beer here in Barcelona, 🍺 Thanks, Thomas

Replying to myself here as I found the solution I think. The below works 😎 .call(() => { this.imageTiler.doFadeOut(1) //Call the fit function again as action box size is variable and brand area may have been re-sized/hidden },[1], 3)

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 Thanks. The last two blocks of code made me realise what the difference is! I felt like I was driving down a murky rainy road in Montana in a jaguar, then looked up through the autumn trees and saw the sun, and the road cleared ahead. Thanks again! 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

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

Hi Thanks Sorry really under it in the office all week meetgings etc. I got it working fine now, but will post when I have time. Again thanks Jack for always helping out it is much appreciated Thomas

Sorry, It works! I was over stressed and of course just needed to access it as this.message see it say it sorted! Thomas

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

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

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})