knalle

Thanks, will try something. Can you get all the addPause positions in a timeline? Guess I could use that to place them as indicators.

Can you add chapters "indicators" in the GSDevTools seekbar - like you do have in the Vimeo embeds (https://greensock.com/docs/v3/Plugins/Flip). I am using GSDevTools as a player for a timeline that has a few pauses ( tl.addPause() ) where indicators of the pauses would be nice.

Thanks @akapowl I ended up using solution 2. The icons where not nested in any "relative" DOM, so absolute position on them worked perfectly.

How can I have elements fixed on the page (icons here) and have them pin to elements in the bottom (e.g. instagram icon will be pinned to the "Instagram" text in the bottom). Demo gif attached.

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.

Is it possible to have texts split by chars and have ­ (soft hyphen) work? So bigger words are using grammatically correct hyphenation, when viewed on the phone

The locomotive scroll demos above are not performing well on iOS. The pinned/fixed parts are shaking badly when scrolling.

@OSUblake I have made a isometric (not dimetric) pen based on your pen. I hope the math is right https://codepen.io/knalle/pen/WNNQYew

@GreenSock Btw, Is the fix available for download?

@GreenSock that’s why i love GSAP forum. This is the best library and community - by far! Thank you all for all the help ??

It seems my post was trimmed somehow:) but the problem is that the “anti-lag trick” (progress) is not working with the menu (codepen above), so the closing animation makes a weird jump. How come?