Leaderboard

Hello .. I believe the issue is that you are using a base64 data:image uri. That type of image has very poor performance when animating, especially on mobile when the load event is fired on the image. Base64 images are good for mobile for static one time use images, but not for animating. You should try and replace your jetpack dude with an actual image gif, png, or jpeg. And you will see better performance. GSAP default for force3D is "auto". And your element does indeed use no 3D transforms and is using matrix(), not matrix3d(). So force3D is not the problem, since it is doing what you asked, to be false. See CSSPlugin Docs: https://greensock.com/docs/#/HTML5/GSAP/Plugins/CSSPlugin/ force3D As of 1.15.0, force3D defaults to "auto" mode which means transforms are automatically optimized for speed by using matrix3d() instead of matrix(), or translate3d() instead of translate(). This typically results in the browser putting that element onto its own compositor layer, making animation updates more efficient. In "auto" mode, GSAP will automatically switch back to 2D when the tween is done (if 3D isn't necessary) to free up more GPU memory. If you'd prefer to keep it in 3D mode, you can set force3D:true. Or, to stay in 2D mode whenever possible, set force3D:false. See http://css-tricks.com/myth-busting-css-animations-vs-javascript/ for more details about performance. Happy Tweening

My guess is that it would be better to create the artwork at the size you need instead of scaling it up. It appears your dude starts pretty small. If you are going for a "big chunky pixels" look I'm doubtful you will notice any blurring of anything while the images are moving, especially in the erratic fashion you are going for with the jetpack

Welcome to the forums & GSAP, @manny2003! I think you'll like it around here. By default, GSAP always applies transforms to the "transform" attribute of SVG elements because: That's what the SVG spec calls for They're more predictable and reliable across browsers. There are various quirks when transforms are applied via CSS styles in Safari, Chrome, Firefox, and Edge (different problems with each). We originally applied things to CSS by default and then later switched to the "transform" attribute in order to normalize behavior and conform with the spec. The main problem you're facing in that situation is that you end up with competing sources of truth. In other words, if the CSS has one value, and the transform attribute has a completely different value, which should the browser render? Some browsers prioritize CSS, while others prioritize the transform attribute. Yuck, I know. That's one of the reasons we always recommend setting values via GSAP whenever possible. Specifically: It works around browser bugs It allows GSAP to cache the values to improve speed It ensures rotational accuracy, especially beyond 360 degrees. GSAP can parse existing CSS that's applied to an element (it must do this to record starting values), but the browser always reports computed styles as matrix() or matrix3d() in which rotational values can get very muddy and it's actually impossible to decompose in a way that always discerns the original components. For example, rotations of 0, 360, and 720 would all result in the same matrix. When you mix in 3D stuff, it gets way more complex, like a rotationY of 180 would be the same as a scaleX of -1. In fact, there are infinite options and ways to decompose the values, and they often don't really match what went in originally. So when you set the via GSAP, they get locked in, cached, and always remembered so that it's perfectly accurate every time. No messing with decomposition, parsing a string of 16 values and trying to pull out the data, etc. Does that clarify things? Technically, in browsers that support it, you could set CSSPlugin.useSVGTransformAttr = false to tell GSAP to use CSS instead but it's not really something I'd generally recommend. We place a high priority on browser consistency and when it comes to SVG, CSS transforms aren't entirely reliable in my experience.

In the amount of time you've spent trying to optimize this, you could have learned canvas and been done with it. The browser draws EVERYTHING on a canvas, like Skia. Yes, that includes SVG. I say skip all the formalities and just start with canvas to begin with. That's the path of least resistance. Base64 is bad because it can block the browser from downloading the rest of the page. A texture atlas or sprite sheet is better. For pixelation, CSS has this property, but with limited support. image-rendering: pixelated; Canvas has an imageSmoothingEnabled property with better support.

Hi @blaasvaer I don't know if you typed that code snippet or it's a copy and paste from your actual project, but there are typos in two tweens. You're missing a closing quote mark for the tween targets and a comma between the target and the duration. //this TweenMax.to('.logo span.one, .logo span.three duration, { opacity: 0, ease: Power0.easeNone } ); // should be this TweenMax.to('.logo span.one, .logo span.three', duration, { opacity: 0, ease: Power0.easeNone } ); The same typo is present on the span one and span three tween in the else statement. I'm not sure if that is the problem without seeing the actual working code though. As @mikel mentioned, a CodePen would be most helpful. Happy tweening.

Hi @rgfx That's what I would expect. The playhead is at the 0 position when you log it. Are you possibly thinking of duration? The duration of that timeline would be 2. duration() is a getter/setter for the timeline duration: https://greensock.com/docs/#/HTML5/GSAP/TweenMax/duration/ time() or totalTime() are getters/setters for the playhead position https://greensock.com/docs/#/HTML5/GSAP/Core/SimpleTimeline/totalTime/ Hopefully that helps. Happy tweening.

Hi blaasvaer, Please provide a very basic CodePen demo as explained here: http://greensock.com...a-codepen-demo/ It is difficult to guess from just looking at the code snippet you provided what the problem is. Kind regards Mikel

Its not so much the initial loading of the base64 data URI and size of the base64 data URI image. But various browser bugs in rendering animated base64 images, that is why i recommended to just use a real image.

Sorry for the delay. I was hoping someone would be able to jump in with some sort of a solution. I believe the root of your problem is exactly where you illustrate it above: SETTINGS object can't reference values nested in objects inside it while it is being constructed like: SETTINGS.intro.topics.singer.btn.params.initialPosition Like you guessed, I'm pretty sure you will need to build the SETTINGS object and then populate it with those values.

Happy to help. No, you can not have 2 tweens trying to change the y of the same target at the same time. Use a wrapper. Yes, you can use an onRepeat callback to check if someone hit the pause button, but that would only fire every 2 seconds (based on the duration of the tween in my demo). Another option is just to tween the time of the wiggle timeline back to 0 very quickly. try using this in my previous demo: $(".dude").click(function(){ if(!tl.paused()){ tl.pause(); // tween the time() back to 0 TweenLite.to(tl, 0.2, {time:0}) } else { tl.play(); } })

The onComplete callback functions are setup so that this inside the callback refers to the tween that called the function. So knowing that you can do this.target to get the element that was being tweened. Also you can pass in the special string "{self}" in your onCompleteParams, but Its easier just to use this in the function. Both methods are illustrated in the resetText function below (open the pen in a new window and view console).

Hello Robert Wildling Im not near my computer but ... onCompleteParams only accepts an array that passes the parameters to your onComplete callback function. Taken from the Tweenmax Docs: https://greensock.com/docs/#/HTML5/GSAP/TweenMax/ onCompleteParams : Array - An Array of parameters to pass the onComplete function. For example,TweenLite.to(element, 1, {left:"100px", onComplete:myFunction, onCompleteParams:[element, "param2"]}); To self-reference the tween instance itself in one of the parameters, use "{self}", like:onCompleteParams:["{self}", "param2"] Also keep in mind that GSAP already uses document.querySelector() by default in its tween target behind the scenes. So you don't need to call document.querySelector() at all and should just pass the target as a string '.c-topic--singer' for your el property. TweenMax to() : https://greensock.com/docs/#/HTML5/GSAP/TweenMax/to/ to() target: Object Target object (or array of objects) whose properties should be affected. When animating DOM elements, the target can be: a single element, an array of elements, a jQuery object (or similar), or a CSS selector string like “#feature” or “h2.author”. GSAP will pass selector strings to a selector engine like jQuery or Sizzle (if one is detected or defined through TweenLite.selector), falling back to document.querySelectorAll(). I hope this helps

These are all great solutions, and traditionally I would recommend the same approach of creating a function that creates a random motion tween that calls the function again using onComplete. However, CustomWiggle can do a lot of this with very little code. A CustomWiggle always returns back to the start values. https://greensock.com/customwiggle This demo should provide constant random movement and return to normal position on pause. You can easily change the number of wiggles and adjust the max distance he travels (change x and y in tweens). Also check out random swarm which was accomplished using the same basic technique

@GreenSock I had no doubt that you would have answered impeccably! Everything you said make 100% sense to me and I really think you made the right choice in order to keep the best compatibility in all the situations. I thought it was interesting to ask anyway about your point of view, just to be sure that using the .set() function in these cases was in fact the proper way to deal with transform attribute and CSS priorities. I really appreciate that you have also kept the option to set CSSPlugin.useSVGTransformAttr = false if really needed! A great value in terms of freedom. Thank you very much for the clarification and again congratulation for your work, keep up with the great job, GSAP is for sure one of the best bricks that makes websites all over the world as we know and appreciate them.

Yeah, that seems to be a sound approach. Nice job. If you're timeline is set to yoyo:true and you click the red button during the yoyo (backwards) phase it immediately changes direction and moves forward. Your method works for your particular case, but there are different use cases to consider when adding methods like this and how to make them flexible enough to make sense for everyone. We're pretty protective of the filesize of the tools and usually only add to the API unless there is a large need for a feature that can't easily be accomplished with the existing methods available. In this case it doesn't seem to be something that comes up often but we'll keep our eyes and ears open. Thanks for the suggestion.

That's what I needed. Thanks mikel.

Hi and welcome to the GreenSock forums. PathEditor is just a utility that we use internally for our own purposes such as the Ease Visualizer. PathEditor isn't a tool that we promote or support.

Hi ORi, Welcome to GreenSock Forums. There is a fantastic topic: https://greensock.com/forums/topic/7237-gsap-mouse-driven-parallax-3d-scene-with-working-example Best regards

Hell yeah, I knew it! I knew there was an easier way. Thank you sooo much, Carl. GSAP is worth way more than you guys charge. One more question: Can I tween y: "+=290" of .dude, while the wiggle tweens the same y? Or do I need an extra wrapper for this? My quick tests didn't work– Another question: Carl handled going back to default by hardcoding a tween y:0, x:0. There must be a way to do the following on click: "Finish this repeat, and then stop, but go on repeating once you play again" // Something like tl.pauseAfterJustThisRepeat(); (Background of these questions: at some point the .dude has to stop wiggling and slightly float, and then leave fly out of the screen, while wiggling)

Hi Kreativzirkel, The super random guide of BLAKE might be helpful: The topic is https://greensock.com/forums/topic/16415-random-minmax-animation/ Best regards Manfred

Sure can ... just grab the string length and perform some operation on it to get your desired delay. Then assign that delay value to the delay property. Here's an example,

Again thank you all but BINGO Craig. Was looking for an easier way to target part of the gray lines (an array). 0 thru 8 or 3 thru 5, etc.

Something like this would work Edit: Just as mikel suggested ... I put a class on the green lines that should be "on" via the staggerTo.

It would be very helpful if you could take a few minutes to set up a reduced test case as explained here: One option might be putting your menu inside a parent container div with the higher z-index. Once we can see a small demo we will be better suited to provide a solution that works in your particular scenario.

Hi iammarkmulvey, Just use the class of all the lines ...

Sorry for the confusion guys. Must have had a paste fail last night. The he first post Mikel had suggested was the one I meant to share

Hi Kreativzirkel, "normalize OR lerp OR clamp" copy and paste in the Forums Search (see above) will present all posts and comments by BLAKE regarding this topics. Best regards Manfred

Hi kreativzirkel, Looking for lerp links isn't that complicated: just use the search function. As a start take a look to https://greensock.com/forums/topic/14912-parallax-scrolling-sections/#comment-64130 Best regards Manfred

How to create a scroll driven animation seems like a much different question than what you were originally asking. The easiest way to go about this is to learn ScrollMagic which is a very robust api for controlling GSAP animations via scroll. http://scrollmagic.io/examples/ Check out Petr Tichy's ScrollMagic resources: https://ihatetomatoes.net/?s=scrollmagic&post_type=post&ref=5 Blake has posted often about controlling animations via scroll without ScrollMagic so you could try to re-engineer some of these to suit your needs: and be sure to read this post where Blake talks all about normalize, lerp and clamp and there are a bunch of great videos to watch too.

I think something like this could work for you. Note ... I had to reorder your polygons in the DOM so that they would animate in order.

I'd look at using stagger for something like that with a .01 offset (instead of the delays you currently have). I don't have time to fork your pen at the moment, but here's some info on stagger. https://greensock.com/docs/#/HTML5/GSAP/TweenMax/staggerFrom/ With stagger, you can do that whole animation with one tween. Happy tweening.

Hi @iammarkmulvey Welcome to the forum and thanks for joining Club GreenSock. You're targeting a group for your morph, but the plugin works path to path. To fix this, move your IDs from the groups to the paths within those groups like this: <path id="Finger1" class="st0" d="M-214 570.4c0-4.7-2.9-6.7-6-6.7 -3.5 0-6.3 2.4-6.3 5.6v5.9 -13c0-3.1-1.4-7.3-5.8-7.3 -4.2 0-6 2.3-6 6l-0.1 10.6 0.1-15.9c0-3.1-4-5.7-7.1-5.7s-6.1 2.7-6.1 5.8v11.6 -41.9c0-3.1-2.9-5.7-6-5.7s-6 2.5-6 5.7v55.5l-4.8-13.9c-0.7-2.8-4.4-4.9-7.2-4.2 -4 1-5.1 4.4-4.6 7.5 0 0 4.8 17 4.9 17.7 3.2 17.2 12.9 31 30 31s31.2-13.9 31.2-31L-214 570.4z"/> <path id="Finger2" class="st0" d="M-214 570.4c0-4.7-2.9-6.7-6-6.7 -3.5 0-6.3 2.4-6.3 5.6v5.9 -13c0-3.1-1.4-7.3-5.8-7.3 -4.2 0-6 2.3-6 6l-0.1 10.6 0.1-46.1c0-3.1-4-5.7-7.1-5.7s-6.1 2.7-6.1 5.8v41.8 -8.9c0-3.1-2.9-5.7-6-5.7s-6 2.5-6 5.7v22.5l-4.8-13.9c-0.7-2.8-4.4-4.9-7.2-4.2 -4 1-5.1 4.4-4.6 7.5 0 0 4.8 17 4.9 17.7 3.2 17.2 12.9 31 30 31s31.2-13.9 31.2-31L-214 570.4z"/> You actually don't need the paths to be in groups so you can delete the group wrappers if you like. Once you move those IDs, switch your morph tween to this: TweenMax.to("#Finger1", 1, {morphSVG: "#Finger2", ease:Power1.easeInOut}); http://codepen.io/PointC/pen/532712e3a929eb11cb600b34ecfe6ecd/ That should get you working correctly. Happy tweening.

Use the following syntax to import plugins/utilities with TypeScript. import * as SplitText from "gsap/SplitText"; // Or import SplitText = require("gsap/SplitText"); This post explains why. And the reason importing like this didn't cause an error... import "gsap/SplitText"; ... is because GSAP makes everything global, and you didn't name the import, so you were using the global, which would be like this. var split = new window.SplitText(myElement);

@mikel That gave me a good laugh.

Hi Blake, Yesterday evening joining an old red wine - perfect for the back and force study of lines - I got it. Yep! And a bloody fly triggered me for this exercise: http://codepen.io/mikeK/pen/aWQdLa Thank you so much for an amusing and entertaining evening ... Manfred

Hi @Semblance Looks like you're getting pretty close to what you want. When you have some action that is going to happen over and over, you can make the code do the heavy lifting by using a loop. In your demo, we can loop through each of the tulip groups and create the animation for that group. That timeline is then added to a master which is repeated as much as you like. I used a variable for the duration and the position of each timeline on the master so you can adjust those to your liking. I'm not sure if this fork of your demo is exactly what you wanted, but it should get you started. Regarding your question about the 0 at the end, that is the position parameter. As @mikel mentioned, you can read more about that here: https://greensock.com/position-parameter Hopefully that helps. Happy tweening.

This looks amazing OSUblake. I'm glad this post motivates all of you to improve the code and keep learning all together.

You have some positioning problems that might not be obvious. After aligning the motion path and setting the x/yPercent for the ball, if you don't start tweening the ball right after that, it's going to be in the wrong position. The reason being is the coords for the motion path were calculated from the top-left corner of the ball, but now the ball is transformed. To fix this, you also need to set the x and y values for the ball using the first values from the motion path. var values = MorphSVGPlugin.pathDataToBezier("#motionPath", {align: "#basketball"}); // center the ball on the path TweenLite.set("#basketball", { x: values[0].x, y: values[0].y, xPercent: -50, yPercent: -50, transformOrigin: "50% 50%" }); The reason your y position tween wasn't working is because it's moving in the same direction and from the same position as the motion path. You set the y to 0, when it should be a value greater than that. But this leads to another issue. You'd have two tweens moving in the same direction, one right after another, but their easings aren't going to match so it's not going to be a smooth transition. It'd be better if you had the motion path start from where the player's hands begin to move up. One other thing you should be aware about in the following code... .to("#basketball", .85, {bezier: {values, type: "cubic", autoRotate: false }}) I think you copied that from my pen, which is fine, but I was using a new syntax feature which isn't going to work in all browsers. See how the values property doesn't have a colon or anything after that? Unless you are using babel, you should write it out using the full syntax. .to("#basketball", .85, {bezier: {values: values, type: "cubic", autoRotate: false }}) Check out the offset problem in the blue basketball, and the disconnected transition between the 2 y position tweens. http://codepen.io/osublake/pen/dd545e1279f30030c1b6fb9d027b3458/?editors=0010

Btw I've solved it by having an internal variable: var i = 0; TweenMax.fromTo( $el, 2, { y: 0 }, { y: 3, repeat: -1, yoyo: true, ease: Power3.easeOut, onRepeat: function() { i++; if (i % 2 == 1) { // Going backwards... } } ); I would still like to know if there is anything in the core that supports this check.