Cancelling transform 3D

[AnimaChambers]

Hey,

 

I'm using the following SplitText explode effect in the Greensock codepen example:

 

 

I need this line to get it to work:

TweenLite.set(titles2, {transformPerspective:600, perspective:300, transformStyle:"preserve-3d", autoAlpha:1});

However, this then persists after the Tween is over, and it is causing a few issues with subsequent tweens on that div which do not use that effect. The problem is not the code, the code itself works fine. It's the persistence - I need it cleared from the div. I know this is the issue as I do not have the problem if I remove the explode effect.

 

I am somewhat new to GSAP so I am not entirely sure how to approach this. What would I enter to cancel out the above transforms to go back to a state where they were never set? I tried killAll() but it didn't revert it. 

 

Here is a reduced live sample of the code problem:

 

See the Pen XKqmXQ by AnimaChambers (@AnimaChambers) on CodePen

 

When you activate this line:

//TweenLite.set(quote, {transformPerspective:600, perspective:300, transformStyle:"preserve-3d", autoAlpha:1});

the splittext goes wonky. That is the line that is persisting in my divs.

 

 

 

I need to reuse divs because this is for a HTML game. For example, this subtitling where I use TextPlugin to constantly rewrite the text in the div and apply new SplitText effects. The problem is the "moonbase gamma" tween is meant to look flat as in this GIF, but if the explode transform persists it goes all wonky with a 3D transform effect that I don't want.

 

Of course, I just realised I could just make a new independent div purely for the original tween with the explode, but I'd like to learn how to cancel this code anyway as I might need the knowledge later in making the game.

 

I used the greensock codepen from where I got the effect because I'm not entirely sure how to replicate my issue in a straight webpage as it exists in the game, but hopefully I explained it adequately.

 

 

See the Pen FqrEv by GreenSock (@GreenSock) on CodePen

[Rodrigo]

Hi and welcome to the GreenSock forums.

 

It would be great if you could provide a reduced live sample in codepen.

 

Also if you need to use the nodes holding the text after the animations there are two things you could do. One is to reverse the split text, like that the element goes back to it's original state. Two use clearProps to remove all the inline styles applied by GSAP to the elements.

 

Revert SplitText:

 

http://greensock.com/docs/#/HTML5/Text/SplitText/revert/

var split = new SplitText("#yourID");
// revert
split.revert();

Clear Props (almost at the end of the page):

 

http://greensock.com/docs/#/HTML5/Plugins/CSSPlugin/

 

Hope that helps.

[AnimaChambers]

Hey, yeah it was originally difficult for me to come up with a code sample, but this approximates the problem:

 

See the Pen XKqmXQ by AnimaChambers (@AnimaChambers) on CodePen

 

As you can see, when you activate this line:

//TweenLite.set(quote, {transformPerspective:600, perspective:300, transformStyle:"preserve-3d", autoAlpha:1});

by removing the "//" and rerun it, it creates a wonky effect instead of the straight non-transformed. This is the problematic line that is persisting in the div. That transform is needed for the explode splittext, but unwanted for the wavy splittext. 

 

Basically what I'm trying to do is write something to cancel that line out once the first split text animation has finished. I'll try your suggestions.

 

I've added this new codepen to the original post for other commentators. 

[Rodrigo]

First I'm not seeing any "wonkiness" at all, it looks ok to me. Perhaps you could elaborate a bit more on that.

 

The only thing I see could create a conflict is that you're setting the opacity to 1 and then on the staggerFrom you're animating from opacity 0 to opacity 1, but opacity is 1 when the element is first rendered.

 

In the set instance you're also adding a 3D perspective to the elements, perhaps that demands more from the GPU and that creates some sort of jerk in the animation. Perhaps you could try with animating words or lines to make it more fluid. Keep in mind that when you animate chars, there's a lot of DOM nodes being animated which can be a bit demanding.

mySplitText = new SplitText("#quote", {type:"lines,words,chars"}), 
words = mySplitText.words,
lines = mySplitText.lines;

tl.staggerFrom(words, time, {vars});

tl.staggerFrom(lines, time, {vars});

Second, which browser and OS you're seeing this. On Win7, Chrome, Firefox, IE11 and Opera, it looks ok.

 

Finally, please make it clear for me: you want to add more text after the animation is completed?, or you need to change the text of the element after the animation is completed?.

[AnimaChambers]

Thanks for the reply. Wonkyness is used in an artistic sense. This is run using nw.js, so latest Chromium. There's no animation jerkyness or other technical problem.

 

It is almost impossible to see using codepen, so here are some more GIFS.

 

1. Without transform. "The Armoury"  words in the middle of the page look good.

 

 

 

2. Splittext with transform. "The Armoury" has a 3D inward swing to it that looks wonky in the context of every other animation on the page. This occurs because the titlescreen uses the explode transform affect and the perspective transform hasn't been removed from the element by the time you get into the gameplay areas, so it is contaminating the future animations.  

 

 

 

 

The way the game works, whenever you move to a new location, TextPlugin rewrites the text in the "#titles" div and I run a new splitText script to animate this new text. The problem I am encountering is that the Tweenlite.set (transform) properties are persisting in the div when they're not being used and I am looking to reset them all to default values immediately after every splittext instance has completed so what the player sees is GIF 1, not GIF 2. 

 

I basically just don't want any transform or perspective values persisting when they're not being used so they don't contaminate future splittext animations in that div.

 

I haven't had the chance to try your clearProps suggestion yet so I will see if that solves it.

[Rodrigo]

In that case use a clearProps in a set() instance, that should solve it. You can use it with specific properties or with all the inline styles applied by GSAP.

 

Please let us know how it goes.

[AnimaChambers]

Thanks it worked. I didn't even know that clearProps existed.

 

BTW I also got the ideas for the background art animation from this forum too a year ago, so I should say thanks for that, though I can't remember who originally posted the ideas (might have been you, your name is familiar). I was looking for ways to animate background art in interesting ways and found this forum.