Leaderboard

@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!

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.

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.

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

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

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

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.

@iLuvGreenSock, are you saying that you cannot provide a reduced test case that shows it [not] working as you described? It doesn't help much to see a codepen that works perfectly. There must be something else in your code that you're doing differently when it's breaking. We'd love to help, but we just can't troubleshoot blind unfortunately.

Sure, wanna give it a shot on codepen? Just use this URL: https://s3-us-west-2.amazonaws.com/s.cdpn.io/16327/SplitText.min.js Is that what you were hoping for?

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.

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 @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

I'm worried that you're not reading my posts. Did you try the solution I offered? To avoid tree shaking, simply reference CSSPlugin DIRECTLY somewhere in your own code, like this: import CSSPlugin from "gsap/CSSPlugin"; const myPlugins = [CSSPlugin]; //<-- HARD REFERENCE IN YOUR CODE

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 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.

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

Thanks a lot!

I tried to make something similar of a compartment door on a pick up truck and also tried using transformOrigin. I had a lot of problems getting it to work so I resorted to a sprite sheet. I was using PNG images instead of SVG, but the concept should work in your case too. Not sure if you used a sprite sheet before, but it's just a series of frames that you can make in Photoshop. You should be able to make one in Illustrator too. Frame 1 is the closed door and the last frame is the opened door. You'll have to figure out the in between frames. You then tween your door element with a steppedEase.config(x). Replace x with the total number of frames in your spite sheet. A spritesheet should work in every browser since you're not doing any transforms to the image.

Thanks! Exactly what I needed. var mySplitText = new SplitText("#quote", {type:"words,chars", tag: "my-custom-tag"}); https://codepen.io/anon/pen/eQvWBJ Could you tell me when will you release the new version with this improvement? When the release happen, you should add this option to the documentation of SplitText: https://greensock.com/docs/Utilities/SplitText/SplitText

Yes. Thank you so much for your help. Learnt something very important here. Hope this thread help someone in future.

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")

You could tween each separately and place them at the same timeline position

@Anooj Mathew did you follow the directions about protecting CSSPlugin from tree shaking in your bundler? Did you reference it somewhere? If you still need help, please provide a reduced test case that demonstrates the issue. It's just very difficult to troubleshoot blind. I strongly suspect you've got a tree shaking issue going on.

Hi @Gubbels, Welcome to the GreenSock Forum. Here are a few tips in addition to the good advice from @Sahil. You can build both animations in a TimelineMax and position both with a gap, starting same time or with an overlap (more info here). You can use autoAlpha in the aspect opacity . 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. Instead of fromTo simply from (= defining the starting values), if the final properties are defined in css - for example css: font-size: 32px; and scale: 0.4. Happy tweening ... Mikel

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.

It sounds like maybe your environment isn't loading CSSPlugin (that's what applies the transforms to DOM elements in cases like this). Are you enabling tree shaking in your bundler maybe? If so, I bet it's dumping CSSPlugin (and it shouldn't). One solution is to just reference CSSPlugin directly in your code somewhere so that it doesn't get dumped, like: import CSSPlugin from "gsap/CSSPlugin"; const plugins = [CSSPlugin]; Does that resolve things?

Thanks for the demo, unfortunately it is incredibly confusing due to the language (we're primarily English-speaking here) and the fact that there are 500+ lines of code. I'm confident your issue could be illustrated with less than 50 lines of code. Perhaps you could make something very small and clear... like you press a red button and something that is the colored red moves. press the green button and the green thing moves. Very simple like that. We don't know what the words Vakantiebudget, eindVakantiekilos, huis, gemisstat3 mean so when we see those as targets of tweens, we have no idea what we are supposed to look for. I'm sure if you can create a super simple timeline or 2 with one or 2 clearly named objects moving around, we will have a better chance of being able to help. Thanks

Happy to help! Here is less complex solution using invalidate. Instead of using another object, I am animating element directly. On resize, activeTween gets invalidated to record new values. I have left some comments for key parts but this is far less complex and better for performance because we are not creating new set tween on every frame.

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.

Um, I don't think so - whatever easing you have in the original timeline would be preserved. And if you want to tween the progress of the timeline with an ease, that's totally possible too using the last parameter of the tweenTo()/tweenFrom()/tweenFromTo() method. Maybe I misunderstood what you meant, though. Feel free to post a different demo if you still need some help. This should be entirely possible.

You can set repeat value by calculating count based on totalTime. Here is fork, https://stackblitz.com/edit/gsap-exmpl-pvk8zc?file=simple-tween.js

Animating to a smaller image height is causing the modal to recenter, moving the image's position down. You could add an another element to maintain the height so it won't shrink. Another option is to clone the image, and animate the clone instead.

Habit mostly. It's also faster. And with FLIP animations, sometimes I don't want my props to permanently removed. If an animation is interrupted, getBoundingClientRect() can give you unexpected results because it takes transforms into account. Coordinates can be confusing. From this post. https://greensock.com/forums/topic/17406-is-there-a-default-x-y-of-element/?tab=comments#comment-78419 Sometimes I need to temporarily clear the cssText in order to do some calculation. // save and clear cssText var cssText = myElement.style.cssText; myElement.style.cssText = ""; // some calculation // put cssText back myElement.style.cssText = cssText; And sometimes I need to get a transform value inside a calculation. clearProps will remove the _gsTransform object from the element, which could throw an error if you're not careful. // Error TweenLite.to(element, 1, { x: 100, clearProps: "all", onComplete: function() { console.log(element._gsTransform.x); } }); // All Good ? TweenLite.to(element, 1, { x: 100, onComplete: function() { element.style.cssText = ""; console.log(element._gsTransform.x); } });

Does this help?: Basically I made a function for you: function scrubTimeline(tl, from, to, wrap) { if (wrap) { //tween "from" to the end, then jump to the beginning and tween to the "to" position return new TimelineLite().add(tl.tweenFromTo(from, tl.duration())).add(tl.tweenFromTo(0, to, {immediateRender:false})); } return tl.tweenFromTo(from, to); } By the way, are you aware of DirectionalRotationPlugin? Might be helpful. You may not need to use complicated timeline setups. Another idea is to use ModifiersPlugin and just tween a value that you plug into the progress or time value on the timeline, but you can allow it to go past adjust it on-the-fly. Like, if you tween from a time of 10 to 20 on a timeline that's only 15 seconds long, you'd take the variable and do % 15 on it so that it just wraps very simply. You could do that with an onUpdate as well. There are many was to accomplish it actually - I don't want to overwhelm you I figured the function above is probably the most intuitive for most people. Happy tweening!