PointC

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.

You can try using TweenLite which won't load the CSS plugin like TweenMax does. Here's a good pen with all the info and links. Hopefully that helps. Happy tweening.

Yes — you can use a function to feed into the position parameter if you like. For a lot of these 'will this work' questions you could probably set up a demo and see if it works as you expect.

I'm certainly not a coding expert, but it looks good to me. My own philosophy of coding is: Does everything work as expected? Is the code as DRY as possible (or close to it)? Did I use meaningful function and variable names? Did I write myself enough comments that I can easily update this in 6 months? If I can meet those criteria for my own code, I call it a good day. Just my two cents worth.

I'm not really sure what you're going for here and I'm not at all familiar with snap, but here's a basic demo with a Draggable and viewBox zoom. You can see everything works as expected. I don't have time to dig into all your code, but I see the SVG is set to position:fixed and width/height of 100%. Combining that with a viewBox setting may be messing up some coordinates. Maybe my simple demo will give you some new ideas. Happy tweening.

Is this what you need it to do?