PointC

Okay, I understand now. I'm not aware of any logic in place to calculate that for you (yet ), but Jack can answer that or maybe he'll add that functionality. For now I think you'd have to calculate the size of your grid and figure the index of each of those 9 positions.

The from property accepts strings "start", "center" and "end" or the index of any element in your array. https://greensock.com/docs/TweenMax/static.staggerFrom() So in your case you could use any number 0-8 and that would be the start point of the staggers. Happy tweening.

No worries — happy to help. Let us know if you have additional GSAP questions or problems. Happy tweening and welcome aboard.

You have a conflict between two tweens. The second scale tween is starting before the first finishes so you can't get all the way back to the original value because of the overwrite. The easiest solution is to remove the position parameter from the last tween or make it 1.5 so it starts after the first scale finishes. https://codepen.io/PointC/pen/EzBjWq Happy tweening.

Just ask Jack to "whip together" a time travel helper function. ?

If it were me, I'd just put the image inside the SVG and the whole thing can size as one element. Maybe something like this: https://codepen.io/PointC/pen/WBBjrJ I just made the ellipse red so you can see that it sticks and scales properly. I flickered the whole SVG for demo purposes, but obviously you can animate any elements you like. If you're looking for the image to fill the whole screen, you can just center it and clip the top/bottom or left/right depending on screen size. Here's one approach for that. https://codepen.io/PointC/pen/WBBjGy Just my two cents. Hopefully it helps a bit. Happy tweening.

Is this solved from your other thread? The pen you listed is 404 so I'm not sure what's happening. Thanks.

Nothing in your description seems too difficult. Keep in mind that GSAP is an animation engine that animates numeric values. It has nothing to do with rendering your elements. That said, how you approach the animation would depend on a variety of factors. The biggest thing would be what type of elements you'll be using. DOM, SVG, canvas? All should work fine for what you're describing. Canvas would be the most difficult to create, but the most performant with lots of circles. The gooey effect is pretty easy with SVG filters. I have some goo in this demo: https://codepen.io/PointC/pen/oqeJbo I've only created gooey effect with SVG, but you can also make it happen with canvas or DOM elements. Here's a helpful link. https://redstapler.co/create-gooey-effect-css-filter/ If you have specific GSAP questions or problems, we're happy to help. Happy tweening.

It's tough to troubleshoot since you have a working demo with divs, but it could certainly be an ID problem. Could you provide a non-working demo with the SVG? Also keep in mind that you can animate SVG properties at the group level and individual child element level. This can sometimes produce unintended results. Say a group has an opacity setting of 0.5 and one of the child elements also has an individual setting of opacity:0.5. That would actually be an opacity of 0.25 for that child. If you then animate the group to an opacity of 1, the individual element set to 0.5 would not animate to full opacity. But, as I mentioned, a non-working demo with the SVG would help us troubleshoot for you. Happy tweening.

I'm not quite sure what should be happening here, but the cloud isn't moving because you have a lowercase 'c' on your tween target. // switch this cloudOne.to( "#cloud-1", 9, {transform:"translateX(94vw)"} ) cloudOne.to( "#cloud-1", 9, {transform:"translateX(0vw)"} ) // to this cloudOne.to( "#Cloud-1", 9, {transform:"translateX(94vw)"} ) cloudOne.to( "#Cloud-1", 9, {transform:"translateX(0vw)"} ) Does that help? Happy tweening.

Gotta be honest — I thought that sentence was gonna end with "we don't allow CSS animations around here." ? Since Zach has a shiny new GreeenSock Admin badge, it's probably time to dust off the chalkboard.

I'd just like to point out — having all this in one SVG would make everything easier to control and scale. You can also use the MorphSVGPlugin.pathDataToBezier() method to make your orbit. Using a circle allows you to quickly change the radius to your liking. If you have symmetrical objects in the orbit, you can even change the scale to reverse the orbit direction. https://codepen.io/PointC/pen/wbyYwQ Just my two cents. Happy tweening.

Hi @Technics1210 I'd recommend just using an inline SVG, but we've had some discussions about injecting the SVG too. Here's a good one: Happy tweening.

Since you're dealing with two timelines here, you need to make some changes. When you play the forward timeline and then play the reverse timeline it works because that's their first play. When you click again to play nothing happens because they've already played. You can fix that by using play(0) or restart()which will play from the beginning of the timeline. Another problem two timelines creates is by playing the reverse timeline, you're not changing the reversed status of the forward timeline. My advice would be to use fromTo() tweens on both timelines and just use a forward/reverse toggle variable. This is where having one timeline to simply play/reverse makes things a bit easier. Having separate timelines targeting the same element can also cause a fight for control of the element if you click too quickly. I think this thread can help. Happy tweening.

Not quite sure what you're doing, but you can also animate the viewBox. Here are a couple of old pens that show the technique. https://codepen.io/PointC/pen/OMabPa https://codepen.io/PointC/pen/XbqBmM

Yep, GitHub — https://github.com/janpaepke/ScrollMagic/issues Looks like they now offer premium support too. https://support.scrollmagic.io/ We're happy to help with GSAP related questions and problems. Happy tweening.

From the docs: Why is my Global Timeline 1000 seconds long? That means you've probably got an infinitely repeating animation somewhere. GSDevTools caps its duration at 1000 seconds. Scrubbing to Infinity is awkward. https://greensock.com/docs/Utilities/GSDevTools Happy tweening.

More info about GreenSock licensing: https://greensock.com/licensing https://greensock.com/why-license

I'm not familiar with that plugin. Have you tried it in your project? Have you asked in the ScrollMagic forum? (SM is not a GreenSock product) https://github.com/janpaepke/ScrollMagic/issues If you have any GSAP related questions or problems, we're happy to help.

I think I misunderstood the question. I thought morph c was on the same timeline as morph a--> b so it would be automatically yoyoing between the first two labels and then tween to the end on scroll. My mistake. Looks like the above solutions will take care of the problem. Nice work @mikel and @Dipscom. ?

Unless you've used the little known zombie timeline in which case you need another method to kill it.? var tl = new ZombieTimelineMax(); tl.removeTheHead();

You'd probably want to use some ScrollMagic events to take control of the timeline. http://scrollmagic.io/docs/ScrollMagic.Scene.html#event:enter Rather than having ScrollMagic control the timeline on load, you'd have the tween/timeline playing automatically. Then you hit the trigger and tween the progress() to any position you like. Here's a demo from another thread, but shows the basic technique. The timeline is not part of the ScrollMagic scene, but when scrolling to the triggers you can pause/play it. https://codepen.io/PointC/pen/oovrxq Hopefully that helps. Happy tweening.

I'm not sure I follow your question, but I think it's safe to say there would be a solution to have the two libraries work well together for your needs. Maybe you could make a demo? Thanks.

Looks like that site is using Three.js https://threejs.org/ You'll definitely need to use canvas/WebGL on something like that for the best performance. GSAP is an animation engine. It doesn't do any of the rendering. It doesn't care what you're animating — DOM, SVG, canvas. If it has a numeric value and JavaScript can touch it, GSAP can animate it for you. Happy tweening.

ahh.... a fellow 3D animator. Cool. ? If you have any GSAP related questions as you jump back in, we'd be happy to assist. Happy tweening.