Problem with TweenMax 2.0.1 when integrating in website

[dennisvg 1 Likes (Newbie)]

See the Pen PaLLgL by dennisvg (@dennisvg) on CodePen

 

See the Pen BVbbPb by dennisvg (@dennisvg) on CodePen

 

Hi GS,

 

In advance my apologies for only posting questions that are maybe a bit difficult to troubleshoot; but I shout out to your experience

I've created an interactive image (click on eyes, brain and other parts of the image :-));
-now when I implement it in my webbuilder (I use the Semplice module in Wordpress) it works perfect when I refer to TweenMax 1.18.2;
-but some animations fail when I refer to TweenMax 2.0.1;

 

The problem is: when I make a CodePen they both work perfectly fine!
-so most likely there's something with the webbuilder that's in conflict with the TweenMax 2.0.1 library; and is not with the older version;

So I guess – by the lack of my web knowledge – my question is either:

- Does anyone have I wild guess why the newer version is in conflict?

- is it smart –or a problem– to keep referring to the 1.18.2 library?

 

Hope to hear from you and thanks very much!

Dennis

 

 

 

See the Pen BVbbPb by dennisvg (@dennisvg) on CodePen

[Carl 9,066 Likes (Superhero)]

Thanks for the demos. Yeah, this is a bit tricky as your demos illustrate that your code works fine with both versions of TweenMax.

 

I'm not at all familiar with Semplice so I don't really know what it could be doing.

 

The next thing you could do is create a very basic version with just the animations that aren't working and post a link to where we can view it.

 

 

 

[dennisvg 1 Likes (Newbie)]

Hi Carl, thanks for the quick reply

I should have done that in the first place, but here it is:

 

http://grip.studioinherent.com/tweenmax-new

http://grip.studioinherent.com/tweenmax-old

 

The first link refers to the 2.0.1 library the second to 1.18.2

 

-Now when clicking the eyes of the blue image: the white dashed should rotate continuously; as you can notice in the first link (new library) they aren't, in the second link (the old library) they do;

 

-When clicking the eyes in the yellow image: each word should wiggle every time the purple dot hits it; as you can notice in the first link (new library) not all the words wiggle all the time, in the second link (the new library) they do;

 

I hope these links can tell you something!

otherwise I guess the question remains whether it would be a problem to keep referring to the 1.18.1 

 

thank you,
Dennis

[Carl 9,066 Likes (Superhero)]

thanks. the demos definitely help a bit more.

What's interesting is that GSAP is applying new values to the elements but there is no visible change when looking at the svg.

Here is a video: https://greensock.d.pr/ijUovJ

 

We'll let you know if we find anything else.

[dennisvg 1 Likes (Newbie)]

Yes we noticed too; strange. Hope you can find something. Thank a lot in advance ?

 

[dennisvg 1 Likes (Newbie)]

My guess by the way is that it's a timing issue, maybe due to my code, but I can not figure it out..

[GreenSock 8,117 Likes (Superhero)]

I think I see what's going on...

 

You've got mis-matched versions of various things loading, like in the "new" one you've got TweenLite 2.0.1 but CSSPlugin 1.19.0 (much older). It appears as though you've got a build system concatenating and minifying things which is fine, but it's somehow mismatching versions. 

 

The reason some of the animations are "failing" is that you've got BOTH css transforms AND attribute-based transforms applied, so the browser is choosing to prioritize one over the other. In other words:

 

<path transform="matrix(1,0,0,1,0,0)" style="transform: matrix(2,0,0,2,0,0)" />

 

It obviously can't be both of those at the same time, so the browser must choose one.

 

So in your file, GSAP is accurately applying the transforms via the "transform" attribute (see for yourself in Dev Tools), but since there are CSS transforms ALSO applied, the browser is basically ignoring the attribute and prioritizing the CSS, thus you don't actually see any of the animation taking place (even though the values are indeed changing under the hood). 

 

Originally (in very old versions), GSAP always applied transforms via the CSS style but then we noticed various anomalies, bugs and inconsistencies in how browsers interpreted those, so we changed to applying them via the "transform" attribute which is what the SVG spec suggests anyway. That delivered much more consistent behavior (and remember, one of the main things GSAP tries to do for you is solve various browser inconsistencies). Then we noticed that sometimes people had already applied CSS transforms in their raw code, so when GSAP applied things to the "transform" attribute, it created opportunities for the browser to get confused. In more recent versions, we applied workarounds to clear out those CSS values for SVGs. I bet that version 1.19.0 of CSSPlugin didn't have that fix in place yet. 

 

The moral of the story: don't mis-match versions, and make sure you've got the latest  The version of CSSPlugin that shipped with GSAP 2.0.1 is 1.20.5

 

Does that resolve things for you? 

[dennisvg 1 Likes (Newbie)]

@GreenSock

Thank you for the interesting insights.

Although your answer makes a lot of sense, I do have remaining questions:

 

For the animation I only refer to TweenMax;

1. as far as I understand, the CSSPlugin comes with the TweenMax, am I correct; so how can it be in conflict?

2. which would mean that the building environment I use (semplice theme for wordpress) refers to the CSSPlugin; can I overwrite that reference?

3. My apologies if this should have been clear from your answer; has the conflict between the transform attribute and the CSS transforms only to do with the mis matching versions; or with my lines of code as well?

Thank you,

Dennis

[GreenSock 8,117 Likes (Superhero)]

1) Yes, CSSPlugin comes inside of TweenMax. But perhaps you've got something odd going on in your bundler that's loading a different CSSPlugin first or something. Or maybe in a <script> tag. Very difficult to say without seeing it all in context. 

 

2) I'm not familiar with Semplice, sorry. I don't know how to answer that. I'd just recommend that you only use the latest version of GSAP (search your files and make sure there aren't other versions somewhere else, or maybe clear a cache if it exists)

 

3) Yes, in a way it does have to do with your SVG code actually, but recent versions of CSSPlugin should correct that anyway. For example, if you build your SVG with the transforms applied via CSS (or maybe your software is doing that) and then GSAP goes to animate it and GSAP applies transforms to the "transform" attribute...there's the conflict. Now you've got BOTH. But again, recent versions of CSSPlugin try to wipe out the CSS transforms for you to avoid conflicts like that. 

 

Does that clear things up? 

[GreenSock 8,117 Likes (Superhero)]

I looked again and that page does load 2 different versions of GSAP. One is in a <div> (2.0.1) and the other is right before the closing </body> tag (1.19.0), in this: 

<script type='text/javascript' src='http://grip.studioinherent.com/wp-content/themes/semplice4/assets/js/frontend.min.js?ver=4.0.9'></script>

 

Ideally, that theme wouldn't mash all the GSAP code into their minified file, but perhaps you don't have control over that. You could try to segregate that by setting window.GreenSockGlobals = {}; AFTER your 2.0.1 <script> tag so that when it gets to the 1.19.0 stuff, it dumps it in there rather than overwriting anything. But of course ideally you wouldn't be loading 2 different versions in the first place (a waste of kb). 

[dennisvg 1 Likes (Newbie)]

Let me first cheer this forum; I appreciate the quick replies and time and effort that is spent in providing answers a lot! ?

 

Interesting insight about the double load of GSAP; the 2.0.1 inside the div is the one I put there in the builder (as they advice to do); the second one then must be part of the theme indeed. But without me adding the script; the animation doesn't work.. so in that case that's something to ask the theme builders.

You helped me a lot and I'd like to ask two closing questions for this post:

 

1.

Is there also a double transformation (CSS and transform attribute) going on in the codepen I shared earlier?

 

2.

I guess this is more about understanding SVG in general (and in line with the first question):

 

-I use illustrator to create my svg and then I edit it to my likings in my code-editor afterwards (sublime text in this case);

-I only use GSAP to apply any kind of transformation (to the extend of my knowledge);

-In my understanding (and I'm not a schooled programmer) the svg code contains the coordination of the elements relative to it's viewBox;

Therefore I'd like to know: if I place a an element x: 50, y:50 within a viewBox of 100x100, and then export it as an SVG, does it mean that Adobe Illustrator then applies a CSS transformation to the element within that SVG code (since it's not x:0, y:0)?

Or for example: if I then apply a fromTo: x:10 to x: 70 to that element; does that always result in a double transformation; and that's what the newest version of GSAP is working around?

I hope you understand my questions, and that they do not come across too green

Thanks again
 

[GreenSock 8,117 Likes (Superhero)]

1) Nope, I don't see the double-transforms in the codepen demo. 

 

2) That's a tricky one. SVG coordinates can be affected in many ways. For example, a <rect> element can be placed by simply using "x" and "y" attributes OR it could use the "transform" attribute OR it could use CSS transforms. And for a <circle>, it could use "cx" and "cy" attributes. I'm not sure exactly what Adobe Illustrator does under the hood in every scenario. I thought that most of the time it uses the "transform" attribute but actually I think there are various options when you export so that it might use attributes or it might use CSS values based on whatever you select. 

 

But yeah, it shouldn't really matter as long as you're using the latest version of GSAP. 

 

Glad you're enjoying the forums!

[PointC 8,599 Likes (Superhero)]

Hi @dennisvg 

 

I wrote up a little info about AI exports for SVG that you may find useful.

Happy tweening.

 

 

[dennisvg 1 Likes (Newbie)]

thanks a lot