Leaderboard

One other tip: if you only call GSDevTools.create(), it's global so it tries controlling EVERYTHING which can be challenging especially when you're creating new tweens & stuff. It's often better to wire it to a particular animation like: GSDevTools.create({ animation:yourTweenOrTimeline, globalSync:false //now it only cares about your one animation, nothing global! });

Yep, exactly right. Right again Indeed, we place a huge priority on performance since animation is the most performance-sensitive part of UX. In all my years of doing this, I think this may be the 2nd or maybe 3rd time someone has wanted this kind of functionality, so it'd feel weird to make everyone else pay the performance (and file size) penalty for adding that functionality, especially because it's pretty simple to add it externally. For example, you could just implement an add() and remove() (or to()/from()/whatever) function in your own code that has the event dispatchers built-in. Think of them like wrappers around GSAP's functionality. See what I mean? It's just one more layer of abstraction.

Hi @Alexandra Spalato, Probably there is a conflict with the css animation for the buttons .button { display: inline-block; padding: 15px 15px; box-shadow: 0px 10px 20px rgba(0, 0, 0, 0.25); -webkit-transition: all 0.4s ease-in-out; /// !!!! transition: all 0.4s ease-in-out; /// !!!! font-family: 'Avenir'; font-weight: 500; font-size: 1.4rem; font-size: 1.6rem; color: #ffeae1; text-transform: uppercase; border-radius: 4px; border-bottom: 5px solid; letter-spacing: 2.4px; } Kind regards Mikel

Hey Laurie and welcome. Great job with the demo! Your approach is a good one. The main issue is that you should be animating the backgroundColor property because the background property is just shorthand for a bunch of other background properties. Doing that fixes your animation issue. https://codepen.io/GreenSock/pen/mZLrPp?editors=0010 As for your approach in general, like I said yours is a good one. One other potential issue is that you are creating all three timelines for each box but only using 1 of each 3, which is somewhat of an issue though. You could avoid that by simply creating the timelines before the loop, putting them into an array, and referencing to the array in the loop. But I might change the whole logic to make it a bit simpler and easier to update by using an array of objects to determine the parameters for each box like so: https://codepen.io/GreenSock/pen/vqjXWd?editors=0010

Hi @Alexandra Spalato, Welcome to the GreenSock Forum. It could work like this: https://codepen.io/mikeK/pen/zVjOJa Info to .staggerFrom: here Happy tweening ... Mikel

https://codepen.io/PointC/pen/EBLvQg I assume that's the correct behavior since DevTools takes control of everything. I've never tried any timeline control buttons with GSDevTools because I just control everything with the built-in DevTool controls while debugging which is the beauty of using DevTools.

@mikel wins the award for the best detective skills. ?

There are no callbacks for those events you listed, but you'll have to be firing some sort of function to make those things happen so you can put the necessary logic or action in those functions.

Hello mapps-video. You can check out all of the properties, methods, and callbacks of TimelineMax in the docs for TimelineMax. Let us know if you have any particular questions about their usage or need help with your particular use case (in which case a CodePen of your issue would greatly aid us in helping you).

yPercent assumes that the value will be a percentage in number form like your first example, so I would recommend yPercent: 100.

There has to be something producing that effect. My guess would be a conflict between GSAP and CSS as @mikel discovered. Are you sure you've removed all the CSS transitions for the button class? (and any other class that may be applied to that element) It looks like it's been set to something like a Power4.easeIn, but no ease is specified in the tween so it's coming from somewhere. Trying removing the GSAP tweens and see what happens. It's extremely difficult to look through all your files. If you can reproduce the problem in a simplified demo, we could better assist you.

Hi Rich. This sounds more like a Flash/Animate CC question than a GSAP question. I'm not very familiar with how that software exports videos these days but I wouldn't be surprised if it doesn't really honor script-based updates. I'm sure there are tools out there that can take a SWF and convert it to video, but I'm not familiar with them, sorry. Maybe someone else around here knows. If you have any GSAP-specific questions, we'd be happy to help.

Hi again @troymartz, I moved your thread to the main GSAP forum. We're glad you're excited about GSAP and thank you for joining Club GreenSock. Your post has a lot to go through so you may want to break it down into smaller bites with more GSAP specific questions or goals. That will probably yield more responses from the community. Happy tweening and welcome back.

I'm not 100% sure what you're trying to do, but to animate filters like that you'll need to use the attr plugin. (auto loaded with TweenMax) Here's a really basic example: https://codepen.io/PointC/pen/gNXXXQ Hopefully that helps. Happy tweening.

Try this one. They're not 100% complete, but should be ok for normal usage. npm install --save @types/gsap If you import files individually like this... import { TweenLite, Linear } from "gsap/TweenLite"; import { TweenMax } from "gsap/TweenMaxBase"; import { TimelineMax } from "gsap/TimelineMax"; import "gsap/CSSPlugin"; Or all of them like this this... import { CSSPlugin, TweenMax, TimelineMax, Linear } from "gsap/all"; Then you'll need to declare the modules in a d.ts file somewhere. So something like this. This isn't complete. Just showing how. declare module "gsap/TweenLite" { export { TweenLite as default, TweenLite, Animation, Ease, Linear, Power0, Power1, Power2, Power3, Power4, TweenPlugin } from "gsap"; export class EventDispatcher { } } declare module "gsap/TweenMaxBase" { export { TweenMax as default, TweenMax } from "gsap"; } declare module "gsap/TimelineLite" { export { TimelineLite as default, TimelineLite } from "gsap"; } declare module "gsap/TimelineMax" { export { TimelineMax as default, TimelineMax } from "gsap"; } declare module "gsap/CSSPlugin" { class CSSPlugin { } export { CSSPlugin as default }; } declare module "gsap/all" { import CSSPlugin from "gsap/CSSPlugin"; export { CSSPlugin }; export * from "gsap/TweenLite"; export * from "gsap/TweenMaxBase"; export * from "gsap/TimelineLite"; export * from "gsap/TimelineMax"; }

You didn't really set it up for touch events. But I know, it's a little confusing and complex. Touch events are very different, and you've also gotta consider how the various browsers implement them (Android and Apple use TouchEvents, but Microsoft uses PointerEvents). I don't have time to go into all the specifics but I'd recommend Googling about the differences. To make your demo work on iOS or Android for just one touch, you could just put this at the very top of your getMouseSVG() function: //if it's a touch device, grab the first changed touch event because that's what has the clientX/clientY values if (e.changedTouches) { e = e.changedTouches[0]; } Here's one link you might want to read: https://developers.google.com/web/fundamentals/design-and-ui/input/touch/ Again, that code I gave you above isn't intended to be a bulletproof solution for every browser and all multi-touch scenarios - I just wanted to get you going in the right direction Happy tweening!