Sygol

Sorry for not updating code pen - I already updated it (previous post) - it looks like it kills only the last '.item' inside ScrollTrigger batch

@ZachSaucier thanks, it is working for killing with getAll() method, but then with getById shouldn't it work like this: ScrollTrigger.getById('myId').kill(); - since it is not an array anymore? This doesn't throw any errors, but doesn't also kill the ScrollTrigger

https://codepen.io/kuba-sygowski/pen/zYrPxKq Here is simple codepen. I am using 3.3.4 version

Hi guys, I am using ScrollTrigger batch like this: gsap.set(".column", {opacity: .5, y: 20}) var scroll = ScrollTrigger.batch(".column", { batchMax: 6, interval: .3, onEnter: batch => { gsap.to(batch, { opacity: 1, stagger: .3, duration: .5, y: 0, overwrite: true, }); }, onLeaveBack: batch => { gsap.to(batch, { opacity: 0.5, duration: .3, y: 20, overwrite: true }); }, start: "center bottom", end: "center top", }); scroll.getAll().kill(); And I tried to kill it like in example above, but it doesn't work. I am trying to be able to overwrite ScrollTrigger instance that I created - say that this code exists in my base.js file, now I am wondering if there is a way of overwriting all of those animations or simply get rid of them in my project.js file?

Thanks guys, @Nekiy2 I didn't think of doing it this way, this is nice solution, the only problem is that we kind of get out of our timeline then. I guess, there is no other way than stick with Zach solution, and then if I want to randomise it I would need to shuffle elements inside items array with JavaScript first

Hi guys, I am having a bit of issues with stagger and chained animations within a timeline. I am trying to create a stagger animation on the parent div, which would then include two different tweens (p.first and p.second) within the timeline. Once the animation for the first div is complete, then the next parent div would fire, followed by the third, etc. So basically, GSAP to run: 1) stagger starts; first div anim; 2) p.first anim; 3) p.second anim; 4) end first div anim; 5) begin second div anim; 6) etc. GSAP’s default behaviour is to run 1) stagger anim. on all divs, 2) p.first anim; 3) p.second anim Is the desired behaviour possible? Thanks!

Hi guys, I am using ScrollTrigger to animate different elements on my page. I wrote this function to make it happen: export function animateDomElement(domElement, animationOptions){ if (domElement != undefined){ domElement.timeline = gsap.gsap.timeline({ scrollTrigger:{ trigger: domElement, start: "center 100%", toggleActions: "restart none none reverse", } }) domElement.timeline.from(domElement, animationOptions) } } $(window).load(function(){ var elements = $('.element'); elements.each(function(idx, element){ animateDomElement(element, {duration: .3, opacity: .4, y: 15}); }); }) But then it looks kind of weird when I first wait for for example images to load and then animation is performed. Is there a way around it? So animation doesn't trigger when I load the page, but only when I scroll? Thanks!

Hey guys, I'm just checking ScrollTrigger and I love it! It is way better than Intersection Observer. I would definitely be interested in feature that Yannis came up with

Hi ZachSaucier and thanks for quick reply Yes, before trying to use master timeline I simply added {paused: true} to timeline in my animateComponent() function and then if (entry.isIntersecting){ entry.target.timeline.play() } else{ if (entry.boundingClientRect.top > 0){ entry.target.timeline.reverse(); } } And it works pretty well. But when few elements are in viewport at the same time, all animations execute at the same time, and I hoped to fire them one by one. Is it possible to accomplish it without master timeline? When it comes to ScrollTrigger, I will have a look at it for sure! Btw - when multiple animations fire at the same time for multiple different elements isn't it causing some performance issues?

Hi guys, I am pretty new to GSAP and I am working on setting up basic animation for some HTML elements on the page. First I am creating timeline for every HTML element that I want to perform animation on (all of them have "animate" class), like this: function animateComponent(component, animationOptions){ if (component != undefined){ component.timeline = gsap.timeline(); component.timeline.from(component, animationOptions); } } var content1 = $('.content1 .container')[0]; var content2 = $('.content2 .container')[0]; animateComponent(content1, {duration: 1, opacity: .3, y: 15}); animateComponent(content2, {duration: 1, opacity: .3, y: 25}); Then I'm creating master timeline and I am using Intersection Observer to observe those elements, whenever element is in viewport I add element timeline to master timeline, and remove it when element is not in the viewport, like this: $(document).ready(function(){ var components = $('.animate'); var masterTL = gsap.timeline(); let options ={ root: null, rootMargin: "0px", threshold: 0.4 } var observer = new IntersectionObserver(entries => { entries.forEach(entry => { if (entry.target.timeline != undefined){ if (entry.isIntersecting){ masterTL.add(entry.target.timeline); } else{ masterTL.remove(entry.target.timeline); } } }); }, options); components.each(function (index, el){ observer.observe(el); }); }) And it almost works - every element animates one by one, but seems like there is a problem with removing timeline when element gets out of the viewport, so when I scroll to bottom of the page I need to wait for all previous elements to animate before getting animation on current elements. I would like to stop animating any element that is not in the viewport. Or there is another, better way of doing what I plan to accomplish? Hope I explained it well enough. Thanks for help!