Dipscom

Indeed it does. One less thorn in the path to completion. For reference, this works: animateOut(callback) { TweenMax.to(this.el, 1, { // eslint-disable-line autoAlpha:0, x:"+=100", ease: "Power2.easeIn", onComplete:callback }); }

Gotcha 2 (Read Gotcha 1 for context): May the gods be mercy upon you if you decide to use ease... animateOut(callback) { TweenMax.to(this.el, 1, { // eslint-disable-line autoAlpha:0, x:"+=100", ease: Power2.easeIn, // eslint-disable-line onComplete:callback }); } If anyone knows a better way of getting around this without creating a million references to the window Object and/or disabling/editing the linter, let me know. Otherwise, this will be painful.

If you are someone like me and has ZERO experience with React, Facebook's Create React App, webpack and the sort, you might want to have a read about my adventures working in a live project here. As stated I'm working in a project that uses the Create React App - The idea is quite cool. They hide away the vast majority of the config and common files that end up being clutter when working on a simple project. The upside is that things are super simple and look really neat. The downside is that for someone who has no idea what one's doing, it's very confusing. I will try and put a little summary of what's happening so that my pain can be shared. Day 1: Read this post from cjke.7777 and digest it completely, it's full of very important and useful information. Don't include GSAP in your bundled files, there's really no reason for that. GSAP is hosted in a CDN, make use of it and all of its benefits. Pro Tip from OSUblake, you don't need to do anything else after including the CDN. No 'require', no 'include', nada. Gotcha 1 - The linter included in the Create React App will throw a hissy fit and fail to compile because TweenMax is a global variable. In their docs they suggest two options: 1) Creating a new variable directly from the window Object (please don't). 2) Adding a comment line for the linter to ignore (the lesser of the two evils, in my view). Your tween will end up something like: TweenMax.from(this.el, 1, { // eslint-disable-line autoAlpha:0, }); Don't worry about the 'this.el' bit, I'll explain it later. After all, I still need to finish this project in time. Bonus reading (Also from OSUblake): https://medium.com/@cheapsteak/hi-tadeouy-thank-you-for-the-kind-words-44dfc75190b8 https://medium.com/@cheapsteak/reusing-reacttransitiongroup-animations-with-higher-order-components-1e7043451f91 Just don't worry about using findDOMNode as cjke.7777 points out in his post.

Hey mk1, I can see this is relevant to that site you're working on. Right out of the bat, I won't go wading into all of that code... Soz again. ClearProps() really should remove all GSAP introduced inline styles. It will depend on when and where you are calling it and what is being done afterwards. Are you re-creating the tween or just playing it again? If it's a window resize, you will probably have to flush the relevant tweens and recalculate them.

Cool, happy to hear you worked it out.

It worked in the end, although I imagine you're still working on this as it kind of breaks if I change the window size. Lots of things misalign. Anyway, trying to read a whole website's worth of code is a no go. Too much to wade thru there mate, sorry. However, I can give a punt as to why the first attempt did not work and the second did (at least I think it is why, only an example pen would set this matter to rest but it's a tad late here and I won't set one up at the moment... Soz...) Here, you have two instances of .play() in the same timeline but notice you are not passing any arguments to the method. .to(imessagewrapper, 0.4, {autoAlpha: 1, ease: Back.easeOut.config(1.7), onComplete: function () { imessage_tl.play(); console.log("Trying to play"); }, onReverseComplete: function () { imessage_tl.play(); console.log("Trying to play on reverse"); }}, "S22") By default, the .play() method just continues playing from where the virtual playhead is until it reaches the end of that timeline. Once at the end, it doesn't really do anything. I think it is safe to say that by the time you get to the onReverseComplete() call the imessage_tl has finished playing and thus, nothing else would happen. In your second attempt, you have a different setup that includes the following: imessage_tl.pause(0); That makes the virtual playhead jump back to the start of the timeline and so, when you later have the onReverseComplete() call, the imessage_tl plays from its beginning. In order for the first setup to work, you would simply add a zero as a parameter into your .play() methods, like so: .to(imessagewrapper, 0.4, {autoAlpha: 1, ease: Back.easeOut.config(1.7), onComplete: function () { imessage_tl.play(0); console.log("Trying to play"); }, onReverseComplete: function () { imessage_tl.play(0); console.log("Trying to play on reverse"); }}, "S22") That way, every time that tween either completes playing or reversing, the imessage_tl is going to start right from the start, no matter where its virtual playhead is.

I'm having difficulties loading your page. The 'assets/js' folder is not showing up.

Hey mk1, I'd love to give it a shot but I'd be hard pressed without seeing it in context. If you set up a demo, I'll certainly give my best.

Hey cleveradvertising, Could you share a reduced case demo of your code? You linked to a CodePen at the start but that's Blake's pen, I am supposing your pen is already significantly different from Blake's. It would help to see what you are doing differently. Also, it might be that what Blake has on is his pen is not suitable to what you are looking for. Thanks.

IMMA THOUSAND!

Give it a moment until Blake wakes up, he's the Angular resident expert, he'll probably have a comment on this.

When you said you need to animate them, do you mean to do anything more than what you would do with a DOM element? If you're not, there's no reason not to link them in just like images. Even if you are going to do more than, translate, rotate, scale to some of them. You can have the these inlined and others as images.

Interesting behaviour... I haven't got much time to muck about with this but I would suggest a quick and dirty way around it being creating an empty div as a parent of the video area, using that as the draggable trigger, make sure the video is taller than the div itself so that the controls are outside the div. If it doesn't work as parent/child combo, it should as siblings.

Hello emilychews, As Graig said: Welcome to the forums. Thank you for the CodePen, helps a lot to see your issues. I had a stab at your problem and saw that the solution is actually related to the fact you're using .fromTo() methods on all your tweens. They are useful but you have to know how they behave. Have a look at this video by Carl, it will explain you some important details: As for a solution, the bellow code is an amended version of yours. It took the liberty to change you y into yPercent and opacity into autoAlpha for more flexibility and control. In the docs, you will find detailed explanation (and loads more info) about those. .fromTo('.sliderbar', 3, {scaleX: 0}, {scaleX: 1}) //red slider bar underneath text .to('.slidetext1', .7, {yPercent: -50, autoAlpha:0}) .from('.slidetext2', .7, {yPercent: 50, autoAlpha:0}) .fromTo('.sliderbar', 3, {scaleX: 0}, {scaleX: 1}) //red slider bar underneath text .to('.slidetext2', .7, {yPercent: -50, autoAlpha:0}) // Make the first text jump to the start point .set('.slidetext1', {yPercent:50}) .to('.slidetext1', .7, {yPercent: 0, autoAlpha:1});

I'll second what Joe said. Someone working in London, for example, is more likely to be more expensive than someone who lives in a city where the cost of living is half of London.

Since you have no experience with this your best bet will be less frames, as suggested by ohem, if you have the time, recreating it in Adobe Animate will probably yield smoother animation. You won't manage to squeeze this gif into 150k as is, I'm afraid.

Shouldn't be. I have tested on a Mac, all looked fine.

Hello imhugeinapan, Welcome to the forums! Without seeing your original animation, we can't really comment much on what you can do other than say that you will probably need to re-create it for the web using HTML, CSS, JavaScript and probably a bit of SVG. Do you have any experience with any of the above?

Oh you... They are more rant than anything else. I do have the intention of doing a follow up on the polite loader one, though. And should review the old ones as I think some ideas might have changed since.

I see nothing wrong in Chrome or Firefox or Safari. The only thing I would say that could be causing this behaviour is the fact that your JavaScript is not waiting the page/assets to finish loading before animating. I'd reckon you're animating the skew before the image has finished loading.

It's by design. Jack explains it in the docs and how to change it, look into the "Notes about transforms": https://greensock.com/docs/#/HTML5/GSAP/Plugins/CSSPlugin/ TLDR; You can change it by setting: skewType:"simple" in your object's properties.

Yep, that.

Happy New Year Blake. I hate you. Stop melting my brain.

...*blush*, *blush*, *blush*...

Hi ericshew, I am not quite sure if you are just making a comment, asking for help or an announcement. Soz. If you embarking on a learning voyage and just commenting on it, good luck sir. We hope it goes well and we shall be ready to help where we can. If it's a question/issue, I'm afraid you'll have to elaborate a bit more. Any other enquiry, please press 6 in your dial pad.