Leaderboard

Hi @Raistlin That's a nice effect. Are you asking if that website uses GSAP or just how to make something like it in general? As far as I can tell, they're using CSS transitions. This would normally fall outside the scope of GSAP support, but coincidentally I'm in the middle of creating something quite similar for some interactive infographics so I'll show you what I'm doing. I'm using SVGs in my project, but you can do it with some plain old divs too. The secret is setting the origin point for the divs so they go around the circle correctly. That website is using a pretty big parent circle (3000px) so they set the origin point of the divs to the center of that circle (1500px) and then rotate them. The fade at the top and bottom is accomplished with an additional div over the top of everything with a gradient background image that's transparent in the middle. Here's a basic example of what you could do: I'm manually setting the start rotation of each box with a set() tween, but if you had a lot of elements, you could get them to their starting positions with a loop too. To get the infinite part to work, I simply set() the rotation of each box back to the beginning as it drops down out of view. I just use a simple counter to pick which box is set back to the beginning and when the counter reaches 1, I reset it back to 6. Again, the fade-out at the top and bottom is created with a gradient div over the top of everything. There would be other ways to approach this, but this is how I'd do it. Hopefully it gives you a starting point. Happy tweening and good luck with your project.

And just an FYI if you ever want to know what GSAP has set as the x, y or any other transform related value you can log out myElement._gsTransform. You will get an object that has all of the properties shown below Object { force3D: "auto", perspective: 0, rotation: 0, rotationX: 0, rotationY: 0, scaleX: 1, scaleY: 1, scaleZ: 1, skewType: "compensated", skewX: 0, skewY: 0, svg: false, x: 100, xOffset: 0, xPercent: 0, y: 0, yOffset: 0, yPercent: 0, z: 0, zOrigin: 0 } open console to see values...

One of GSAP's specialties is dealing with transforms. It solves all kinds of problems (browser differences, bugs, SVG quirks, as well as always delivering a consistent order-of-operation). There's actually a lot of work involved in parsing an elements initial transform state (the browser reports it as a matrix() or matrix3d() string, so GSAP must pull apart all the components like x, y, scaleX, scaleY, rotation, skew, etc. from that). It caches those values in order to maximize performance. Typically when someone is using GSAP, they just let it handle all the transform stuff, so this strategy works great. However, it sounds like you're trying to use GSAP for editing/animating the transforms and then you're manually altering them directly (outside of GSAP), thus when GSAP uses its cached values it isn't delivering the results you wanted. Don't worry, there's an easy fix - you can force GSAP not to use its cached values by adding parseTransform:true to your next tween. However, I strongly recommend just using GSAP to do ALL of your transform-related stuff because it'll maximize performance, minimize bugs that you run into, and save you some headaches. So instead of directly setting transforms like element.transform = "matrix(1,0,0,1,0,0)", I'd do TweenMax.set(element, {x:0, y:0, scale:1, rotation:0}). Does that help?

Hi @hanslibuzli GSAP taps into the RAF ticker requestAnimationFrame() web API. But the scroll event is firing before the RAF is fired, since RAF is fired on every frame tick, whereas the scroll event is fired at a very high rate. The best way to optimize scroll performance is with RAF like your trying to do but also taking advantage of debouncing. But you might want to look into this article by Paul Lewis regarding this https://www.html5rocks.com/en/tutorials/speed/animations/ You might also want to look at throttling the scroll event. Happy Tweening!

Sure, GSAP can do everything anime can do plus a lot more. And GSAP is faster too. It looks like the demo you provided leverages some other helper classes pretty heavily, and anime was only used for small portions. Here's a fork where I swapped in GSAP for the anime code: The structure of things seemed a bit convoluted so I may have missed something, but it appears to work just fine with my edits. Is that what you were looking for?

Thanks @Jonathan for the detailed followup! Sometimes all you need is the right direction to be able to google Thanks for taking the time!

Hello @hemmoleg By using target.style.transform matrix(), it will just set the transform with that matrix value. Which just applies a static transform. By using TweenLite.to() with your transform x, you are animating it. But in this case if the initial value of translateX() is 0, then using a to() tween to animate x to 0 so there would be no movement to animate. 0 => 0 is 0. Also the syntax is wrong for your to() tween, it is missing the duration parameter. See to() docs: https://greensock.com/docs/TweenLite/static.to() TweenLite.to(target, duration, vars, position); // wrong syntax TweenLite.to(target, {x:0}); // right syntax TweenLite.to(target, 1, {x:0}); But the equivalent to target.style.transform is really a GSAP set() method. Which is a zero based tween at its core. See set() docs: https://greensock.com/docs/TweenLite/static.set() TweenLite.set(target, {x:0}); Also keep in mind that when using GSAP that it does all the heavy lifting for vendor prefixes for various browsers and browser versions. For example if the browser is webkit.. the style.target.transform would be element.style.webkitTransform so you would have to use both. This way you can target both webkit and non webkit browsers. target.style.webkitTransform = "matrix(1, 0, 0, 1, 0, 0)"; target.style.transform = "matrix(1, 0, 0, 1, 0, 0)"; But GSAP does all that for you so you worry about animating and not cross browser compatibility. Does that answer your question? Happy Tweening UPDATE: I see you added a codepen thank you.. When GSAP animates i only see transform: matrix(1, 0, 0, 1, 100, 100); on the element inline style attribute.

You and @Jonathan pretty much covered what I was going to post. Basically that SVG is downright crazy!!! I've never seen such a complicated SVG before. Graphically it doesn't look complicated, but it took Illustrator and Inkscape around 10 minutes to load it. What's weird is that you can draw it immediately to a canvas element without any problems or delays. 630kb is the file size. The size in memory will be MUCH higher than that. If your image is 3000 x 2500, and each pixel is 4 bytes... 3000 * 2500 * 4 => 30,000,000 => 30MB On a HiDPI display like a phone, your SVG would be even higher than that. If the device pixel ratio is 3, then the browser would be drawing your SVG at 9000 * 7500. 9000 * 7500 * 4 => 270,000,000 => 270MB!!! And now your phone is out of vram! You'll probably need to break your image up into smaller images, and only display what is visible with a little buffer around the edges. Pretty much the same thing that tile-based games do. https://developer.mozilla.org/en-US/docs/Games/Techniques/Tilemaps

If you remove all her JavaScript, you can see that her design is responsive anyway. Most probably you are creating logo using SVG which is vector graphics and is responsive by default. It will be best if you post a simple codepen demo showing your problem and expected behavior.

Sure, you could just wrap that in a function and reuse it like this: That way, it's much easier to tweak that animation in just one spot. There are a bunch of ways you could do this actually. Does this help?

@Carl Tweening a Timeline ... wow. This is great ! Thank you so much.

Thank you very much for your answers! Super helpful and easy to understand. It doesnt matter to me if i use element.transform = "matrix(1,0,0,1,0,0)" or Set(). I just wanted to know whats going on under the hood so i can better understand what is happening.

Nice work, @mikel!

That's the one @mikel! Many thanks and the same to you @Sahil I will get back to you if I have any problems.

@PointC, @OSUblake, @Carl, @lennco Having spent sometime exploring your various suggestions I have realised I was approaching the problem from the wrong angle. The answer has been to not try to integrate Greensock tweening WITH / INTO Babylon.js renderloops but to use Greensock tweening for all the diving animation and using timeScale to stop and start the dive as needed. I feared a Greensock tween would not allow other Babylon.js operations while it was being executed but this proved not to be the case. So with your help, the problem is solved. Again many thanks. Richard C

Hey, Thanks for the quick replies The answers from both @Carl aswell as @GreenSock solved it! @GreenSock, thanks for the clear explanation and for converting that piece of svg. Our company has an Club GreenSock account but I rather use my personal account on the forum so I will keep that plugin in mind! @PointC, I 'll give it a read.

Hi @HindBeast, I am not sure ... But something like this could look like a solution: Happy tweening! Mikel

the way I understand it you need a repeating animation to happen for the entire duration of another animation and all animations need to be in the same timeline. I would suggest instead of putting the repeating animation in the timeline, just use tweenTo() to create a tween from the repeating animations start time to the end time of the other animations. Using PointC's great demo... var rain = new TimelineMax() rain.set("#stage", {xPercent:-50, yPercent:-50}); rain.set(".rain2", {y:-500}); rain.to(".rain1 , .rain2", 1.5, {y:"+=500", repeat:-1, ease:Linear.easeNone}); var box = new TimelineMax(); box.to("#box", 3, {x:600, ease:Linear.easeNone}); var main = new TimelineLite({id:"main"}); main.add(box); main.add(rain.tweenTo(box.duration()), 0) GSDevTools.create({animation:"main"}); DevTools now has a finite time and it controls one timeline which includes all the animations. Docs for TimelineMax.tweenTo()

Hi @kailash I think a better approach might be using the technique @PointC shows here. It doesn't require using the same color as the background.

Quick Tip: Animating dashed strokes with the DrawSVG plugin I've seen a few forum questions about animating a dashed line in SVGs. The DrawSVG plugin won’t draw a dashed path. If you try, it will remove your stroke dash array and turn the stroke solid. DrawSVG works by making one big dash and animates the offset. But you can create this effect with one extra step during the SVG creation process. Simply create your dashed stroke(s) as usual and then: Duplicate your dashed path Remove the dashes of the duplicate Make the duplicate solid white (very important). I also like to add a few pixels to the duplicate stroke width for safety This new solid path stroke will act as the mask for your dashed stroke. This gives you the ability to animate the appearance or disappearance of the dashed stroke by animating the mask path with the drawSVG plugin and maintain full control of the dashed-stroke color, width, dasharray etc. I’ve created a CodePen to show how this can work for basic shapes, squiggly lines and maps. Behold the amazing, exciting and groundbreaking dashed lines demo: http://codepen.io/PointC/full/zrQLvO/ o.k. – maybe it’s not that exciting Hopefully it helps someone with this type of effect though. One additional note: my demo utilizes the DrawSVG and morphSVG plugins. You can experiment with these on CodePen, but to use them in the wild you will need a Club Membership - which I highly recommend. Happy animating everyone.

Oh, that's because you're animating top/left which browsers only allow on whole pixel values. The pixel snapping is what's causing the jerky animation. That's not a GSAP issue. It would be much smoother if you animated x/y instead of top/left because x/y are transforms which use sub-pixel rendering.

Yes, you can use [docs id=js.TweenLite.delayedCall()" linktext="TweenLite.delayedCall()] to wait any amount of time and then fire a function that stops a timeline like: var tl = new TimelineMax(); var maxAnimationTime = 5; TweenLite.from(".banner", 0.5, {autoAlpha:0}) tl.staggerFrom(".box", 0.3, {y:-50, opacity:0}, 0.1) .from(".gs-logo", 0.5, {opacity:0, scale:0.5}, "rotate") .to(".box", 1.6, {rotation:360, ease:Linear.easeNone, repeat:-1}, "rotate") TweenLite.delayedCall(maxAnimationTime, stopAnimation); function stopAnimation(){ tl.pause(); } http://codepen.io/GreenSock/pen/oXKKVJ?editors=001

I'm glad that helped you, but it seems counter intuitive to the rest of the GSAP API which has a consistent method of timeline placement, with plain numbers being absolute, and "+=0" / "-=0" strings for relative placement. Simply using timeline.set({}, {}, "+=4");accomplishes the same thing and requires no additional methods added. If you really prefer to use one this is much shorter, and still consistent with the GSAP API: TimelineLite.prototype.addSpace = function (position) { return this.set({}, {}, position); }; Usage: tl.addSpace("+=4"); // adds 4 second space at the end of the timeline I would avoid calling it addDelay, as delay already has a given meaning in GSAP that is different to what this function provides.

Yes an easy way to extend a timeline to fit an exact duration is to add an empty set like this: var timeline = new TimelineLite(); timeline.set({}, {}, 5); timeline.duration(); // == 5