goooon

Thanks for your anwser. But in fact I do the logic to change the box. Is conditional rendered in each column. So the ref={cosito} moves from one column to another. I don't underastad :/ {activeCol === 1 && ( <div ref={cosito} className={styles.cosito}></div> )}

I don't understand what is wrong. The red box should be auto animated moving along the columns when the mouse enters DEMO https://stackblitz.com/edit/stackblitz-starters-tqhpvw?embed=1&file=app%2Fpage.tsx

Thanks @Rodrigo, I get your point, and you're right. Honestly, I was thinking about implementing this functionality in React. I can't use appendChild there, so my approach was to use flip-ids. Seemed easier, but now I'm kinda lost.

Thank you very much for your help! originally, I made it with flip-id's because I wanted to make a similar effect but with different elements. In the demo, I've simplified with a single marker just for demonstration. What if each marker had a different text and photo? I would not be able to use the appendChild method. Sorry for not being clear on that point. The original idea was to have multiple elements.

@Ritik I added a pause because, in my first approximation the button plays the timeline. without the pause it would continue to the end. function(){ TL.play('SECTION_1'); });

Flip Menu. flip between two many different elements I add dinamically the atributte data-flip-id="matched" when click at a menu element. and work with a "previus active" and a "current active" element to make de animaiton. So, when the animation ends, the current element is stored as the prev element and gets ready for another click. but...I'm having a problem with the Flip behavior. I don't understand why it only works in one direction. What I notice is that when I go from right to left (and fail), the transform animation is on the initial position element. I believe that is the issue, but I'm not sure how to solve it. https://codepen.io/Gon82/pen/dyaZvRm

Flip Menu. flip between two many different elements I'm having a problem with the Flip behavior. I don't understand why it only works in one direction. Any suggestions? https://codepen.io/Gon82/pen/dyaZvRm

I just realized that it moves 70px. Which is the width of the target... I added that number in the calc and it Worked var progress = clamp((this.x + hitareaRectWidth - bounds.x) / bounds.width) https://codepen.io/Gon82/pen/QWZZYLN

Hi all. Thank you very much for your help. I have followed @ZachSaucier 's method, but it moves toward the left when I press my target. Here is a demo. Any Idea? Thank you very much! https://codepen.io/Gon82/pen/QWZZYLN?editors=1111

Thank you again!! @akapowl

@akapowl Thank you so much for helping me so much!

Hello everyone, I have a serious problem that I can't solve. I need to add buttons to my animation to go back to markers in time. But as my animation is scrolltriggered with scrub:true , when I play the timeline to the labeled time, I get an offset between the animation and the scroll position. Is it possible to solve it? Thank you very much

var photoArr = gsap.utils.toArray('#section2 .photo'); gsap.to(photoArr, { x:`${(i-(photoArr.length-1))*100}%`}) I know it's not the same, but I was wondering how do I get the interaction value when I use an array in a Tween? I tried with i, but it always returns the value length.

Amazing. I can't believe it. @elegantseagulls. Thank you so much!

Hello. can't figure out how to fix this. I searched the forum, but did not find exactly this problem. And what I did find I didn't really understand. If pinSpace: True, I have a huge padding below section 2. If pinSpace: false, the spacer exceeds the section 3. *The reason why I give so much height to section 2 is to slow down the animation. Can you help me?