PointC

Well, the Neuropathway Predictive Algorithm certainly explains a lot. Apparently the Rudimentary Phonics Engine from a couple years ago has morphed into something much more intelligent. With this new technology, GSAP will soon become the ultimate power in the universe. Resistance is futile. I thought the other thing this demo needed was more cowbell (Google it if you don't get the reference), but I couldn't figure out how to add that so I added some impact bursts instead. I like the way this turned out. I may tweet it at CodePen tomorrow and see if I can get it picked. Somebody may find it useful and I always enjoy promoting GSAP over there.

okay, the team finished their sweep but didn't find any bugs. They tell me that GreenSock probably has a spy satellite to monitor all the Moderators. They recommended I build an underground bunker for enhanced security. I thought the bubble slider might look neat if it stretched over to the new target rather than just floating over to it. Here's what I added. Please don't melt my brain with your addition(s). I can only handle so much GreenShock on the weekend.

I would, but I have a team coming in to sweep my office for bugs. I need to find out how you were reading my mind earlier. Perhaps our Moderator badges contain a chip that monitors brainwaves?

uh-oh, I'm in a weird weekend contest with Jack. ? It's so strange that you made that change as I was literally just thinking about making another version that wouldn't make the user wait and my email chimed with your post. Now I don't have to do the work. Well done.

Hi @bluecube That's a neat little content slider you found. I took that design and made some modifications. My version doesn't use jQuery, callbacks or class changes. It also accommodates varying content heights. Maybe it will be helpful for your project. Happy tweening.

Hi @flowen You can pre-record the values like this: tl.progress(1).progress(0); That will make the virtual playhead move to the end and then back to the beginning of the timeline. That can sometimes help with a slight stutter on the first play. If that doesn't fix it for you, a demo would be most helpful. Happy tweening.

Yep, you got it. element.style.zIndex should take care of that logic for you. I also wanted to point out the isActive() method: https://greensock.com/docs/TimelineMax/isActive That will allow you to prevent additional clicks while a timeline is playing. Maybe it could be helpful for your project. Happy tweening.

In addition to the position parameter info, I'd note that you can target multiple elements in one tween. Your tween could look like this: .to('.blue_stroke, .orange_stroke', 1, {fillOpacity: 1}) Happy tweening.

It happens to all of us. Let us know if you have any more problems. Happy tweening.

You have a typo on line 11 of your CSS: position:aboslute; Fix that and you'll be good to go. Happy tweening.

You can certainly set the z-index as part of the animation. Here's an example I made as an answer to another forum question. Hopefully that helps. Happy tweening.

I'm not sure what to tell you on that one as your pen is not using GSAP at all. ScrollMagic can use GSAP, but it is not a GreenSock product. You'll probably be able to get an answer from the support channels of those two scripts. https://github.com/idiotWu/smooth-scrollbar/issues https://github.com/janpaepke/ScrollMagic/issues If you have any GSAP related problems or questions, we're happy to help. Happy tweening.

I don't know if there are any examples using three.js, but @OSUblake has several posts about displacement maps and Pixi.js. http://www.pixijs.com/ Here are a couple: You can search the forum for canvas, Pixi, and displacement maps to find more of his info and demos. Or check his CodePen profile: https://codepen.io/osublake/ Here's a simple example from a different thread. (using Pixi) Happy tweenig.

Looks like they're using three.js and some displacement maps. https://threejs.org/

Did you try tweening a div from x:0 to x:100? ? I can understand the inability to be impressed with Blake's brilliance. You almost need to know a small portion of the GSAP platform and animation/JS in general to understand why something is so neat. No converts? I think upper management is just happy you're out there showing off the platform. Hopefully it was a fun experience for you.

I'm looking forward to a post-presentation report about how many attendees heads exploded after being exposed to Blake's wizardry. ?

Wait, what? What is this "stringFilter" ??? What is this wizardry? ? There is a never ending bundle of surprises in the GSAP toolbox.

Yeah, it can take a bit of time to go through everything, but once it 'clicks' it becomes second nature and lots of fun. Here's some more info about immediateRender: https://greensock.com/immediateRender Happy tweening.

I'm not 100% sure what you're asking, but I'm guessing it's about immediateRender. Please try this on your last tween. .fromTo('.menu-1', 1, {drawSVG: "0%"}, {drawSVG: "100%", immediateRender:false}); Does that help? Happy tweening.

Here's a super simple countdown. Happy tweening.

Well, I'm honored to be mentioned in the same sentence with Blake and Chris. ? @Dipscom if there's anything of interest to you in my CodePen collection, feel free to use it as you see fit. Good luck with your presentation.

I prefer SVGs for my little icons so I'd probably do it like this. Happy tweening.

As @mikel mentioned, you'll probably want two timelines as this animation is not a reverse() situation. One other option would be to create one timeline and then addPause() at the halfway point. Then resume() when the mouse leaves. Something like this should work. Happy tweening.