b1mind

So I had a chance to revisit this and seems like the issue has noting to do with a child pin inside a parent pin. Its jumps and hops when giving a srollable prop to a pin period. If you comment out the first pin in my demo you can see this. Also looks like the locomotive pens have the same undesired effect in mobile. Has the same effect on android and looks like ios mobile devices. I don't know enough about how it works under the hood. I do love to test though.... Seems like it has to do with the body scroll speed and then the element scroll speed. Cause if I scroll about the same speed on the body then the element it seems to not jump(or as much). If I make small jerky scrolls on the body, then scroll on the scrollable element hops really really bad.

https://greensock.com/docs/v3/GSAP/Timeline I really recommend looking at the docs for better examples and to understand how much control you have in timelines. this is how I typically start my timelines if I want to base the animation on the start of the tl ( but you can name it anything) tl .add('start') .to(something, {}, 'start') .to(something2, {}, 'start')

@Animadraw Check out the docs https://greensock.com/docs/v3/Plugins/ScrollTrigger , you should be able to translate them. Sounds like are after onLeaveBack: ({progress, direction, isActive}) => console.log(progress, direction, isActive)

Well so at that point just add your own "buffer". I probably should have made a new pen but I duplicated to show you how both are the same pretty much. just added a parent div with extra height. moved the end: 'value value' of the trigger end based on that height and where I want the pin/animation to stop. tweaked the animation to maybe better replicate what your after in a timeline. [edit- removed rant] If the updated pen is still not what your after, I would probably try just doing the disable scroll from one the onEnter/Leave pops. https://codepen.io/b1m1nd/pen/yLeoQOG?editors=0010

Really really helps to post your own codepen with the minimal example, without it people are just stabbing in the dark. Cause what it sounds like to a noob like me is you just want a basic scrub animation... While you could be trying to do something different. Simple as it gets example. Like so? https://codepen.io/b1m1nd/pen/yLeoQOG?editors=0010

Thank you both ?? I had a lot of fun making it! Scroll Trigger is amazing, seriously you guys ...so easy, so many options! 100% This was totally one those out the box cases, I honestly was so shocked when it worked so effortlessly... Cause I thought the same thing, way to many things could go wrong. Probably not a issue that even needs resolved then, I might try to do it some other hacky way another time lol. Appreciate you guys thanks for looking into it. This finally got me to come out of the shadows and stop lurking on the forums ?!

I noticed that if you are just scrolling and are over the element it wont scroll you have to move your mouse to register your on the element then scroll, maybe this is the inconsistency you speak of? Seems like a default browser behavior, this also seems to effect mobile as I some how can get it to not bounce some times. Why ask why? "bud dry!" (sorry I am super corny) This is my first go at Scroll Trigger and I made a Codepen for the challenge this week. I originally had it as a single pin and it does work wonderfully! Though for some reason I felt the user needed to be able to choose to drink(scroll) or not... thus here we are lol https://codepen.io/b1m1nd/full/eYJWqey

First off, I wanted my first post to be a big long sappy rant about how much I love GSAP and this community. When I first came back into web dev after a long hiatus (was a big Flash/AS fan) my dreams of a animated interactive web were restored because of you all, and had my eyes opened to a world I thought lost in this new era of webdesign. (PointC's post moved me, I then committed to start my own journey) So maybe I will write about it some time, but for now..... So I have a pinned object that is scrollable and then a pin a element inside it with a scrub an animation. Runs great on desktop from what I can tell, but in Chrome mobile the scrub animation causes the pinned element to hop/jump on the srollable axis. My issue is probably because I am doing something wrong, but I can't seem to figure it out. I tried to remake my issue super basic and was able to replicate in this codepen.