Leaderboard

You are trying to animate the src attribute (which is a string) of an image over 2 seconds. GSAP makes updates at 60 frames per second. Your tweens are literally telling GSAP to change the src attribute 120 times. Each time a change to the src appears, the browser is going to try to load a new image. GSAP is an animation engine so it naturally wants to change numeric values over time. In your example that isn't working GSAP recognizes that _1 and _2 that you use in your image names are numbers and tries to animate them (see tweening complex string values). Each time it changes those numbers, it generates a new src attribute, sets it, and the browser tries to load an image that doesn't exist. I think you would be better off using set() (no duration) and the position parameter var tl= new TimelineMax({repeat:-1}); tl.set("#galleri", {src:"bildegallery_1.jpg"}) tl.set("#galleri", {src:"bildegallery_2.jpg"}, "+=2") tl.set("#galleri", {src:"bildegallery_3.jpg"}, "+=2") So instead of animating the src value for 2 seconds, you set it to something new at 2-second intervals and the browser will hopefully retrieve the new image in time. Also, since src is an attribute you might want to use AttrPlugin. I'm kind of surprised what you did worked at all, but I guess somehow src is seen as a property of your selector. tl.to("#galleri", {attr:{src:"bildegallery_1.jpg"}}); https://greensock.com/AttrPlugin

Okay, how about if I add a "specialChars" property that you can pass into SplitText and it'll check that array for special characters and keep them grouped properly? Here's a demo (you may need to clear your cache): That provides flexibility to get around odd scenarios like this. If everybody likes it, I can put it into the official downloads (the version in that codepen only works on codepen). So it'd look like: new SplitText("#split", { type:"chars", specialChars:["पा", "क्ष", "यो", "द्यो", "का", "सा", "धा", "मी", "पा", "है"] }); Cool?

Oh, okay. Well, that seems pretty cumbersome BUT maybe this is the time to let you in on a little secret - I set it up so that you can define specialChars as a function. As it iterates through each character in the string, it feeds the REMAINING text to the function and then you return a number corresponding to how many characters should be grouped in that iteration. So technically you could apply whatever logic you want! So, for example, if the string is "ABCDE", the function would receive "ABCDE" as the parameter and if you returned 1 or 0 or null, then it'd take "A" as the character and the next time the function gets called, it'd receive "BCDE" and if you return 3, it would tell SplitText to group "BCD" as if it were a single character, so the next time the function gets called, it'd receive "E". Make sense? So again, my goal was to make it super flexible and let you run any logic rather than only being able to feed in an array (though that's probably the most common use case). I wasn't keen on necessarily exposing that option at first, just so I don't confuse people. But I like having it there for those edge cases and I can be like "oh, guess what - we've already got you covered...here's a secret feature..."

Solution 1, as you provided has some typos in the third set. https://greensock.d.pr/KHuWgi Not sure if that is your real code or not. My code looks better var tl= new TimelineMax({repeat:-1}); tl.set("#galleri", {src:"bildegallery_1.jpg"}) tl.set("#galleri", {src:"bildegallery_2.jpg"}, "+=2") tl.set("#galleri", {src:"bildegallery_3.jpg"}, "+=2") I think you lost the time, change it to tl.to("#galleri",2, {attr:{src:"bildegallery_1.jpg"}}); my mistake, that should actually be a set(), which should not have a duration. tl.set("#galleri", {attr:{src:"bildegallery_1.jpg"}}) If you still have problems please provide a simple demo, preferably using an online editor like codepen. You will just need to upload your images somewhere

There are some forums where you have one "initial topic" and you can reply to it, or you can reply to the replies, or to the replies of replies, etc. and it creates a "tree" structure, a bit like reddit or facebook comments. However in other forums such as this one, "topic" (or thread) just means "one individual conversation" and adding a reply to it just means adding your comment to the end of that conversation. It can be confusing

You're welcome. Sure, you can have an SVG and only animate the paths you want. The paths that get animated are chosen based on the selector you use. In your case you used an ID to select your path, but you can use a class. Perhaps try something like put a class of "animate" on the paths you want to animate and then do TweenLIte.to(".animate", 1, {drawSVG:"0%"}); //will animate every path with a class of animate or you can put a class on a group and target only the paths in that group Notice how only the paths in the "#tops" group get animated: A simple request: In the future try not to quote the entire message that you are replying to. It makes the content of the threads much longer and more difficult to read and scroll through. In longer conversations with more participants its can be helpful to quote small fragments. Thanks!

Actually it's useful for more than grouping just a few special characters. You can use it to mix characters and words or any particular special string into a split text object to create new types of animation effects as well, without having to target words and characters with separate animations. if possible you could also add the ability to select special characters by string slices then you'd have precise control over exactly what items are grouped into special characters.

I don't see those lines, sorry. But here's a similar animation with GSAP: Sounds like a browser rendering issue, possibly related to your video card. Perhaps you'll need to adjust the size of the door so that it's a pixel (or half pixel) larger in each direction.

You can't see all of it, but if you triple click and copy you'll get the whole link. You can also bookmark this: https://cdnjs.com/libraries/gsap Happy tweening.

Also note that there's a PixiPlugin that's built specifically to make Pixi.JS animations easier: https://greensock.com/docs/Plugins/PixiPlugin Happy tweening!

This says "reply to this topic". To my thinking that would mean to reply to the topic I posted. Since when I reply I am thinking of replying to the response someone wrote to my topic the option "reply to the topic" feels not exactly correct. That is why I would choose to push button "quote" at least to make sure that I am replying to another person who wrote that quote. The only thing I did not realize that I can shorten that quote by deleting some of it's content. I believe that system works as it should, it is me seeing the meaning of words that I read did not match the intended meaning.

Thanks for the demo. In cases like this where a single tween on a single element isn't working I like to get rid of everything that isn't related to the problem, so I removed everything but the #wTop element. When dealing with an SVG its pretty much impossible to know what #wTop looks like if theres a dozen other things in there. With everything else removed I saw that the svg was completely blank. I then noticed that you had visibility:hidden set in the css #wTop{ visibility: hidden; } I suspect that perhaps you wanted the path to be hidden before the javascript runs, so I added this to your js to make the path visible TweenLite.set("#wTop", {visibility:"visible"}); Once the path was visible it made sense that there would not be any animation with the js you had TweenLite.to("#wTop",1,{drawSVG:"100%"}) A stroke naturally shows at 100% so tweening it to 100% isn't going to show anything changing. If you want the stroke to reveal itself try you need to set the start value at 0. a fromTo() tween works well for this TweenLite.fromTo("#wTop",5,{drawSVG:"0%"}, {drawSVG:"100%"})

I think that's fantastic, Jack It still doesn't really work with languages like Arabic, where, well, the whole string is a "special char" in that it's all linked.. haha. But I guess, when considering the need to handle the rtl direction on top of this current issue, it would be a lot more work overall to provide satisfactory support. Maybe for a future release! Regardless, this one addition is great already, thanks for adding it so quickly!

Just head for the home page https://greensock.com/ and click the green 'DOWNLOAD GSAP' button and choose your build. If you choose customize, it will allow you to pick which plugins you want. (That's where you'll find the text plugin link) Happy tweening.

Hi @blaasvaer If I understand your question correctly, it sounds like you might be looking for the text plugin rather than scrambleText. Here's a quick demo showing the difference. More info: https://greensock.com/docs/Plugins/TextPlugin Hopefully that helps. Happy tweening.

Hi @launchcatapult Welcome to the forum and thanks for joining Club GreenSock. I couldn't get my scroll wheel to work on the site so I'm not sure if everything is 'wired up' yet or not. After I clicked one of the menu buttons the wheel worked, but the whole scene moved really slowly. It's always harder to answer questions looking at a live site instead of demo. I think what you're looking for is the position parameter. https://greensock.com/position-parameter You would add labels to the timeline and then play() from a certain label when one of your transitions is finished via an onComplete callback. Or if you're trying to change the scene in the middle of the transition, you could make that master timeline label jump at the 50% progress point of the transition animation. If you could put together a simple demo, it would be easier to advise you. Here's a some info about that. It does not need to have your actual project assets. Just enough elements to demonstrate the question or problem would be best. Happy tweening and welcome aboard.

I don't know either, to be honest! The only thing I can guess is what I did with the codepen above, where each character is pushed back to a separate string after the animation, to let the browser handle the joining. It is definitely a complex issue and one that someone who does speak Arabic would need to weigh in. I assume similar issues arise with other languages, like most of the ones used in Asia for instance. It is a bit of a can of worms

I was thinking that as well, chances are with a language like that you would not want animation by character anyway. Of course that's just a guess.

Currently your special character finds character matches, I was thinking you could also define them as an array of slice positions from the original text string. I.e. [[0,7],[12,17],[20,24]] sort of thing. This would allow you to specify any portion(s) of the original text as a grouped object.

That's probably because there's no more 3D transforms on the element. When there are any 3D transforms, most browsers treat it COMPLETELY differently from a rendering perspective, layerizing it and pushing it over to the GPU to handle in 3D space.

Thank you Jack

Here's a basic PIXI container move that should get you started. Happy tweening.

Perhaps it is because it is the very first forum I am participating in and therefore I am reading everything literally being afraid to do something wrong).

Learning Gems Article has just what I needed! Thank you again.

Thanks for pointing that out. We'll look into it ASAP.

Wow! You did it!

Yep - free to use. <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/1.20.4/plugins/TextPlugin.min.js"></script> Happy tweening.

I've updated my pen above to work without classes, if you're interested. The function that uses the classes is still in there too for reference.

Hello everyone, I apologize in advance for the noob question. I've been learning GSAP and I'm loving it! Here a slight challenge that I'm currently facing. I have an element that I want to move in a circular motion across an origin. The element however, must keep its orientation fixed. Think of how a Ferris Wheel rotates while the carts stay fixed. The following snippet won't work since the element will not keep its orientation. TweenMax.to('.cart', 5, { rotation: '360_cw', transformOrigin: "140 15", ease: Power0.easeNone, repeat: -1, }) Checkout the codepen below to see what I mean. The only way I could solve this is to use the Bezier Plugin. Here is my attempts: const RADIUS = 125; const ARROW_RADIUS = 15; const getCoord = (index, num) => { const angPI = index * 360 / num * Math.PI / 180; const x = Math.cos(angPI) * RADIUS + RADIUS - ARROW_RADIUS; const y = Math.sin(angPI) * RADIUS + RADIUS - ARROW_RADIUS; return { x, y }; }; let points = []; for (let index = 0; index < 360; index++) { points.push(getCoord(index, 360)); } TweenMax.to('.cart', 5, { bezier: { type: 'thru', values: points, }, ease: Power0.easeNone, ease: Power0.easeNone, repeat: -1, }) Here is the codepen link below: While it works, I was wondering if there is an easier approach in GSAP to achieve this behavior.

Did someone say like a ferris wheel? I had this laying around from 4 years ago. Great stuff, Craig and Blake!

Hi @alahmadiq8 Welcome to the forum. How about something like this? I just grouped the contents of the circle and rotated it in the opposite direction with an equal duration and ease. Hopefully that helps. Happy tweening and welcome aboard.

Oops! I just realized you were animating position. Object.defineProperties(THREE.Object3D.prototype, { x: { get: function () { return this.position.x; }, set: function (v) { this.position.x = v; } }, y: { get: function () { return this.position.y; }, set: function (v) { this.position.y = v; } }, z: { get: function () { return this.position.z; }, set: function (v) { this.position.z = v; } }, rotationX: { get: function () { return this.rotation.x; }, set: function (v) { this.rotation.x = v; } }, rotationY: { get: function () { return this.rotation.y; }, set: function (v) { this.rotation.y = v; } }, rotationZ: { get: function () { return this.rotation.z; }, set: function (v) { this.rotation.z = v; } } }); Then try animating just the object. TweenMax.to(myObject3d, 4, { bezier: { type: 'soft', values: [ { x: 0, y: 0, z: 0 }, { x: 100, y: 100, z: 100 } ], autoRotate: [ ['x', 'y', 'rotationZ', 0, false], ['z', 'x', 'rotationY', 0, false], ['z', 'y', 'rotationX', 0, false] ] }, ease: Power1.easeInOut });

Hello, First of all great tool for animating. I just start play with this and i want to create animation to circle around border of div. I create little pen for experiment but i can't figure out how to set transformOrgin just right. Is it possible to have some params from js as passing arguments ? If i change size of my circle div to animation follows ?

The one with the sine eases can result in some interesting movement by using different durations. You end up with a with something like a Lissajous curve.

Here you go. I added some extra visuals so you can see what's going on. The proxy (in red) is what Draggable is actually working with. The handle is controlled by a paused tween that makes use of the BezierPlugin. A progress value on every drag/throw update is calculated based on the position of the proxy element, which is then feed into the paused tween. And a version of that without the extra visuals.