GM_sql

Not me, seems this is a normal behavior when someone (me) installs gsap by using a script tag.

Sure, this is part of the https://technicalseo.com/tools/robots-txt/ rapport for my page. So I'd like to ask whether these scripts shouldn't be blocked for crawlers for SEO purposes. https://cdnjs.cloudflare.com/ajax/libs/gsap/3.4.2/gsap.min.js 200 OK Script Allowed cdnjs.cloudflare.com https://cdnjs.cloudflare.com/ajax/libs/gsap/3.9.1/ScrollTrigger.min.js 200 OK Script Allowed cdnjs.cloudflare.com

Hi, I have very generic question, as in the title.

Works perfectly. Thx.

Thank you @PointC This is exactly what I'm looking for, however I still have a problem in order to coordinate the very last and the very first items between loops (purple -> green). Here the modified code. https://codepen.io/grzegorz-malinowski/pen/mdprZeM

Hi, I have a very simple animation and I need to apply the below criteria to get the the replacement effect: 1) after each animation of a single "box_info" item I need to pause the stage, say 1s, 2) after each animation of a single "box_info" item I need to restore it's style: opacity to 0. Is it possible to apply stagger, and how ? const play_intro = gsap.timeline({paused: false, repeat: -1}); play_intro.from(".box_info", {autoAlpha: 0, stagger: 1, onComplete: console.log("end")})

Thanks @OSUblake, seems I've found the solution and it's not a plugin issue. I had 3 separated css files (thus it's not possible to replicate the code in codepen) that was loading in the order (mobile - all rules, tablet, desktop).

Hi, I have a problem with ScrollTrigger.batch. I had decided and have switched to mobile version as a starting layout and this script doesn't work in case of other predefined layouts. What's wrong? Seems the opacity is still set to 0. I have to manually shrink/expand browser window to push it. article { opacity: 0; } function showArticles() { ScrollTrigger.batch(articles, { onEnter: batch => gsap.to(batch, {autoAlpha: 1, stagger: 0.15}), }); } (articles && articles.length > 0) ? showArticles() : null;

Thank you, wrap util can be very helpful in fact. When it comes to my case, the first img is not necessarily 0 indexing - thus timeline and random number in js on load. At that form, when I close the gallery I see the current img and the initial one. Same story when I reopen the gallery. Is it possible to implement any condition to my initial code to prevent loading new img before the previous animation is completed? That would solve any problems.

Hi @Cassie, I've rewritten the code (also css) and this time I'm using gsap. Works pretty good (except the problem described in pt 1). Please let me also understand some gsap concepts I implemented into my project. 1. when I press prev/next button quickly, the opacity is not changed to 0, so the previous image is still visible. How to fix it? 2. how to add/remove data-attribute - now I'm using js to remove and onStart function to apply it? 3. how to clear applied styles by gsap? - but still keeping app functionality 4. could this code be further optimized? https://codepen.io/grzegorz-malinowski/pen/bGYEEyB

I'm refactoring my code and have 1 question - at that moment. How to pass an entire element (gallery_container) that is in modalElements gallery_trigger: document.querySelector(".gallery_container"), as an argument to modalAnimation.to(...) ? "This" - doesn't work.

Sure, here is my case https://codepen.io/grzegorz-malinowski/pen/JjrYymr As all gallery imgs are not rendered at the very beginning and have different w/h, I can't use your tutorial case as a base and need to add active class with duration instead.

No problem. I'll try to explain. The key is modalToShow variable. Please have a look how it's defined. Based on the trigger element I activate the proper modal (the are 4 modals). And coming back to my previous post concerning containers, I'm using only one function as it controls what and how is displayed/animated. I'm not an expert but seems that your solution requires 2 functions, provided that at least 1 modal has no container I had mentioned before. If any other, say, is without X container - then I need another function, etc. async function showModal(e) { const {currentTarget} = e; switch (currentTarget.dataset.btn) { case "menu_trigger": modalToShow = document.querySelector(".menu_container"); break; case "filter_trigger": modalToShow = document.querySelector(".filter_container"); break; case "gallery_trigger": const imgToShow = currentTarget.closest("figure").dataset.img; modalToShow = document.querySelector(".gallery_container"); modalToShow.querySelector(`.img_layer[data-img="${imgToShow}"]`).classList.add("active") break; case "cookie_trigger": modalToShow = document.querySelector(".cookie_container"); break; default: break; }; await freezeAllElements(); modalAnimation = playModal([{xPercent: 0}, {yPercent: 0}]).play(); };

Hi, I have a function that controls the next/prev image btn. Is it possible to apply gsap transition with duration instead of applying pure css active class? .img_layer { display: none; width: 100%; height: auto; } .img_layer.active { display: block; } function previewImages(e) { const btn = e.currentTarget.dataset.btn; const gallery = document.querySelector(".gallery_inner_modal") const currentImg = gallery.querySelector(".img_layer.active"); currentImg.classList.remove("active"); if (btn === "next") { currentImg.nextElementSibling ? currentImg.nextElementSibling.classList.add("active") : gallery.firstElementChild.classList.add("active"); } else { currentImg.previousElementSibling ? currentImg.previousElementSibling.classList.add("active") : gallery.lastElementChild.classList.add("active"); } }

Thanks Jack, I'll finally stick to my solution as my script is more complex (I published only a small chunk of the code) and allows me not to duplicate the code (functions).