Search the Community
Showing results for tags 'batch'.
Found 3 results
-
Hi there! I've been working on a modal for some products. I found the best way was to use the Flip.fit() to overlay the 'duplicate' modal elements before transiting them back to their original state. This is why I've had to use the Flip.to() method (open to other suggestions though!). What appears to be happening now is that the title causes the image to offset on Flip. The original state is required to have the .hxl class but has been scaled down to fit the original title. Any suggestions on how I can prevent the offset and transition it smoothly? Cheers!
-
Hi, I have had this issue in multiple sites where I am using scrolltrigger and animating the y property. This is what happens on an <a> tag for example (see screenshot). I have had this issue also appear on normal <div> that have border properties. I have also tried to replace the border with outline for example but same thing happens. When I hover over it, the border corrects itself and looks fine after that. Also when you change some properties through "inspect element" in chrome for example. The error also occurs in Microsoft EDGE, but have not seen it in firefox or safari. One fix that seems to work is to not use the transform property Y but the basic TOP property. I prefer to use the Y property however. Does anyone know how to fix this issue? This is my code: JS gsap.registerPlugin(ScrollTrigger); setTimeout(function(){ ScrollTrigger.batch('.animate-in', { onEnter: batch => gsap.to(batch, {autoAlpha: 1, y: 0, ease: "power2.out", duration: 1.6, delay: 0.15}), }); }, 100); CSS animation: .animate-in { opacity: 0; transform: translateY(80px); } CSS button: .button { border: 1px solid $black; background-color: transparent; display: inline-flex; align-self: center; transition: all ease-out 300ms; padding-top: 15px; padding-bottom: 16px; padding-left: 22px; padding-right: 22px; }
-
I'm trying to figure out how to target the element within a batch process on scrollTrigger. In my simple example, I have a script that is using scrollTrigger to look for all elements with a particular class. When it comes into view, I'm toggling a class to change the color. I want to be able to possibly run other functions on that element as well. For example, I may want to add another class to it. Or, I may want to delay it based on a data attribute. But, I can't seem to figure out how to get each target element. I tried "this", I tried "this.target". I tried $(this). For the sake of this question, let's just say I want to add another class to each element after it comes into view. I would have thought something like this would work, but I must be doing something wrong. ScrollTrigger.batch(".animateOnLoad", { toggleClass: "inView", onEnter: function() { var element = this.target; setTimeout(function () { element.addClass('animationComplete'); }, 2000); }, once: true }); Any tips here would be much appreciated!
