momo12

Guys @Carl and @mvaneijgen, I found a solution to disappear the followers if the mouse doesn't move for 2 seconds and keep the last one only appeared. But some of them disappears sooner not in the order they appeared. Can you please help? https://codepen.io/talewoy290/pen/zYyegme

@mvaneijgen Sorry again. This is the code I updated to keep the last follower appear if the mouse is not moving for a while and disappear the rest. but somehow it does the opposite! https://codepen.io/talewoy290/pen/gOZqNMQ

Guys I have a question! The other day, someone suggest I use this code to create a mouse trail effect but the thing is I can animate the followers element to disappear before they move to the next position. I want to scale them down to 0 and set their opacity to 0 but they just disappear. Appearing animation works perfectly!

Thanks a lot!

Guys, I say this great example but what can I do to let the images stay at their initial position and don't come to the last position of the mouse?

Thanks a lot for it! I knew about css clip-path but couldn't animate it with GSAP but now I see what you mentioned about your rule which solved my problem!

Guys do images have any attribute, so they be fixed but the we can change the mask layer scale like this animation?

Found my mistake :))

Guys, I created this pen from my previous questions I've asked but there is an issue. Why Flip is not working very well to set the position and z-index of the boxes? What I'm trying to acheive is setting Z-index of each box and also, set its position to Absolute. Just not sure why it doesn't work! Also, the end of the animation is set to "bottom top" but it ends earlier! Another thing is why the gap of the grid is not working anymore after the Flip reverts back?

Thanks a lot

I don't want the reparenting happens as an animation. Like what scroll trigger does, I want the grid cells moves and gets reparented slowly as we scroll down.

I couldn't understand this code. I could manage to create something else and was hopeful someone might be help me to learn to do what I'm after.

Is there a way to make it responsive to scroll position? As we scroll down, they get reparented.

Here is the Codepen: https://codepen.io/talewoy290/pen/GRwVbdb

sap.registerPlugin(ScrollTrigger, Flip); const main = document.querySelector(".small-grid"); const blue = document.querySelector(".title-sticky-wr"); const boxes = gsap.utils.toArray(".grid-item-wr"); function flipBoxes(target, container) { let state = Flip.getState(boxes); boxes.forEach((box) => container.appendChild(box)); return Flip.from(state, { scale: true, ease: "power3.out", duration: 1, stagger: 0.2 }); } ScrollTrigger.create({ trigger: "#one", start: "top top", end: "bottom bottom", // ScrollTrigger end parameter changed onToggle: self => { if (self.isActive) { flipBoxes(blue, main); } } }); ScrollTrigger.create({ trigger: "#one", start: "bottom top", // ScrollTrigger start parameter changed end: "top bottom", // ScrollTrigger end parameter changed onToggle: self => { if (self.isActive) { flipBoxes(main, blue); } } }); Hello guys, I havethis code which reparents the grid-item-wr on scroll with Flip library from main to blue on scroll and when we scroll up again, it reparents the grid-item-wr once again from blue to main. But not working!