-
Content Count
62 -
Joined
-
Last visited
Community Reputation
18 NewbieAbout knalle

-
Rank
Advanced Member
Recent Profile Visitors
3,008 profile views
-
knalle started following pathDataToRawBezier is not a function in GSAP3, Animating Delaunay triangulated canvas, Loving ScrollTrigger, but can it do this to pins. and 2 others
-
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.