Leaderboard

Hi @Zaperela and welcome to the GreenSock Forum! Here are some helpful resources on CSS transform-origin: https://developer.mozilla.org/en-US/docs/Web/CSS/transform-origin https://tympanus.net/codrops/css_reference/transform-origin/ https://teamtreehouse.com/library/changing-the-transform-position-with-transformorigin Even though SVG does not support 3D transforms at this time. That wont stop you like @PointC advised from separating your SVG into separate parts. Then you can wrap each SVG in a <div> tags and animate the <div> tags using 3D transforms. And here is just a simple example of swinging a door open and then closing it, so you can see the structure and use of transform-origin. But there are many ways to achieve what you want. Best of luck to you! Happy Tweening

I think svgOrigin will solve this for you. Just FYI, please don't include member only plugins in your demos. You can find all the CodePen Club GreenSock plugin versions here: Happy tweening.

@Jonathan thank you for this great example! I can't get over how helpful and friendly this community is! It is truly outstanding! ❤️

Hi @evomedia.lt That´s a result of staggerFrom: By default, immediateRender is true in from() tweens, meaning that they immediately render their starting state regardless of any delay that is specified. It may be that you made a typo here. Here an example staggerFrom and staggerTo : Best regards Mikel

Hello @evomedia.lt and Welcome to the GreenSock Forum! It looks like you need to use the GSAP special property autoAlpha instead of opacity with visibility property. By using autoAlpha, GSAP will set the right CSS visibility property value for you based on the opacity value and will be better on performance. In your above code example it would be the following with autoAlpha: So to start animation you can do this: var t2 = new TimelineMax(); t2.staggerTo('.letter', 0.2, {autoAlpha: 1}, 0.1); And for your ending animation you can do this: var x2 = new TimelineMax(); x2.staggerFrom('.letter', 0.2, {autoAlpha: 0} , -0.1); When using autoAlpha and you have it fading in from 0 and you need your element hidden when the page loads. Then just add the CSS visibility: hidden to the CSS rule for your element. Then when autoAlpha animates from 0 to 1, it will automatically change visibility: hidden to visibility: visible. and then when autoAlpha animates from 1 to 0, it will automatically change visibility: visible to visibility: hidden. This will allow you not to worry about setting the CSS visibility property when using autoAlpha. You can find more about autoAlpha below: autoAlpha is part of the CSSPlugin - https://greensock.com/docs/Plugins/CSSPlugin#autoAlpha autoAlpha Identical to opacity except that when the value hits 0 the visibility property will be set to "hidden" in order to improve browser rendering performance and prevent clicks/interactivity on the target. When the value is anything other than 0, visibility will be set to "inherit". It is not set to "visible" in order to honor inheritance (imagine the parent element is hidden - setting the child to visible explicitly would cause it to appear when that's probably not what was intended). And for convenience, if the element's visibility is initially set to "hidden" and opacity is 1, it will assume opacity should also start at 0. This makes it simple to start things out on your page as invisible (set your css visibility:hidden) and then fade them in whenever you want. Example of usage: //fade out and set visibility:hidden TweenLite.to(element, 2, {autoAlpha:0}); //in 2 seconds, fade back in with visibility:visible TweenLite.to(element, 2, {autoAlpha:1, delay:2}); Does that help? if your still having issues please create a reduced codepen demo so we can see your code in action to better help you! Happy Tweening

Hi again @evomedia.lt And here is a helpful video tut by The Mighty @Carl. It goes over that immediateRender special property @mikel advised on when you use any from(), fromTo(), staggerFrom(), or staggerFromTo() tweens. Since from tweens have immediateRender set to true by default. So you need to set immediateRender: false for those from tweens. Happy Tweening

Hi @wellygirl, There are certainly some alternatives. Here is a variant ... If you need a real candidate for your list ... Happy scrolling ... Mikel

Well, that really looks nice!!! Great job Beau!!!

I thought I might thank the people in this thread for helping me to make this happen. @Rodrigo & @OSUblake

An onComplete fires the moment a tween finishes (as it should). I'm worried that if you think that's not happening and you're trying to add some extra time to "fix" it, you're probably missing the core problem. Sure, you could easily add a function call later in the timeline (wherever you want), or even just use TweenMax.delayedCall() with a specific time, but again, I'm concerned that you may be missing some core issue with what you've built and this may turn into more of a hack than a fix. I'd really like to help - I just can't imagine what the problem could be without seeing a demo. And this is definitely the right place to post a GSAP-related question like this. Absolutely. We welcome it.

Hi @explorerzip, I had time for a door ...10 However, the driver has to stay at the door, otherwise it will be closed again ?. Happy tweening ... Mikel

Hello @Josef and welcome to the GreenSock Forum! Sorry your having this shaky issue. I was also seeing a slight jitter shaking of letters, but in Firefox and Chrome on Windows 10. To better help you troubleshoot this: Can you please verify what OS and OS version you are seeing this on? What Chrome version is this? I believe this is caused by the animating of the width attribute. You can see how it is less or not shaky when you comment out that tweens that animate the width attribute. Maybe you can animate scale instead of the width attribute? But we are still looking into this so i can test on an Apple device so i can see exactly what you are seeing. Thank you while we look into this for you

You need to load the Text and ScrambleText plugins. <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/2.0.2/plugins/TextPlugin.min.js"></script> <script src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/16327/ScrambleTextPlugin.min.js"></script> You'll also probably want to to move those tweens to a timeline if you want them to play in sequence using the position parameter. Happy tweening.

Hi @FilGapper Niraj Welcome to the forum and thanks for joining Club GreenSock. I'm not sure I understand what you mean by 'goes outside of the box'? Do you have a CodePen demo of what you're seeing? This is from another thread, but here's another way of getting the same result with SplitText. Happy tweening.

More on this here.

Glad it worked well for you. I'm working on another enhancement to MorphSVGPlugin at the moment, so once that's done we'll probably push things out at that point. If you need something before then, just PM me and I'll hook you up Thanks for being "Business Green"!

I didn't notice any shaking. Hm. Oh, and I'd definitely recommend using scaleX:2 rather than attr:{transform: "scaleX(2)"}. Much faster.

TweenLite is the base file that all the other files import from, and it seems to be working correctly. You can check what's installed by logging this out. console.log((window as any).com.greensock); Everything else like the CSSPlugin, TweenMax, TimelineLite, TimelineMax, etc ends up being undefined in the build. I have no idea what the build optimizer is doing to cause those problems. My guess is that Angular doesn't like the way TweenLite works with the Window object. I think your best bet is to add GSAP files to scripts in your angular.json file if you want to use the build optimizer. I didn't check, but you may need to use the umd versions for that.

Try using Google's polite loading template at: https://support.google.com/richmedia/answer/2672514?hl=en You're also loading a number plugins that are redundant or you don't need. jQuery is not needed at all for a simple animation like this and TweenMax already includes TimelineMax, CssPlugin and easePack. You don't need to explicitly run them as you have in your HTML. It also looks like you're trying to use JavaScript to create a second CSS (polite.css) file. You should not have to do this because you can initialize everything you need in your global.css. While it's technically possible to load a second CSS file, I believe it's poor programming practice to do that especially in this case where you have very simple animation. Remember that efficiency should be your ultimate goal when building banners. As a result, you should only load plugins, scripts, css files, etc that you need. You can also contact Double Click directly through chat or email and can even send them your code. They will often write big sections of code for you.

привет @yulia, Это выглядит хорошо. Надеюсь, tweening - это весело. ... и этот google русский понятен. Привет из Гамбурга Mikel

Hi guys! If it is interesting to look at the result, here it is

Exactly what I was looking for, thank you!

@explorerzip @Carl @PointC @mikel Thank you for all the help! I'll give this another go with your advice. @mikel big digital hug, great example!

Nice work @mikel You just need the GSAP guy (does he have an actual name?) to hold open the truck door with his tweening powers Future Marvel movie right there LOL

Great work, Mikel. Nice and simple. just the way I like it!

Yeah, @Carl is exactly right, 3D with SVG is not fully supported and is a bit tricky. My advice would be to put each door in its own SVG and rotate the whole thing. It's a little more work, but it'll still scale nicely and should work correctly in all browsers. Happy tweening.

SVG doesn't officially support 3D. I'm not so sure your trick of putting a div inside a foreign object inside an SVG is a valid workaround. I think it would be better if you made a reduced test case with just a simple div in an SVG and tried to get it to render the way you want just with CSS (static, no animation). If it is technically possible to achieve, then I would suggest trying to animate it with GSAP. SVG code is a disaster to try to read (not your fault), so it always helps to reduce it as much as possible... for instance there is no need for the carts or even the truck at this point. I would start with a simple rectangle or 2 and work up from there. There are some folks around here who know more about SVG than I do, so perhaps there will be some helpful info for you.

Hi @iLuvGreenSock, Please understand that it is indeed a reduced, but not the CodePen that shows your problem. We always and gladly help - if feasible. If you want to call a function that runs exactly when you want it, then .call () may be a variant - see the docs here tl.call(func, ["param1"]); //appends to the end of the timeline tl.call(func, ["param1"], this, 2); //appends it at exactly 2 seconds into the timeline (absolute position) tl.call(func, ["param1"], this, "+=2"); //appends it 2 seconds after the end (with a gap of 2 seconds) tl.call(func, ["param1"], this, "myLabel"); //places it at "myLabel" (and if "myLabel" doesn't exist yet, it's added to the end and then the tween is inserted there) tl.call(func, ["param1"], this, "myLabel+=2"); //places it 2 seconds after "myLabel" Happy calling ... Mikel

Your sixth parameter should be function, in your snippet it is seventh. I think you accidentally wrote position parameter twice. const heroTimeline = new TimelineLite({delay:'1'}); heroTimeline .add('start') .staggerTo([stage1_h1, stage1_h2], 1, {opacity:1}, 0.25, 0, stage2); https://greensock.com/docs/TimelineMax/staggerTo

I am pretty sure you don't need React for banner ads ?

From your code, I don't know what you're after. Please create a Code Pen to isolate your issue and I can help you further. At a quick glance (and with some assumptions), I would think you're looking for const timeline = new TimelineMax() timeline .from(el, 0.850, { opacity: 0, // Only opacity here with the following ease ease:Elastic.easeOut, onComplete: () => { done() }, 'someLabel' // Create the label for the Timeline position and set position }) .from(el, 0.850, { y: 50, // // Only y here with the following ease ease: SOME-OTHER-EASE, onComplete: () => { done() }, 'someLabel' // Set position (to label created above) }) .staggerFrom(this.$refs['fullscreen-nav-menu-item'], 1, { y: 50, opacity: 0, ease:Elastic.easeOut, }, 0.05, "-=0.8")

Thanks for the demo, but unless your issue is related to React it's really best not to provide something that complex with multiple files, dependencies, code for components and all that. A simple demo will be just fine and helps us better focus on the issue without getting hung up on all the unnecessary overhead. I tried looking at your demo but it wasn't immediately clear how your verticalHandler function was supposed to be invoked. I didn't see a button for that in the UI or any code that called it. That aside, the following demo should meet your requirements as you described:

Hi iLuvGreenSock, Sorry, but pasting some css styles into your response does nothing to get us closer to understanding why you think an onComplete is firing early. As Sahil noted it is virtually impossible for an onComplete to fire before its scheduled time. I've also increased the tween duration to 3s and onComplete gets fired 3s while tween started slowly and ends another 3s later. Please provide a demo that clearly illustrates this issue and we will do our best to explain what is happening and offer a solution.

Hi and welcome to the GreenSock forums, If your intent is to kill all your animations at once, please see TweenMax.killAll() https://greensock.com/docs/TweenMax/static.killAll() To track individual tweens, yes you can assign them to a variable or push them into an Array. var myTween = TweenMax.to(something, 1, {x:100}); //and then you can kill or control that animation using common methods such as myTween.restart(); myTween.pause(); myTween.reverse(); myTween.kill(); someArray.push(myTween) Also you can grab all tweens and put them in a timeline that you can then control or kill as a group using TimelineLite.exportRoot() https://greensock.com/docs/TimelineLite/static.exportRoot() That's a fairly advanced concept and may not be super easy to grasp for beginners. Definitely crack open the TweenMax docs and explore the methods in the left-hand nav. Its a great way to get an overview of the capabilities of the platform https://greensock.com/docs/TweenMax/TweenMax() and find some stuff you may not know was possible. Don't worry about understanding everything the first time through. Just good to have some mental notes that you can follow up on later.

That's really well written actually. To set delay before text fades out again, you can set repeatDelay property. You are setting delay in both from and to values but it will ignore delay in 'from' values. On codepen you don't have to write entire HTML, you can add your scripts from settings and just write HTML body in codepen, rest is not needed.

If you think about it, what you are trying to do is to create timeline for user interaction. Your character is free to move around so you can't put him in timeline. Instead you should treat it as interaction. When he reaches certain spot then trigger animation related to that position. Timeline is not best option for this.

With all that I forgot to implement main effect of revealing text. https://stackblitz.com/edit/gsap-react-multiple-elements-pvnr8v?file=multiple-elements.js

I know that demo, I've read over its code and took it apart at some point in the past. It runs off shaders and as Carl has said, it's not for beginners. It was not designed to work out of the box by simply creating a new Slide. You will need to tinker in the code that informs the shader what to do as well as the calculations to break apart the images and which image to show. If this is your first attempt to work with ThreeJS, you will need to dive into shaders as well The Book Of Shaders is a great starting point even if it is an unfinished book.

Hi, I think your best bet would be to reach out to the author of that demo. He's extremely advanced and I suspect he wrote it in a way that could be extended without much trouble. We really have to keep our support focused on questions related to the GSAP API. Digging into hundreds of lines of code that we didn't write can be quite time-consuming and something that we just don't have the resources for. Perhaps someone else will stumble into this and enjoy the challenge.

Hard to guess what could be happening in your actual code. And it is impossible for onComplete to fire before tween completes, unless you are using stagger tween. In stagger tweens, onComplete gets fired for every single tween. You need to pass 5th parameter as function for onCompleteAll callback. https://greensock.com/docs/TweenMax/static.staggerTo() Apart from that it is impossible for us to help without demo showing problem. But I am sure there must be something else in your code that must be causing this issue.

Well @Sahil is spot on (that's why He is a superstar around here ). The only thing I'd change is using the ref callback instead of reaching to the DOM directly. So instead of this: componentDidMount(){ const loaderContainer = document.querySelector("#loader-container"); const loader = document.querySelector("#loader"); this.tl .to(loader, 1, { y: -250, delay: 0.3 }) .to(loaderContainer, 0.2, { alpha: 0, display: "none" }; } I would create a reference in the constructor: constructor(props){ super(props); this.loaderContainer = null; this.loader = null; } Then in the render method use the ref callback: render(){ return <div> <div ref={ e => this.loaderContainer = e }> <div ref={ e => this.loader = e }> </div> </div </div>; } Finally in the component did mount method: componentDidMount(){ this.tl .to(this.loader, 1, { y: -250, delay: 0.3 }) .to(this.loaderContainer, 0.2, { alpha: 0, display: "none" }; } But beyond that small detail just do what @Sahil is doing and you'll be fine. Happy Tweening!!

Yes but you probably don't need to if you can structure your columns differently. In following demo I am animating containers so you won't have to write same tweens again and again to achieve that effect, or use a loop? Would be a lot easy for you to edit in future. Also, if you want to translate element in percentage then you can instead use yPercent. That's because your columns animate within a second but your quotes animate over six seconds. So when you scroll, all slides animate first then rest of quote tweens start playing because one's duration is 1 second and another's is 6. You can either construct your timelines with same duration or explicitly set one timeline's duration to another.

It seems like similar question from last week. As advised, please post a reduced test case demo of what you are trying to do and elaborate your question more so we can understand better. Take a look at following thread to see how to create demo,

Ya of course, it just boils down to your knowledge and understanding of framework or library. I am not familiar with react but I wanted to give it a try. I followed @Rodrigo's same blog post that I had advised you to follow in previous thread. Following is the fork of one of his demos. As you can see, it can be reduced to very little code, you can add more conditional logic to change colors etc. https://stackblitz.com/edit/gsap-react-multiple-elements-5aqhzy?file=multiple-elements.js Though there might be certain things that Rodrigo will do differently because this is very first time I am working with React but basically you need to start learning from resources we provide, almost everything is possible just depends on how you implement.

An easy way to keep things random is to create a new animation when the current one finishes.

Hi Beau, First thing I can say is that I don't like to add stuff to elements prototypes unless is necessary, but that is just me and my two cents about it. In your case I don't think is necessary, again just my humble opinion about it. Regarding your app I'd like to know if you want to animate all your elements or just some. If you want to animate all your elements, then the code you have is not working because you're not shuffling your array, you're simply getting a random index on each iteration, but at some point you could get the same index more than once. Normally when I have to do something like that I use this code: // this is the array const a = [101, 102, 103, 104, 105, 106, 107, 108, 109, 110]; const used = []; const getOne = arr => { let selected = Math.floor( Math.random() * arr.length ); // if the selected index is in the used array // try a new one until we get a non-used while( used.indexOf(selected) > -1 ) { selected = Math.floor( Math.random() * arr.length ); } // add the new index to the used array used.push(selected); return selected; }; a.forEach( () => { console.log( a[getOne(a)] ); }); That's the reason for this: Right now since some of the elements are getting selected twice or more, there are two or more tweens in the timeline that affect the same element, so GSAP is overwriting the first tween and then executing the second one, which creates the sensation of the element slowing down, when in fact the element just started a new tween, as long as the previous, but in a shorter distance. Creating an iteration that takes every element in the array only once would remove that issue. The rest of the code to create the random numbers seems ok with me. Finally in terms of React, avoid using string refs since they are considered legacy and will be removed from a future version. https://reactjs.org/docs/refs-and-the-dom.html#legacy-api-string-refs Happy Tweening!!!