Pata

Hi, thanks for your answers. I have purchased Petr (@Ihatetomatoes) courses for a long time and they have helped me a lot to create this and other websites. The problem I have with this is due to the fact that it seems that the scrollTo property and the translateY CSS styles do not seem to be applied at the same time on mobile devices, but on desktop. It is something very specific that I cannot find an answer to in those courses. BTW, thank you very much and I hope I can find someone who knows more!

I'm facing a specific issue with the page transition animation (GSAP + Barba) on my website. The problem is occurring only on mobile browsers such as Safari on iPhone and Chrome on mobile devices. Test flow: scroll down the home page to the section with the black background and click on either link: "Conoce el estudio" or "Contacta" Problem Description: When transitioning between two pages, I've implemented an effect where the current page slides out to the left and the new page comes in from the right. During this transition, I apply an instant translateY to the elements of the current page based on the scroll position and use scrollTo to ensure the new page appears at the top. The code I'm using is as follows: barba.hooks.beforeEnter((data) => { const currentContainer = data.current.container const scrolledPixels = window.scrollY * -1 gsap.set(currentContainer, {y: scrolledPixels}) window.scrollTo({top: 0, left: 0, behavior: 'instant'}); }); On desktop browsers, everything works perfectly. However, on mobile devices, I experience a brief "flickering" or flash with the text elements during the transition. Usually, images remain static as expected, but the text seems to re-render, causing a brief flash of the top of the page before snapping back to the desired position. Has anyone faced a similar problem or has any suggestions on how to solve it? Any guidance or direction would be greatly appreciated. What I've Tried: TranslateY it in plain JS Disable force3d to prevent hardware acceleration. Disabling any other simultaneous animations or transitions. Optimizing the CSS, adding will-change and checking properties related to text rendering. Using requestAnimationFrame to synchronize animations. Intercept native scroll behavior with ScrollTrigger.normalizeScroll(true) None of the above solutions has resolved the issue. I'm aware that the question may not be 100% related to GSAP, but I just hope to find someone who knows what the magic trick is.

Hello! I have a div element with a smaller child div element inside. I'd like to make the parent div draggable and then run a hitTest with its child element, not the parent-dragged one. Draggable.create("#element1", { type: "x,y", onDragEnd: function(e) { //see if the target overlaps with the element with ID "element2" if (this.hitTest("#element2")) { //do stuff } } }); Following the example I want to drag the "#element1" and then make the hitTest with its child element. Thanks in advance!

Wow, many thanks! I've already done it thanks to your tips! https://codepen.io/pataduprins/pen/WNXdMPo Updated! Many thanks @mikel & @OSUblake

Hello, I'm trying to modify the duration of a tween by using a variable that changes on a mousemouse event. I want the elements to rotate (move along the path) faster or slower depending on the mouse position. The variable is called "speed". As you can see on the Codepen link I'm trying to make this on the first tween: "duration: 20 + speed" but obviously it is not the correct way because when a transition is created it's not suposed to be modified. Sooo... there's a way? Many thanks in advance,

Very clean @ZachSaucier. Many thanks! Here it is my final version: https://codepen.io/pataduprins/pen/JjKzqJP I've limited the variation variable and I had to add an extra 'box-shadow' to solve a problem with the 'overflow:visible' of the SVG that in Safari was not working properly. It's a tricky solution, probably not the desired one, but it works!

Thanks for the reply @ZachSaucier I have tried applying your code but I don't make it work. It seems to work once but I can't undo the first tween to repeat it every time the element is triggered. I have tried the "onToggle" callback and it seems to work but only with basic tweens not with the MorphSVG plugin. There's a Codepen: https://codepen.io/pataduprins/pen/JjKzORW I hope we can find a solution! Thanks :)

Hello! I'm trying to change the ease of a bounce effect according to the speed when scrolling. I get the desired value each time but I don't know how to translate the variable "variation" to my tween every time the ScrollTrigger is triggered. Thanks in advance, let variation = 0 const footerBounce = gsap.to('#down', { duration: 2, morphSVG: '#up', ease: `elastic.out(${1 + variation}, ${1 - variation})` }) ScrollTrigger.create({ trigger: '#footer', animation: footerBounce, start: 'top bottom', toggleActions: 'play pause resume reset', onEnter: self => { const velocity = self.getVelocity(); variation = velocity / 10000 } })

Thanks, now that I see the solution it seems so obvious.

I want to animate an element and its child on a forEach. I don't know how to point to that element on my GSAP line. Many thanks in advance, elements.forEach((e) => { e.addEventListener('mouseover', function() { gsap.to(e, {y: 100}) gsap.to(**CHILD ELEMENT OF e**, {y: -100}) }) })

I am very grateful. That's exactly what I need. Thanks!

I would like to know how to start an animation when scrolling down, to play another animation when scrolling up and especially how to run a different animation when I'm not scrolling. The truth is that you got the idea of the inertia but having the animation tied to the scroll speed makes it look weird. BTW thanks a lot for the proposal. I would appreciate an answer to the first question.

I am trying to do this effect: ✅ the circle stretches when I scroll down ✅ the circle narrows when I scroll up ⁉️ and finally I want the circle to return to its initial position when there is no scroll Sure it's easy but I can't figure out how to do that. Also, I'd like to know if it's possible to give a delay effect at the beginning of the animation. Some kind of inertia. Any help will be welcome. Thanks in advance,

Cool! I can see the changes now. Thanks a lot!

Hey Zach, thanks for the fast answer. I really appreciate your tips but on your solution I just can see the same circles movement on each repetition. No new random numbers seems to be generated. Maybe we are missing something? Thanks,