PointC

There would be a variety of ways to make that happen. The simple approach would be to add the boxTimeline to the wrapTimeline. Something like this: So what this does is create box timelines in a loop which are nested as children of the boxTimeline and then the boxTimeline is a child of the wrapTimeline. The wrap is now the master of all the timelines so you don't need to play() the box timeline. Make sense? Nesting timelines is a great way to work. We're kinda taking the brute force route here and I don't want to throw too much at you, but this is a fantastic resource about creating timelines in functions and returning them to the master. https://css-tricks.com/writing-smarter-animation-code/ You'll only have three timelines in your project so manually making everything is not really a big deal, but when you get into complex situations with lots or repeating code and tons of timelines, creating everything in functions makes your life easier. Hopefully that all makes sense. If it's not clear, please let me know. Happy tweening.

GSAP is an animation engine. It can animate DOM, canvas, SVG etc. If JavaScript can touch it, GSAP can animate it. All rendering is done in the browser so there isn't a plugin that will do the work for you on a grid site like the demos you posted. Some popular choices would include: Three JS https://threejs.org/ Pixi http://www.pixijs.com/ GSAP plays nicely with both of those libraries. GreenSock even has a Pixi plugin to make things easier for you. https://greensock.com/?product-plugin=js-pixiplugin Hopefully that helps. Happy tweening.

I think if you set it with GSAP before animating, you should be good to go. TweenMax.set(RGB.blue, {y: 0, x: 0}); TweenMax.to(RGB.blue, 10, {y: 20, x: 20}); Happy tweening.

There are a few things to look at here. We can take them in small bites. The first thing to understand is creating multiple timelines in a loop and controlling them all at once. Right now you're clicking on speakers and trying clear the processing timeline while restarting the tlSpeaker timeline. (tlSpeaker doesn't actually exist, but that's a separate matter). When you create a whole bunch of timelines with the same name in a loop, they'll play just fine, but controlling the group as a whole requires a small change in what you're doing. Take a look at this example: You can see that I loop through and create a timeline for each box. Now, press the play/pause button and you'll see that it only controls the last timeline from the loop. That's how you currently have your setup working and not what you want here. Now take a look at this one: It's similar, but now we loop through to create the timelines and add them to a master timeline. I also used the position parameter when adding the nested timelines to the master. You can see that the play/pause button now controls the master box timeline. Make sense? The other part (fade in) is certainly doable. My question would be do you have to click to close each one or does opening a new animation automatically fade out and close the active one? Hopefully the above demos help with creating the master timelines. Feel free to post the next part of your progress and I'll help you from there. Happy tweening.

You could possibly use a displacement filter with a SVG, but Pixi would be my recommendation. Blake has a few nice examples here: Happy tweening.

I shall hunt you down @smallio. @popflier — you're welcome to post your progress with any new questions.

Why do you need to set() it to 0? The .from() tween will take care of that for you because it will immediateRender.

Maybe just a .from tween? tl.from(".container", 1, {height:0}); Does that help? Happy tweening.

A little Draggable and ThrowProps can handle most of that slider effect for you. It's similar to one I built a few months ago. Maybe it'll help you get started. Happy tweening.

Hi @MrCapp Welcome to the forum. If I understand your desired outcome correctly, I'd probably just separate the targets. Maybe something like this: Dos that help? Happy tweening.

This thread can help with that:

It depends on what you're after here. If you want to get rid of the hover animation, you can .kill() or .clear() that timeline on click. If you want to turn off the hover while the menu is open, but want to use it again when the menu is closed, you can remove the listeners while the menu is open. Make sense? Just FYI — you have an error in your pen on line 5: white.reversed() ? white.play() : white.reverse(); There is nothing declared with that name. Happy tweening.

I know you said your project is complex, but you can always provide a simplified version of your problem in a CodePen. It doesn't have to be the full version of your project. That being said, you're basically looking to destroy the controller and clear the timeline on mobile, right? I would just listen for the resize event and if you're switching from desktop to mobile you can clear the timeline, clearProps of the targets and destroy the controller. Switching from mobile to desktop would fire the function to create the ScrollMagic controller and rebuild the tweens. Maybe something like this: Hopefully that helps. Happy tweening.

You're reviving this monster thread, huh? It's already the 7th longest thread on the forum. Are we going for the record here? ? You're already looping through with each() so you can take advantage of that. You need to find those two H3s and split them inside the loop. Maybe something like this. Does that help? Happy tweening.

Happens to all of us.

You have a typo on paused: var tl = new TimelineMax({pasued:true, reversed:false}); Fix that and set reversed to true and I think you'll be good to go.

Oh, you could trigger that Pixi displacement on hover. Or did you mean only one letter at a time would animate on mouseenter?

Filters are certainly an option. If you want to go with just a morph, I'd probably have three shapes for the morph cycle to make it feel more natural. If you can start with a path and distort it without changing the number of points, that will also help the magic of the morphSVG plugin. That's what I did in this pen: You said you didn't want to use WebGL, but Pixi makes a liquid effect pretty easy. Hopefully that gives you some ideas. Happy tweening.

Ha! It happens to all of us. @GreenSock is cranking out updates too fast for any of us to keep up with him. Here's hidden camera footage of how fast he works.

You just need to use the latest version of GSAP 2.1.2. Happy staggering.

I assume you're talking about the wheel event, right? Yes, you could do that. You'd have to add some logic to check the height of the current active section and only fire the scrollTo the next section if the bottom of the active section is above or equal to the bottom of the window. Hopefully that makes sense. Happy tweening.

Have you gone through this post on the position parameter? https://greensock.com/position-parameter

You can drop an image into a SVG and use the DrawSVG plugin to reveal it. I'd probably try to use a series of strokes with varying widths and opacity to reveal it. Or you could move to a canvas based solution and use particles to generate the smoke. Happy tweening.

The main problem is the order in which you're loading the scripts. The ScrollMagic gsap animation plugin needs to load after TweenMax so it can hijack the tweens. The indicators seem fine to me. Here's a fork of your pen. Happy tweening.

You are correct. repeat() and yoyo() are only available in TweenMax. I wish I could offer more assistance, but I have no familiarity with Cocos Creator. I don't even recall it being mentioned in the forums before today. Best of luck and happy tweening.