arl1nd

Thank you @Rodrigo for your very good explanation. I actually build WordPress themes and prefer to use GSAP in isolated mode to avoid conflicts with other plugins (had these issues in the past). I was trying to access a globals window.gsap and window.ScrollTrigger which was very strange why they existed, but just then realized they were exposed from a plugin installed in the WordPress and not the JS file I thought it was exposing them. It was my mistake. Anyway, thank you for your input, really helpful stuff. Best, Arlind

Nevermind, I found there were some other plugins exposing it and it was not the GSAP causing it.

I've been using GSAP (GreenSock Animation Platform) in my projects, particularly the GSAP core library and ScrollTrigger. However, I've noticed that even though I'm using ES6 imports like this: import { gsap } from 'gsap'; import { ScrollTrigger } from 'gsap/ScrollTrigger'; The gsap and ScrollTrigger objects somehow still end up being exposed globally. I've gone through the documentation, but I couldn't find a clear solution on how to isolate these instances and prevent them from being disclosed in the global scope. Is there any way to achieve the desired result of keeping my GSAP core and ScrollTrigger instances isolated and undisclosed in the global scope?

Totally understandable. Well, this is the scenario: because I provide my StickyHeader library as global variable already initialized as window.StickyHeader (in a bestselling WordPress theme) which uses ScrollTrigger, and users can access custom functionality such as StickyHeader.switchLogo or StickyHeader.setTransparentHeader so I thought there would be a good way to simply forward JS snippets for my theme customers for examle: StickyHeader.on( 'toggle', function( scrollTrigger ) { // Sticky mode if ( ! scrollTrigger.isVisible ) { this.switchLogo( { src: '...', width: 100, height: 50 } ); } } ); But I'll manage to find a way to fix this. Thank you very much for your help.

Actually, the .addEventListener() function works on static way, its not possible to add onToggle, onEnter, onEnterBack, onLeave and onLeaveBack.

Thank you very much @ZachSaucier for your swift reply. Events: Sorry I didn't saw that function even though I read the docs, I thought would be eventCallback. Have a great day and thank you once again for your fast support.

Hi there, Congratulations for your brilliant new plugin ScrollTrigger, this seems to be a life saver for me in lot of situations. I am trying to adapt ScrollTrigger to build a complex sticky header and I am looking for few advices or you can take as suggestions to add as new features in new the upcoming updates: 1. Events Is it possible to add Events just like for GSAP animations with eventCallback method. I am using ScrollTrigger.create so there will be a situation when I want to add an event callback after the initialization. For example: let sample = ScrollTrigger.create( { trigger: '.selector', } ); // Later in code if ( certainCondition ) { sample.eventCallback( 'onToggle', ( self ) => console.log( self.isActive ) ); } 2. In my case I am building a sticky header scene where I simply need to toggle fixed class (without pining) the element, so in this case, I would prefer using only a starting point but a NULL ending point. So my question is, is it possible to have no 'end' position for scroll trigger? Simply I can track when elements enter certain scroll position: let toggler = ScrollTrigger.create( { trigger: '.site-header', onToggle: ( self ) => console.log( self.isActive ), start: 'top top', end: null, } ); The current version will trigger twice onToggle function. I hope my explanation is clear. Best, Arlind

Thank you Jack, really appreciate the efforts you put to fix all the issues and for providing such a great support.

Hello again, I've been altering timeline duration (that previously had duration of 1 second) to timeline.duration( 5 ) however when I check timeline.timeScale() it returns still 1 (and also the animation duration is not affected at all), shouldn't that be different? Am I doing anything wrong or this is an issue of current version of GSAP. For more please refer to the codepen example.

Thank you for helping with this. Really appreciate it! The solution from @OSUblake seems to do the trick as a quick fix.

Hi there, I was wondering if there is a way to namespace "gsap" instance to avoid conflicts with other libraries that import gsap explicitly. Main reason behind this is because I develop WordPress themes, and so other plugins may include gsap library in different versions as well, so what I wanted is a custom build only for my theme and not interfere with other possible instances of GSAP. How can this be done? I know this may not be a good practice to include two or more versions of GSAP on page but with Wordpress this issue needs to be resolved this way I guess. Thank you

Dear Jack, Thank you for taking into consideration and adding this intuitive logic for unlinked tweens from their parent timeline to live forever free (until added again). Now I feel I am more in control of the detached tweens because the way it was behaving before was harder to control the animation and parent timeline. Keep up with the great work, Arlind

Hello everyone, This is my first post here. I am writing about an issue that is messing my mind. The example is simple so you can try on your own, lets start with timeline and three children: var t = gsap.timeline( { paused: true } ), myObj = { width: 0 }, a = gsap.to( myObj, { duration: 0.8, width: '+=100' } ), b = gsap.to( myObj, { duration: 0.7, width: '+=200' } ), c = gsap.to( myObj, { duration: 1.1, width: '+=300' } ); t.add( [a, b, c] ); After that, removing the tween "b" works fine: t.remove( b ); So by calling t.getChildren( false ) returns 2 tweens which is also fine. However, when I tweak the "b" tween after removing it from timeline "t" it causes unexpected behavior for me at least. Lets say for example setting progress to 50%: b.progress( 0.5 ) The timeline will return 3 tweens again, and the "b" tween is assigned as the first element in timeline that is previously removed from. Is there anything here I am doing wrong? Thank you. P.S. The same code works differently (correct) with version 2.1.3 of GSAP -> https://bit.ly/2tMK2C6

Hi I am theme developer in ThemeForest and I use GSAP for my theme, more exactly I use TweenMax because of advanced functionality it offers, however the problem is that when user purchase my theme, they include some sort of plugins, which in this case one of them uses TweenLite library, so its conflict error and GreenSock gives me this error: http://cl.ly/ZTax So, what is the best solution in this case, I must use TweenMax, while other plugins may include or not TweenLite as well. Thank you very much

Hello, I am wondering if I am able to use (include) the GSAP Javascript platform in my upcoming product on Envato, precisely on ThemeForest WordPress theme, by purchasing the Corporate license? Waiting answer from the developer Jack Doyle Thank you in advance