Leaderboard

Well I see two problems, 1. You are using this.previewCase() with parenthesis so it executes function and returns undefined to add method because your function doesn't return anything. 2. Your function takes id as parameter. If I understand correctly, it takes id of single element and animates it. So in this case you are passing nothing to it. So you want to animate all elements you will need another function that does it. Makes sense? I have never used react plus that's a lot of code to go through. @Rodrigo Might be able to help you but he previously has spent a lot of time helping you. I would suggest you to start small before starting to build something too complex. If you are just getting started with GSAP and/or React, I will also suggest to just create your effect in plain JavaScript before implementing it with React.

Sounds like you've worked out some good options, but I wanted to chime in with a few additional thoughts/clarifications... This is all expected (and appropriate) behavior. Changing the duration doesn't alter each tween's startTime too (which was what you were expecting). If you arrange 10 tweens in a timeline that all start 0.2 seconds apart and they're also 0.2 seconds in duration, of course they'll play back-to-back. But if you only update the duration of each, all you're doing is stretching each one out longer, so now they overlap (the start time of each on the timeline didn't change). |--| |--| |--| //compared to... |----| |----| |----| A relatively simple solution would be to update the startTime() when you update the duration() as well, like: tweens.forEach(function(tween, i) { tween.duration(0.4).startTime(i * 0.4); }); Here's a fork: Also, that codepen was using a very old version of GSAP - I'd definitely recommend updating to 1.20.4. Let us know if you need anything else at all.

Yep - the animation is usually easy. (especially with GSAP). Most of the work is in asset prep and organization. I did a post over at CodePen about using the pencil to recreate a font for a handwriting effect. It's pretty much the same technique to create a mask except you don't have to be as precise. A mask has to be close and just enough stroke-width to cover the artwork. You may find some of the info useful. https://codepen.io/PointC/post/animated-handwriting-effect-part-1 https://codepen.io/PointC/post/animated-handwriting-effect-part-2 And the pen that goes with it. Happy tweening.

Both of you start writing your books, otherwise someday I will do it using your posts. Without royalty, just credits at the end. And your contact information so my readers can contact you for queries. In case you guys haven't seen it,

Hi @elpeyotl and welcome to GreenSock! Off the bat, I think you're better off using individual tweens/timelines for this purpose, because the elements need a bit of asynchronous timing and because of the need for individual repeats. That said, here is a fork of your pen showing how to construct a timeline, for future needs. Notice the offsets I'm using to begin a few tweens on the timeline at 0 and clouds 3 & 4 at 5 seconds. I'm also including this pen to show how you can use a mix of tweens and timelines to help hold the sync of certain tweens while leaving the timlinelines themselves to be out of sync with each other. To give a random feel to the animation.

What type of game are you making? I can't comment too much on the React part, but that article looks like a good approach. Oh yeah! That's where a FLIP animation really shines. Click away at this demo. An important thing to remember is that there shouldn't be any inline styling that deals with position or size on your elements. Before calling getBoundingClientRect in that demo, I set the transform on each element to "none", otherwise the bounds might be incorrect. Later on, I add any transforms that were on the element into the invert calculations. A nice thing about GSAP is that the transform values are cached on the element. For example, to get the x and y translation value, you can do this. var x = element._gsTransform.x; var y = element._gsTransform.y;

If it's in your node_modules folder, you should be able to do this. import "gsap/MorphSVGPlugin";

i'm surprised during that Microsoft presentation that Chrome didn't install as well, since Chrome has taken the mantle as the new IE.

Here's the fork with the flexbox.

Hehe. Welcome to crazy world of DOM coordinates. Look at the different values reported by getBoundingClientRect and offsetLeft/Top/Width/Height. getBoundingClientRect takes transforms into account, which is what's throwing off your positioning. card { transform: translate(-50%,-50%); } And there's no easy way to read that transform value from a CSS file because the browser will convert it into a matrix. An easy way to center the card would be with flexbox. Actually, CSS Grid Layout has really good support now. https://caniuse.com/#search=grid That might be a better an option than using semantic-ui for a grid. https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Grid_Layout/Basic_Concepts_of_Grid_Layout

Here's a simplified example of FLIP without React. It's really like an optical illusion. When the DOM changes, the elements will actually be in their end position/state, but the inverted animation makes it appear like it's transitioning to its new position/state.

Well, technically to answer your question you could use TweenMax.getAllTweens() and loop through them like this: function anyTweenIsActive() { var all = TweenMax.getAllTweens(false), i = all.length; while (--i > -1) { if (all[i].isActive()) { return true; } } return false; } However, this smells to me like more of an architectural issue in the way you're building out your logic. Not that it's "wrong" to do it that way, but you might want to consider using a master timeline that allows you to group your animations, kinda like: var master = new TimelineLite({autoRemoveChildren:true}); $("button").click(function() { if (master.progress() === 1) { //previous animations are done. master.add(someOtherAnimation).play(0); } else { //previous animations are NOT done. Let's add an animation that'll run when the others are finished. master.add(someOtherAnimation); } }); That way, you've got one simple container to check anytime. And you can schedule things however you please. Like if you want to drop an animation in there and start playing it immediately (at the current time rather than stacking it at the end), you'd do: master.add(yourAnimation, master.time()); Also, I feel obligated to mention how much I hate UIs that are unresponsive to my clicks and force me to wait until some other animation is finished before I'm "allowed" to interact with things. Just my opinion, though

STATUS: SOLVED Thanks, I tried that before but I got the next error: Module not found: Can't resolve 'TweenLite' in '/home/user/Websites/test/node_modules/gsap' So I didn't think that way was the right one. Because you suggested it, I took a closer look, and I found the problem was not in bundling but in react hot loader. yarn build works, and restarting the full project gives the hot loader the chance to work properly. Have a nice day.

Hi @Tasty Sites It looks like you copied your original path and used it as a mask. That can work in some situations, but in this case you can see the path is not going in the right direction to make it work. The trick to these masks is creating your original artwork and then creating a separate mask. You line up your artwork and grab the pencil, pen or curvature tool and draw a new path along the middle of the artwork. Then add a stroke thick enough to cover everything. The sharp point in the middle could be problematic, so I think two masks would be better in this case. Here's a fork of your pen: It can be done with one mask, but there is a bit of hiccup on that bottom point. If it's fast enough, you may not notice. If it were my project, I'd go with two masks, but that's just my two cents worth. Hopefully this helps. Happy tweening.

Great stuff, Oliver16years. Silky smooth. Nice job on the wheels spinning and maintaining the 3D perspective. very cool

Thanks again Craig, I've seen that pen somewhere here - splendid work. I haven't seen the posts though, exactly THE missing guide for me! Reading atm Happy tweening for you2

One approach is store a reference to the "currentAnimation". Whenever a button is pressed, reverse the currenAnimation and apply an onReverseComplete that will call a function that will then play the next animation. As Jack mentioned, it really stinks to be forced to wait for an AI to allow you to do something. It also stinks watching transitions that are too long. To alleviate that pain, I increase the timeScale of the currentAnimation that is being reversed: Here is a twist on the same theme, but slowed down and with 3 buttons In the demo above click "green" wait one second hit "orange" while green is still reversing quickly hit "grey" You will see that after green reverses then grey will play. it totally skips orange which is good. the "next" animation to play after reverse is the most recently requested animation. With this technique you will never have 6 different animations running out of control at the same time.

Here are some sets i created for Flight Centre. https://bradleylancaster.com/portfolio/flight-centre-html5-banner-framework-gsap/

Hm, tough to say for sure without seeing your project but it sounds like the element you're splitting is literally returning null for its "childNodes" property. My understanding is that an element's childNodes should always return a NodeList. Seems like that's not happening in your case for some reason. Are you positive that you're passing in a valid DOM element to SplitText as the target?

Maybe I'm just answering the wrong part of the question ... even though the stats output will not reflect the change in values, the timeline's tween timing will certainly adjust to the "perceived" time. EDIT: I modified updateStats() to take into account timeScale()

How's this? Dear Microsoft, This has been my experience working with your Edge browser. Please fix it. Thank you.

Hi @tomsah, Unfortunately I got caught up in a project now and haven't been able to follow up on your slide menu project. I'll try to whip something tomorrow to try to help you. For the moment what you should do is add to your menu component a property in the state in order to know if any panel is expanded or not and if the menu is being collapsed, ie, the user wants to hide the menu. The idea is this: when the menu button is clicked check that state and if a panel is open reverse the panels animation, then using a onReverseComplete instance check if the idea is to hide the menu or just collapse the panels. If the idea is to hide the menu then reverse the menu animation, if not do nothing. Happy Tweening!!!

Thanks @GreenSock!!!

I don't know the current state of the software but ( first and last time I used it just after Flash was killed ) I feel that is a dead end. At least that time it was a completely frustrating joke. Contradict me please!

http://www.bannerhost.hu/test/Nissan_Micra_Q42018_HU_750x300_DOUBLECLICK_05/index.html Client: ACG Hungary

I just need some dopamine please! http://www.bannerhost.hu/test/Surf_2018Q1_Mosokapszula_640x360_SIZMEK_03/index.html Client: ACG Hungary

That was the part I was missing/did wrong...thanks again Craig! Can't wait to use that trick everywhere BTW, about the curve (did it intentionally ^^), that was my main concern - I was able to replicate something "close enough" but that ugly hiccup was just not an option for production. Thanks <3 !

Hey everyone, I just spent some time fighting with MS Edge so I though I'd post a quick tip about it. I needed to pull some SVG text from a center point and stretch the spacing to the edge of a rectangle. Easy enough I thought. I'll use text-anchor="middle" and tween the textLength to the width of the rectangle. That worked perfectly in Chrome, but Edge wasn't in the mood to play nice. I won't bore you with all the details, but basically Edge will correctly use the middle text anchor for initial setup. However, when you try to animate textLength along with that attribute, it reverts back to text-anchor="start' so the letters won't space apart correctly. They'll all space out from the left. Not good. Edge also has a problem reporting back the textLength for an animation start point. I opted to use the BBox of the text to get a starting point for GSAP to animate the textLength. To overcome the anchor problem, I centered the text BBox and then animated it to x:0 while the textLength animates which will give the illusion of spacing from the center. While on the subject of textLength, I came across another little oddity last week. I often animate SVG text along a textPath by tweening the startOffset attribute, but I thought I'd try adding some textLength with it to space out the letters a bit and found some strangeness. When you set your initial textLength attribute, Firefox only works with that on the actual text element, but Chrome only works with that attribute being set on the textPath element. A bit odd. Here's a quick demo showing the behavior. I used two tweens on the timeline so you can easily comment out either if you want to see the weirdness. The animation along the path works no matter what, but the textLength attribute placement is a bit fussy between Chrome and FF. Of course, Edge doesn't work at all no matter where you put the attribute. Big surprise. It will animate along a path just fine, but when you use a textPath element it doesn't seem to care about textLength. Hopefully this helps anyone trying to do some interesting SVG text animations. If anyone needs me I'll be over at the MS campus protesting their fussy browsers. Happy tweening everybody.

This was the case and I found the fix, sorry for the alarm

You could also not create a timeline, just have each individual tween start the next one on complete.

Had a similar if not the same problem with autoRotate of an svg object along a bezier path..... always a little off. Setting the above helped fix it... it was almost like the svg path wasn't rotating around it's center point.

@allanbreyes Yeah, clear() is pretty destructive. You may want to take a look at timeScale() ... based on (in your example) retrieving and responding to the duration of an audio file ... you do some simple math to adjust the timeline's timeScale. https://greensock.com/docs/TweenMax/timeScale()

Now I know for a fact someone else will know a SIGNIFICANTLY better way to do this (because there is always GSAP magic dust) ... but the first thing I can think of is clearing the timeline of tweens, adjusting each tween's duration, and then adding that tween back into the timeline. document.getElementById('point-four').addEventListener('click', function() { tl.clear(); // empty the timline tweens.forEach( function(tween) { tween.duration(0.4); tl.add( tween ); // add tween back to timeline }); updateStats(); });

@OSUblake has a great point regarding DOM reconciliation. Keep in mind that in react DOM manipulation is normally considered a no-no, anti-pattern, no-op and all those fancy terms that exists to politely tell you: "DON'T DO THAT!!!" I'd try to avoid changing the elements from one parent to another, but it this is a must-do situation using an onComplete callback (you see how shamelessly I'm re-using Blake's ideas?? ) to update the state, perhaps the index position of each child to match the order in which each parent is added to the DOM, to place them in the corresponding parent, would be a good way to do it. Perhaps using redux or mobx to store everything and access throughout the app. Happy Tweening!!

I hate filing bugs. I usually just cross my fingers and hope @Jonathan did it already.

Hehe. I actually post these tips because at my age I'll almost certainly forget about them and then 12 months from now I'll encounter the same problem. A quick Google search for a solution will lead me right back to my own thread. It's pure genius. Yeah, I also tried each of those methods you listed to get the textLength value from Edge and found the same problem. Filing a bug report is on my list of things to get done.

An example of FLIP in React. It uses CSS transitions, but it shows that it is possible. http://joshwcomeau.github.io/react-flip-move/examples/#/square

Those are really good questions. For a DOM/React based game, the reconcillation of the div-piece might be a good option. You could do a FLIP animation. https://aerotwist.com/blog/flip-your-animations/ Check out this demo using Vue. It's not a real game, but it uses the FLIP technique. https://jsfiddle.net/chrisvfritz/sLrhk1bc/ So lets say the cells are 100 x 100, and you want to move a piece from cell 0,0 to cell 1,1. You might want to animate it directly like... TweenLite.to(element, 1, { x: 100, y: 100, onComplete: function() { // reconcilliate??? } }) With the FLIP technique, you would change the DOM first, the reconcillation part, and then animate it from where it was to its new position. TweenLite.fromTo(element, 1, { x: -100, y: -100 }, { x: 0, y: 0 });

Asking a question like that on StackOverflow probably won't get you very far as it might be considered too broad or opinionated. I don't mess with React that much, so I can't help you out with that part, but searching this forum for React related questions is probably the best place to start. Look for posts by @Rodrigo as he the resident React expert around here. https://greensock.com/forums/profile/9252-rodrigo/ Just wondering if you did the tic-tac-toe tutorial? https://reactjs.org/tutorial/tutorial.html I would probably start with that, and add animations to it to get an idea of how to structure stuff.

Hello @thomasfoskolos and welcome to the GreenSock forum! Here is an example of animating a CSS pseudo-element using the GSAP CSSRulePlugin. Keep in mind that when using GSAP for this you have to use the old CSS syntax using only one colon (:) instead of the new double colon syntax (::). To target multiple <h1> tags individually you either have to add a unique id or class to each <h1> tag. Or target them by their index or in CSS :eq() or :nth-child. The below example shows animating two <h1> tags, each rotating but at different times. More info on the CSSRulePlugin Docs: https://greensock.com/docs/Plugins/CSSRulePlugin Happy Tweening!

I think that is an Edge bug. I'm getting incorrect values here. console.log(text.textLength.baseVal.value) console.log(text.textLength.baseVal.valueInSpecifiedUnits) console.log(text.getAttribute("textLength")) Might want to report it.

You probably have enough quick tips to write your own book.

Very interesting, Craig! Clever. Thanks for sharing the insights. Dropping some "GreenShock" bombs yourself, huh?

Hi, The gsTransform object is used primarily to store properties related to CSS transform values so that you as a developer do not need to read values from a 2D or 3D matrix. Originally it was intended to be a private property for internal use. Please see the list at the bottom of the page: https://www.w3schools.com/css/css3_2dtransforms.asp width and height are not related to transforms and I don't think xOrigin and yOrigin are css properties. These are the values stored using a more recent version of TweenMax Object { force3D: "auto", perspective: 0, rotation: 10, rotationX: 0, rotationY: 0, scaleX: 1, scaleY: 1, scaleZ: 1, skewType: "compensated", skewX: 0, skewY: 0, svg: false, x: 100, xOffset: 0, xPercent: 0, y: 100, yOffset: 0, yPercent: 0, z: 0, zOrigin: 0 } open this demo in a new window and open js console If you inspect the box you will see that the transform-origin is part of the inline style.

Yeah, I'd definitely recommend avoiding pseudo elements if you can because they can get complicated to target (browsers don't grant access to them the same way they do "normal" elements). If you need any more help, just let us know. Happy tweening!

Something is wrong with your previewCase function, it throws errors as follow, uncaught exception: Cannot add undefined into the timeline; it is not a tween, timeline, function, or string. react-dom.development.js:619:7 uncaught exception: Cannot add undefined into the timeline; it is not a tween, timeline, function, or string.

I don't know how you have set up things, that's a lot of code to go through. Maybe you are setting some flag that determines if panels are open or closed. (Never used react either) Following is simple demo, how I would do it. Keep track if panels are hidden or not and animate them to the hidden or visible state. Right now in your example, I am guessing that when you click on any panel you are changing the state so when you click your menu button it just resets their position instead of hiding them. Hope this gives you idea.

Yeah definitely - if it's inline, it will be erased. The original demo didn't have anything inline so I was assuming stylesheet, but I probably shouldn't assume anything. You got all the extra details covered nicely in your extra demo. Good work.

Date 11 Dec isn't in this article. This news was from other source. And here are 2 screenshots about topics above: