Em Karimifar

@OSUblake Awesome! exactly what I was looking for! Thanks a lot

Thank you @OSUblake It's actually part of a bigger svg and yes the circles MUST be a text element. The tracking movement is a bit funky in my pen because I cut out some code to make it more concise. Is there any way to fix it with the same html?

Hi all, I have one transform tween being applied to an object on mousmove event: TweenMax.to("#colon", 0.1, {attr:{transform: "matrix(0,1,-1,0, "+(100+moveX) +","+ (50+moveY)+")"}})}) and one infinite timeline that tweens the scaleX (kinda like a blinking animation): var tl = new TimelineMax({repeat: -1}); tl.to("#colon", 0.1, {scaleX:0, transformOrigin: "50% 50%"}, "+=2") .to("#colon", 0.1, {scaleX:1, transformOrigin: "50% 50%"}) Now the problem is whenever the scaleX tween happens it resets the matrix transform of the object (causing a glitch I don't want!). Is there any way to solve it so that the infinite timeline factors all the movements happening from mouse move event? Thanks,

Hey All, I'm getting this error when I try to import MorphSVGPlugin in my react app saying: ./src/gsap-bonus/MorphSVGPlugin.js Line 1012: 'define' is not defined no-undef Line 1013: 'define' is not defined no-undef I'm using the plugin file from bonus-files-for-npm-users folder and here's my code where I import it: import { TimelineMax, CSSPlugin, AttrPlugin, Elastic, Power4, Power1 } from "gsap/all"; import MorphSVGPlugin from "../../gsap-bonus/MorphSVGPlugin"; Any thoughts? Thank you!

Thanks Craig, I will try to make a demo as soon as I can. It's just scale/opacity and no css animation is involved. Cheers

@PointC Sorry about that. It's actually a part of a long parallax page and it's hard for me to make a demo now. But what tweenMax does to the text is scale and opacity change from 0 to 1. This rendering glitch happened for a couple other instances and I thought maybe that's a common problem! It's the same for Mozila, Chrome and Safari lastet versions. Both ios and windows.

Hi all, I'm having some issues when I animate text using gsap and scrollmagic. The screenshot shows where I'm in the middle of a tween that has a duration. Any thoughts? Thanks;

I got it @PointC. Actually using timeline in general was the solution for me! Timeline is wonderfully powerful, thanks!

Hi, So I want to loop a group of tweens (at least two!) and I've seen how to repeat one tween here. But I want to do repeat a group of tweens infinitely. I guess I have to make a function and loop that? (not experienced in JS) Can someone help me with that. Thank you!

Ahh can't believe it! Thank you Carl!

Hi , I've used gsap on codepen for a while and I just joined the club to do a project for a client. I want to install the GSAP plugins locally but it's not working at all. I tried the exact same code on a TweenMax-enabled Codepen and it worked! So I'm quite sure there is something wrong with the way I'm linking my GSAP files. Here's all my script files right before closing body tag: <spript src="js/GSAP/TimelineMax.js"> </spript> <spript src="js/GSAP/TweenMax.js"> </spript> <spript src="js/GSAP/EaselPlugin.js"> </spript> <spript src="js/GSAP/DrawSVGPlugin.js"> </spript> <spript src="js/GSAP/MorphSVGPlugin.js"> </spript> <spript src="js/GSAP/CSSPlugin.js"> </spript> <spript src="js/GSAP/EasePack.js"> </spript> <spript src="js/GSAP/RoundPropsPlugin.js"> </spript> <spript src="js/GSAP/AttrPlugin.js"> </spript> <spript src="js/GSAP/DirectionalRotationPlugin.js"> </spript> <spript src="js/GSAP/BezierPlugin.js"> </spript> <spript src="js/GSAP/jquery.gsap.js"> </spript> <spript src="js/GSAP/TimelineLite.js"> </spript> <spript src="js/GSAP/TweenLite.js"> </spript> <script src="https://cdnjs.cloudflare.com/ajax/libs/ScrollMagic/2.0.5/ScrollMagic.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/ScrollMagic/2.0.5/plugins/debug.addIndicators.js"></script> <script src="js/main.js"> </script> </body> Thanks,