IndM

@mvaneijgen Amai I still have a lot to learn! I once checked those videos but never thought this could be the fix. I might have to check these again. Thanks for cracking your brain on this one

@mvaneijgen I've searched aswel on this topic but I still don't know if this able with gsap. I can perhaps create this custom without gsap by looping the values till it reaches its end value. Speed up the value of the middle part with a certain factor till it reaches its end value what is in this case its screenHeight. The reason i want this made with gsap is the use of the timeline, so i can trigger other events when that SVG reached its endpoint or something

@mvaneijgen Should i create new toppic for this?

Hi @mvaneijgen! Mercie voor de oplossing! The width of the svgmask can be manipulated with js adjusting the viewbox and the "L" values in the path depending on the width. Thats what I've noticed when analysing the site I've mentioned. However, If you have the time and willing to check. You can quickly search the svg in the inspector searching for the "#menuMask" id if you want to check it out. As far as I know, the path is being manipulated by specific values, but some have a sort of delay on them. Is this possible with gsap to add a delay to a number in the path? for example d=" M0 0 L1538 0 L1538 0 Q769 435 0 0 Z " the 435 here is the rounded part and is being much faster going to its target (what is 1330) than the 0 after the last "L1538" and the last 0 in that path. I've created a new codepen that looks at the screenwindow. https://codepen.io/indy-meermans/pen/MWRgBop

Hi all! I'm trying to recreate the svg transition from the menu on this site: https://mfisher.com/ . I'm not getting the same results even with the same svg being used. I've tried using the morphSVG plugin but I notice it changes the part 'M0 0 L1708 0 L1708' of the path. While on the site from mfisher, I see that the value remains the same except the values that need to be changed. Is there a better way to fix this?

I need to create a wrapper around my column so scrolltrigger knows where the element is since you cannot place a trigger on the animated element. In this case, I use the div with animation-wrapper as my trigger. Since the columns are a flex-child, I have to use display: contents on the animation-wrapper. So the dom thinks this is a child as quoted here: But due this, it seems that scrolltrigger is having issues finding that element. While the element is still available in the dom tree. I've created an demo for it.

It was indeed the magic bullet! This was exactly what I needed, thanks! https://codepen.io/indy-meermans/pen/poqxPMw

@mvaneijgen So some kind of a different timeline just for that animation that contains a fromTo with different y values for each column (due each column has a different y position), starting at the same time? What I don't get is how the middle images are always first visible (on that site), then the rest. Is this due some kind of ease?

Hi @Rodrigo! it seems the correct way to go but I can't figure out why it's not working here. And less a clue now how to become the effect from that site ? https://codepen.io/indy-meermans/pen/wvRYJZN

Well I found this, https://codepen.io/shahbaz-shaikh/pen/qBLZEzX But on the site as you can see, there is a small delay and then all items are being animated differently. But also grouped and still animated the same... I don't get it ?

This is no question for how do I code it but just a question for helping me through this thought process. I'm trying figuring out how this intro animation being implemented for the gallery. I thought it were 3 seperated scrolltriggers, 1 that plays the intro animation, 1 that does the parallax and 1 that does the expension. But everytime I reload the page and look how its being triggered, it keeps confusing me. The parallax and the expension effect I can always do later, but what I really wanna know is how that first animation is being done. What I thought it could be was a .to animation on the wrapper with a stagger animation on those images, that each has an animated y value and opacity. But really no clue about that easing effect that is being applied. If anyone ever tried to replicating this or have some examples, always welcome! https://spaincollection.com/ (this is listed in the showcase tab)

@GreenSock, the scrollObserver function. I've needed something like that for my own project but couldn't really find something in the docs for it

For a progress bar I would approach it this way: Creating a separate scrolltrigger that depends on your timeline, in your case the sections. gsap.to('progress', { value: 100, ease: 'none', scrollTrigger: { scrub: 0.3 } }); and add this or another div in your html: <progress max="100" value="0"></progress> See ref:

@Akhil sanju Depends where you want to use it. If you meant inside the foreach, you can do it like this: sections.forEach((section, index) => { totalHeight += section.clientHeight; console.log(index); });

Hey @Mendax, It reminded me of this: https://greensock.com/docs/v3/HelperFunctions#loop Does this do the trick? About issue 2, the left position when creating the new row of squares are getting reset back to 0, so all these boxes are getting stacked. What I would do is create a global variable that counts the length of the created boxes and apply them to the addSquare index. So the left position would be counted up instead of resetting after every call. This creates a lot of boxes next to each other but then I would create a wrapper around the carousel with a fixed width of 400px and overflow hidden. I will check if I can make it work when I have the time!