Fritz1602

Oh Boy, @ZachSaucier thank you for clarifying this. I misunderstood the docs of ScrollTrigger.kill() at this point. For me it wasn't clear, that GSAP removes the related tweens from global timeline, which it perfectly does out of the box - exactly as you said. Sorry for being such a noob and thanks a million.

Hey @ZachSaucier, thanks a million for your efforts, aspects and references. Sorry for reaching the internals of JavaScript. Yes, that was exactly the issue I wanted to fix. My clumsy code prevented JS from cleaning up, which seems to be fixed with your suggestion. From my point of view, you are a JS Internal Expert.? I wondered if something like gsap.killTweensOf(scrollerTrigger) would be a cool feature? Thank you and GSAP so much.

Hi guys, I'm trying to translate the friendly help from @ZachSaucier this thread into my code. For the first time in my life I am using a more OOP-based approach. Anyway, I'm a little overwhelmed and wonder if I really understand this correctly. In the pen I initialize 3 ScrollTrigger tweens, which I want to "eliminate" completely with the kill () method. (Regardless of whether they ran or not). https://codepen.io/fsi77/pen/ZEBGEKM What irritates me is that when the tweens have finished animating, they can no longer be found in the global timeline anyway. In my opinion, the kill function for the tweens after animation is aiming nowhere. In addition, the tweens remain in my object after the kill function. That can't be right somehow? I really wonder if I am on the right track here. Thanks in advance. Please excuse my English, I hope my question is understandable.

Hi @ZachSaucier, once more many thanks. I really can't put into words how cool GSAP and the forums are. With that in mind I am much more confident to expand my little barba app and integrate a lot more of wonderful GSAP Library. As I said. You really rock.

Hi guys, I have a generall question while starting to use GSAP with barba. I wonder if someone of you could bring light into my JS-darkness at this early point. I am trying to find a solid basic setup with both of the libraries together. barba.init({ views: [{ namespace: 'home', afterEnter(data) { initTimeline1(data.next.container); initTimeline2(data.next.container); initTriggeredTween(data.next.container); }, }] }); const initTimeline1 = (next) => { const tl = gsap.timeline({}) .to(next.querySelector('el1'),{'GSAP MAGIC'}) return tl } const initTimeline2 = (next) => { const tl = gsap.timeline({scrollTrigger:{}}) .to(next.querySelector('el2'),{'GSAP MAGIC'}) return tl } const initTriggeredTween = (next) => { next.querySelector('el3').addEventListener('click', () => { gsap.to(next.querySelector('targetEl'),{'GSAP MAGIC'}) }) } barba.hooks.beforeEnter( () => { ScrollTrigger.getAll().forEach(trigger => { trigger.kill() }); ScrollTrigger.refresh(true) } ) I leaned so far, that I have to kill the ScrollTriggers, because things dont work, if I return to the page with namespace"home". But if I reinititate the timelines, tweens and events again and again I am wondering if I am causing a memory leaks. Do I have to kill, remove, destroy all of them manually or does the garbage collection take care of things by itself? And if I have to manage the things, are there similar support functions like ScrollTrigger.getAll() for helping me out? I just read, that killAll is deprecated. Sorry for my English, and the question which may be a little off topic. Many thanks in advance

Hey @ZachSaucier you really rock! Thank you for your friendly, super competent and quick help. GSAP is so cool and luckily I still have a lot of room for improvement, as you have impressively demonstrated

Hi Guys, I am trying to create a seamless "clipMask Text Marquee", with a timeline. The tl is started (and paused) by ScrollTrigger. Basically everything works as desired, but I have trouble with resizing. The height of the text (trigger Element) is changed by a js function. After Resizing the hight, the position of the triggers become wrong. Is there a way to update them? Or is there generell a better apporach? I am not a big expert (as you guessed) and very thankful, for honest “code critique”. Furthermore I wonder, if and how I have to kill the timeline in PJAX-context. By now it works, when I kill the ScrollTrigger (before entering) the Page and call the createMarquee (after entering) again. Is this enough or is the (old and unused) Timeline (created by function) still present somewhere in memory? Sorry for my English and many thanks in advance.

Hm. Thanks a bunch. It's deep in the night here and I followed your advice and tried to isolate the problem in a smaller Webpack setup. Can't reproduce the error. In my reduced test-case everything runs as expected. GSAP is wonderful. I will dive in deeper in the next days and weeks. If I will find out the reasons, I will let you know. Once More. Thank you for wonderful GSAP and great support and your efforts.

Thank you so much. I changed my Code to this. I hope I have followed your advice in this way. var controlit = document.querySelector("#hamburger-btn"); var menuToggle = new TimelineMax({ paused: true, reversed: true }); menuToggle .set(controlit, {className:"-=closemenu"}) .set(controlit, {className:"+=openmenu"}) .to(' .top', .2, {y:-9, transformOrigin: '50% 50%'}, 'burg') .to(' .bot', .2, {y:9, transformOrigin: '50% 50%'}, 'burg') .to(' .mid', .2, {scale:0.1, transformOrigin: '50% 50%'}, 'burg') .add('rotate') .to(' .top', .2, {y:5}, 'rotate') .to(' .bot', .2, {y:-5}, 'rotate') .to(' .top', .2, {rotation:45, transformOrigin: '50% 50%'}, 'rotate') .to(' .bot', .2, {rotation:-45, transformOrigin: '50% 50%'}, 'rotate'); controlit.addEventListener('click', (e) => { menuToggle.reversed() ? menuToggle.restart() : menuToggle.reverse(); }); Unfortunately, nothing has changed. Dev mode is great. Production mode remains strange. I don't know, if I got the question right. In dev Mode all my code is running fine just importing like this. import TweenMax from "gsap/TweenMax"; After your kind hint with tree shaking I tested the following without success for production mode. import {TweenMax, TimelineMax, CSSPlugin, AttrPlugin, BezierPlugin, TweenPlugin } from "gsap/all"; const plugins = [ CSSPlugin, AttrPlugin, BezierPlugin, TweenPlugin ]; Beside the tiny hamburger Animation above, I am doing some staggered Animations for menu items, which works perfectly fine in dev and production mode. TweenMax.staggerTo(primaryMenuLiItems, 1, { ease: Back.easeOut, autoAlpha: 0, x: 50 }, .1 ); It seems to be an issue with the transform-origin for "path.top" and "path.bot". In dev Mode the following element style results in a perfect "X" transform-origin: 0px 0px 0px; In production mode the following element causes the strange result transform-origin: 0px center; I am heartbroken to make so much effort and apologize again for my English. Thanks a million.

Many thanks for the friendly welcome and the directional advice. Unfortunately, no improvement has yet occurred. If I understand correctly, I have to separately import and address all plugins that have led to successful animation in dev mode. Is there an easier way to find this out? So far I have - unfortunately without success - tried the following import {TweenMax, TimelineMax, CSSPlugin, AttrPlugin, BezierPlugin, TweenPlugin } from "gsap/all"; const plugins = [ CSSPlugin, AttrPlugin, BezierPlugin, TweenPlugin ];

Hi there, this is my very first Question and I am a noob according GSAP, Webpack and this forum. I hope that this is the right way and place to ask a question and I provide all necessary information. What I am trying to achive is learning to work with wonderful GSAP (TweenMax and TimelineMax) and Webpack4. Everything is working fantastic with "-- mode development". I imported GSAP this way in my nav.js file. import TweenMax from "gsap/TweenMax"; When I switch to -- mode production in my build process, the animation runs, but instead of an "X" it ended like shown in the uploaded image. Any hint in which direction I could go further would be most welcome. Sorry for my English and many thanks in advance.