Pata

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,

Hi there! I'm trying to repeat a timeline with different random numbers values on each repetition. (On the circles staggering) It seems it is working but the first tweens are not repeating. .to(square, {x: -200, backgroundColor: 'blue', borderRadius: '10px', skewX: '30deg', ease: 'bounce'}) If I change the "to" for a "from" it works. .from(square, {x: -200, backgroundColor: 'blue', borderRadius: '10px', skewX: '30deg', ease: 'bounce'}) Is this the best way to do it? Thanks in advance,

Everything clear. Thanks : )