OSUblake

First, you are missing some necessary files. It's usually better to just load TweenMax as it contains everything you need. https://cdnjs.cloudflare.com/ajax/libs/gsap/2.1.3/TweenMax.min.js I'm not exactly sure what you're trying to do here. Maybe something like this? https://codepen.io/osublake/pen/ZdBdvN

Just add your array to another timeline. var mainTimeline = new TimelineMax({ repeat: -1 }) .add(tmArr) If you need more help, please provide a simple demo.

Hi Ayman, I just noticed your PM. I made these demos more as demonstration of how to visually manipulate connectors. As I stated earlier in this thread, handling the logic to make it fully functional is really complicated and beyond the help that can I offer in this forum. I think using a declarative framework like React could really simplify a lot of the complexity. And I know there are other libraries that can do this sort of thing. I would try figuring out what this tool is using. It looks like a good starting point. http://idflood.github.io/ThreeNodes.js/index_optimized.html#example/rotating_cube1.json

Please don't ask another question in a edit because we don't get notified. Just make a new reply instead. Like I said above, your video isn't valid. You can't link to YouTube like that. Use a real video file. https://codepen.io/osublake/pen/d2901d1c90cebbfd4dbdf747c5e44c2e

You don't even have a valid video. Callbacks with parenthesis are called immediately. TweenLite.to(textContent, 0.7, { opacity: 0, delay: 2.5, onComplete: this.playVideo(video) // BAD }); TweenLite.to(textContent, 0.7, { opacity: 0, delay: 2.5, onComplete: this.playVideo // GOOD onCompleteParams: [video], // GOOD callbackScope: this // GOOD }); And it kind of pointless to pass in the video to your playVideo method when it's already a property of your class. playVideo() { this.smokeVideo.play(); this.smokeVideo.playbackRate = 1.5; }

And actually, I don't think you should be adding an event listener at all in your JavaScript. That should be in your template. Have it call a method that will reverse this.timeline.

When using a framework like Vue, you should use refs instead of selecting elements. https://codingexplained.com/coding/front-end/vue-js/accessing-dom-refs Your animation method is rather large. Try splitting it up into logical pieces. Searching for a class name is something you do in jQuery. You can pass arguments into your animation method so you know what button is being pressed. Now the big issue is your back button. You're adding an event listener to it every time an animation plays. When you click it, it's going to reverse every single timeline you've ever created. Consider saving the timeline when you create one. That way you can always refer to the current timeline and not some timeline that was captured on previous plays. this.timeline = new TimelineMax(); Also, I don't understand why you need to use clearProps.

No, that's for using the plugin by itself. Check out the throwProps properties in the draggable docs. https://greensock.com/docs/Utilities/Draggable Draggable.create(".drag_item", { bounds: $('.drag_zone'), edgeResistance: 0.9, throwProps: true, throwResistance: 2000 // <-- HERE });

?

I honestly think you're chasing after phantom users. Be sure to check out some of your own analytics. You might be surprised at how rare real IE users are. And browsers ignore CSS they don't understand, so there is a fallback. a { /* FALLBACK */ color: #7F583F; color: var(--primary); } Also, you can serve pages based on the capabilities of the browser. I do this all the time for older browsers.

I think that might be a little skewed as the government is one the largest the users of IE. The government also has special contracts with Microsoft for continued support. This table might be a little more realistic. https://caniuse.com/usage-table I understand why clients want to support every browser, but I try to get them to rethink that... maybe by charging them extra to support IE with all the bells and whistles. ? BTW, one the reasons Edge is moving over to a Chromium architecture is to allow Edge to be installed on older Windows machines. In theory, that should lower IE's usage statistics.

I don't think there are any good polyfills for CSS vars. Can you objectively justify supporting IE11 i.e. do you have any data to back up why you need to support IE11? When developing/engineering stuff, there are certain tradeoffs that you must make. You're missing out on a lot of great features by purposely supporting IE11.

A one-liner... TweenMax.to("#right-container", 1, { "--width-pct": 100, "--width-rem": 4 }); https://codepen.io/osublake/pen/348b53aa3d39c06a9bf3eba7e0359bc8

Looks like you didn't load the ModifiersPlugin. https://cdnjs.cloudflare.com/ajax/libs/gsap/2.1.3/plugins/ModifiersPlugin.min.js https://codepen.io/osublake/pen/cd4870da8a3e1e93ed1734946d7ec49e

My demo literally shows you how to use calc. GSAP cannot animate calc like you want because the browsers reports the width in pixels.

If you want to animate calc, then use CSS vars kind of like this. https://codepen.io/osublake/pen/OvbqXL If you need more help, please provide a demo. Pictures are not helpful.

It doesn't need the CSSPlugin. It's React for PixiJS. I've seen demos of it working fine on CodePen, but I'm on my phone so I'm notg oing to search for them right now.

You should probably mention what you did try, and how you're building site, otherwise we're just shooting in the dark here. I would start by getting rid of that require statement. You shouldn't mix and match import and require statements like that. Also check out the docs. https://greensock.com/docs/NPMUsage

I completely understand your question. The problem has to do with the positioning and z-index of some of your elements. Make a simple demo and I will show you. It's a CSS issue. This question has been asked more than once, like here.

I can understand why you don't want to do batch processing, but your tool works better than other tools out of the box. ? I guess another suggestion would be to do improve the comparison between the original and current image. Squoosh does a good job of this. https://squoosh.app

I can't help you without a demo, but this has nothing to do with GSAP. Please read about the stacking context. https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Positioning/Understanding_z_index/The_stacking_context

When using any type of framework (Angular, React, Vue, etc) you should ALWAYS access elements through reference variables (refs). Using selector text is bound to cause problems. You mentioned you were using React, so you might want to check out this page. https://greensock.com/react

Just add GSAP and Vue to a CodePen, StackBlitz, or CodeSandbox demo, and share the link. I think checking out some of Sarah Drasner's stuff on CSS tricks might help you out. https://css-tricks.com/native-like-animations-for-page-transitions-on-the-web/ https://css-tricks.com/intro-to-vue-5-animations/ And maybe this article https://blog.usejournal.com/vue-js-gsap-animations-26fc6b1c3c5a

There really is no integration as GSAP is a library. You call it when you need it, so it should work with whatever you're using. Check out the learning section and docs. GSAP's API is going to be the same whether you're using Vue or Angular. Don't worry about a "virtual DOM". That term just confuses people. With frameworks like Angular and Vue, you interact with elements through some kind of reference (refs) variable. refs for Vue https://codingexplained.com/coding/front-end/vue-js/accessing-dom-refs refs for Angular https://itnext.io/working-with-angular-5-template-reference-variable-e5aa59fb9af Again, GSAP will work with whatever you end up using, and GSAP's API is very easy. The big thing is this. Before you can use GSAP, you need to build something first. I just think it's going to be faster and easier using Vue if you have limited programming experience. Angular is a very large framework that uses TypeScript, which is not an easy language to start out with, and Angular has also been known to cause problems when building. For new people, I just think that Angular's learning curve is going to be much higher than Vue or even React. https://reactjs.org