[Simultaneous transform tweens on an object]

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

[Simultaneous transform tweens on an object]

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? 

 

[Simultaneous transform tweens on an object]

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,

See the Pen bmomqb by EmAustin (@EmAustin) on CodePen

[How to use bonus-files-for-npm-users plugins]

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!

[Text tag glitches]

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

[Text tag glitches]

@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.

[Text tag glitches]

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;

[How to loop a group of Tweens]

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

 

 

 

[How to loop a group of Tweens]

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!

See the Pen webMVG by EmAustin (@EmAustin) on CodePen

[GSAP on Codepen vs Local]

Ahh can't believe it! Thank you Carl!

[GSAP on Codepen vs Local]

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,

See the Pen dREbZP by EmAustin (@EmAustin) on CodePen