iShwaR

Thank you so much Zach!! Both the suggested solutions worked Btw, here's the timeline code snippet, I'd request you to suggest better way(s) to write the same... I'm not happy about using fromTo and if I don't, I've to uncomment the .set(...) statements, which again I think is unnecessary. I tried doing a normal .from(this.$refs.picture2, { opacity: 0 }, "-=0.5");) But this doesn't seem to animate the .picture2 element (I'm sure there's something that I'm not doing correct)... this.sliderOptionTL = gsap .timeline({ scrollTrigger: { trigger: this.sliderContent, start: "top 50%", // end: "top top", toggleActions: "play auto auto reverse", // scrub: 1, invalidateOnRefresh: true, markers: true, }, }) .set(slides, { clearProps: "all" }) .to(slides, { x: () => { return this.sliderContentWidth - this.sliderContentScrollWidth; }, ease: "power1.inOut", }) // .set(this.$refs.card1, { clearProps: "all" }) // .set(this.$refs.picture1, { clearProps: "all" }) .to(this.$refs.card1, { opacity: 0.4 }, "-=0.5") .to(this.$refs.picture1, { opacity: 0 }, "-=0.5") // .set(this.$refs.card2, { clearProps: "all" }) .fromTo(this.$refs.card2, { opacity: 0.4 }, { opacity: 1 }, "-=0.5") // .set(this.$refs.picture2, { clearProps: "all" }) .fromTo(this.$refs.picture2, { opacity: 0 }, { opacity: 1 }, "-=0.5");

Hello Zach, Thanks for the reply and let me try the solutions. Also, I've been a religious user of greensock (probably even since before 2009). Although, all of it was in Flash. Since past few years I've moved into web development and I knew, I'd to play with GSAP... and here I'm... ? P.S. Great job with GSAP!! You guys need a special place in the matrix!! ?

Hi, I'm fairly new to GS and I'm already loving it. Thanks GS! So, in the demo... Cards change to a dark green color if they are in focus (basically, 80% width) and scroll when triggered. Issue 1: If we resize the window (eg: 50% width), we will notice that the animation works but the scroll positions are all messed up, including the background-color. Any idea on what I might be doing wrong? Is this implementation correct? Issue 2: If I change my (vue) route and come back to this view, I notice the trigger points have moved way down in the doc flow and thus my triggers don't work and the animations also doesn't work. Although, if I resize the window/ refresh the browser - Everything works correctly. (I'm finding a bit difficult to demo this issue here) Kindly help me, I've been searching for a solution for quite some time... Thanks.

Hi, Can someone help me with the code? The tween is executed properly, although the onComplete function is not triggered when the tween is complete. If you remove the parameters yoyo and repeat from the Tween statement, the onComplete is called properly. import com.greensock.*; import com.greensock.easing.*; function checkServer() { trace("chk"); } function animateTitle() { TweenMax.from(title_mc, 2, {_alpha:0}); TweenMax.to(title_mc, 2, {yoyo:true, repeat:1, onComplete:checkServer, glowFilter:{color:0xFF0000, alpha:1, blurX:10, blurY:10, strength:2}}); } animateTitle(); Thanks.