knalle

Anybody have a good example of a design like this https://codepen.io/internette/pen/mwVKeQ with GSAP animating the points - like a soft wiggle ?

@GreenSock Do you think there is a good solution - where you don't know if the sidebar is higher or smaller than the viewport or the content height?

Thanks for trying 🙂 I was facing the same issue.

What if the sidebar is shorter? Like here: https://codepen.io/knalle/pen/GRjmMZv How do I get the bottom of the sidebar to end with the bottom of the content. Tried messing with the end trigger, but I couldn't wrap my head around it

@GreenSock Btw, how can I ease the "stick to top"? So the pinning is more "anticipated" and landing softly. Perhaps using another trigger and tweening the content of the pinned element?

@akapowl I tried that earlier and it did not help - but thank you for the quick reply! @GreenSock you were absolutely right on the money margin! It was the margin on the H1 ("FIX AREA" in the gif) that caused the jump! 😅 It should definitely be on the "Most Common ScrollTrigger Mistakes" list

Unfortunately I cannot make a simple CodePen, that has the same issue. And since the website is under construction sharing it here isn't possible - so the attached GIF is the best I can do Any ideas on why this happens? I have this code that gets my sections with data-pinned attribute: gsap.utils.toArray('[data-pinned]').forEach(function(elem) { ScrollTrigger.create({ trigger: elem, start: "top top", pin: true, markers: true, pinSpacing: false, }); });

Thanks @ZachSaucier Regarding next/prev question, I noticed the post was on ScrollTrigger and not Draggable. I guess the approach is similar. But I could just tween the Draggable target - and then update() the Draggable, right?

Thanks @ZachSaucier I was thinking more like a a horizontal custom scrollbar, that doubles as and indicator of progress and thart this is a horizontal scroll area. Like: Also, another thing I need: arrow naviagtion. Can I tween the Draggable to the next snap point? So I just compare the current endX and go tho next og previous snap x when next/prev button is pressed.

@ZachSaucier that is exactly the information I needed. I had misunderstood the purpose of bounds. Makes sense now. Also the flex-inline is worth noticing in your updated CodePen, so it returns the right width. Is there any way to add a scroll bar - perhaps a one made with Draggable as well, since a native wont work right with the "edgeResistance" and I would require "scrollLeft" as type, right? And I understand that "x" is to prefer for smoother performance.

I can't get snap working. As you can see, I am just testing with some numbers to start with. Eventually I will have to loop through the items (also onResize) and adjust the snap array, so that it snaps to the left side of the bounds. Perhaps I am just missing something simple? I have seen some CodePens with a lot of code, proxies, and absolute positioned items - still, this should be a simple(r) task - especially when a everything else GSAP seems so straight forward.. (and that's praising GSAP - not complaining )

Perfect. Thanks all!

Hi @mikel Thank you! But that is regular shape morphing. I need the wavy feeling again if possible. Perhaps @GreenSock has a solution/fix that does not require shapes defined in the svg?

I am upgrading from GSAP 2 to 3. Seems to be working. However, MorphSVGPlugin hasn't got the pathDataToRawBezier function anymore. It is used in a waveSVG function that Mikkel used in his CodePen that he posted in forum post last year (uses GSAP2). What to do - to make it work again?

Oh forgot to make a pen 😞 But Mikkel’s pen is showing the problem - e.g. “hyper-professionellen” is not understanding the soft hyphen.