darkus

Yup, with normalizeScroll it does work, but you lose the ability to pull down to refresh on iphone/ipad so it looses the true native feel of a webpage

Nice work, the end result is very cool and reading through your code, what you are doing makes alot of sense. ?

This is a cool question. Im not sure if this is what you meant, but in my mind, I took the height of a card, multiplied it by 3, and made that the end height for any given pin https://codepen.io/darkuss/pen/zYMzJre

It seems like you are running it on the entire .container container so its going to look at them all as one piece. I think you have to select for each .bar https://codepen.io/darkuss/pen/poQwOJL

@GreenSock So as a follow-up. I just discovered pinReparent. Setting that to true, completely fixed my problem. It seems to work on my actual page, and in the codepen example Hope I'm not doinganything terribly wrong by using it, but it seems to do the trick.... Heres a fork using pinReparent https://codepen.io/darkuss/pen/YzRQvQe

So to get a little more detailed on the issue, On desktop everything is working great out of the box (with scrollsmoother). When loading the same exact page on iOS/mobile, the page has studdered scroll and pull to refresh dont work, so I decided to make an if/else statement and when we are on mobile, we dont load scrollsmoother if (isMobile == true) { gsap.registerPlugin(ScrollTrigger,MotionPathPlugin, Flip); } else { gsap.registerPlugin(ScrollTrigger, ScrollSmoother, MotionPathPlugin, Flip); smoother = ScrollSmoother.create({ wrapper: "#smooth-wrapper", content: "#page", effects:true, smooth:1.2, }); } With this the page 'feels' great on both Desktop and iOS/mobile, but then the next problem was the pin dissapears as mentioned in the OP. I was assuming the pinType was being automatically being set to 'transform' while on desktop (because of scrollsmoother) and then now fixed for mobile. So I went ahead and forced 'transform' on the mobile version as well. That didnt work, so then I told it to pin it to the scroll-smoother outer html container pin:(isMobile == true) ? "#smooth-wrapper" : true. Well that did solve the problem of the pin dissapearing, and it now shows up during scroll. But then a new problem arose, that all the triggers for animations after that pin were completly misaligned and firing to early. So now back to putting scrollSmoother back on for mobile and then turning normalizeScroll off. By turning it off, the page now acts and 'feels' native on iOS, but then I get the weird jelly bouncing of the elements inside the pin. I feel like im in a catch22 no matter what I do Specifially to your suggestions: 1. Setting normalize scroll to true, makes iOS feel non native. Pull to refresh doesnt work well, and flicking to scroll fast is a bit jerky and feels uncharacteristically non slick by GSAP standards. Making smoothtouch a low number has helped with this, but still not great. 2. That is fine, and is my original plan, but is being stymied by the above things. As I mentioned, I feel like there is probably a simple solution here but anywway I got at it, I hit some kind of wall. I figured solving why an area dissapears with a pin is the best method of attack. Now reading up I can see this strange thing about transform not being relative. So strange!

I have the following codepen which shows the example. In this example, there is a scrolltrigger (brokenPin) that pins an element, but all its content dissapears during the pin and then comes back after the pin is complete. I've explicitly set the pinType to be 'fixed', as this is what I belive to be the default behavior and works better in most cases. The transform pin has a weird bouncing effect that isnt that nice, so I'd rather have it as fixed. On my real page, if I change it to transform type, then the pinspacing doesnt work for whatever reason and the scrolltriggers following the pinnned area come in immediatly. This latter part I cant reproduce on codepen yet. So my main question is the first part, why is everything disappearing, and is there any way around it besides switching to a transform pintype? https://codepen.io/darkuss/pen/XWygYjX

So cribbing other peoples work and using an "unofficial" GSAP classname plugin, i've made an accordion menu where the name of the item will highlight when the mouse goes over the area, and should stay highlighted when the accordion is clicked/opened My problem is that when a user clicks another menu item, id like any highlighted accordion title to unhighlight and the other menus should collapse. THe other menus do properly collapse, but I cant get the name to properly unhighlight. I tried simply mass unhighlighting using JQuery remove class and that kills the animation for any subsequent tries. I'm not tied to using the add classname method, but thats all I could come up with because I couldnt figure out how to reverse a the animation if I just directly animate the classname change (text color change) Any ideas? https://codepen.io/darkuss/pen/rNQjvpL

Agree with you, never seen anything able to just erase huge blocks of content like that before, especially from just killing a pin. Not sure what is going on since I cant reproduce it on the sample codepen. I'm going to keep playing with that pen to see if I can reproduce the problem (and will update you) or just delve deeper into how I coded my page. Its become a gargantuan mess but I can say that pin/pinspacer is super clean with only 2 elements animating inside the pin, but has nothing to do with the parts that are getting just deleted off the screen

As im playing around more I think I understand the timing better, you simply have to give all the parts and pieces of a timeline a duration, then you can actually control the specific timings of things. So a timeline needs to be thought out and mapped out first before laying the first brick, if you want toget it correct

Oh wow, seems to work really well on the codepen. However, when I transpose it to my development site it doesnt work. In my case, it jumps to the bottom of my page (creates some new blank whitespace, it semes like it wants to jump even below the bottom). And as far as I can tell, it actually wipes out all my page content above where the pin was (ALOT of page content). Its hard to explain, I've never seen anything like that. I'm trying to replicate the effect on codepen but I cant. Heres to a longshot that my description rings any bells?

Sorry ahead of time for the ultranoob question I've read the timeline part of the GSAP docs over and over and I think I understand most of what it says I'm also getting most of my timelines to work well, probably our of sheer luck (goes to show how well GSAP is written I guess But I have a fundamental question that I dont understand and need help with as my animations are getting more complex: How do you translate pixel length into time for timeline duration/delay/etc? Right now, if I setup a timeline with a scrolltrigger, say to trigger at the start and end of a certain div let mytimeline = gsap.timeline({ scrollTrigger: { trigger: ".myDiv", start:'top bottom', end:"bottom top", scrub: true, markers:true, } }); 1. The actual scroll length of the mytimeline timeline is determined by the length of the div, how does that translate to the 'seconds' length of a GSAP timeline? Is whatever the length of my div by default equal to 1 second, 10 seconds, etc.. for example? 2. If I start adding things to my timeline, then the timeline will lengthen since they are added to the end of the timeline, but by how much length is the timeline lengthened if no duration is explicitly given? mytimeline.to( ".mySecondDiv", { opacity: 0, }, 0); 3. In my above example, say I gave my .to a duration of 1 second, does that mean 1 second = 1000pixles (the height of .myDIv), for example? Thank you!

No unfortunatly it doesnt work

Well its certainly good to hear i'm not totally crazy and this could be inherent to the way scrollsmoother is designed. If a solution does come from up above, that would be outstanding. Thanks for championing this!

Thanks for the detailed reply, I went through what you said with a fine toothed comb Just somenotes/follow-up questions if I can pick your brain 1. The black box (.blackbox) and the image container (.MediaAreaImage) are both contained/parented by .MediaArea and it is .MediaArea that is getting pinned 2. The flip animation without the scrollTrigger does work very well, but because of the attempt to make it scrub, I decided to go ahead and integrate it with scrolltrigger per your prior suggestion and its so close now 3. The reason I have anim() starting with each scrolltrigger at the onLeave point is because if I just run it at page load, it immediately removes the target .MediaAreaImage from the .MediaAream and does not respect the pinning of its container (.MediaArea) You can see that in the following variant CodePen where the image scrolls in under the black box In actuallity, the black box and the image are absolutly positioned div and are supposed to be on top of each other, with the black box fading away to show the image under that is at the same time going to Flip to the final target https://codepen.io/darkuss/pen/BaGQGrx