F.D.C.H

Hey Redrigo thanks for the quick reply. I know about some workarounds, this was more a topic of willing to understand why the ScrollSmoother Instance affects the pinned element although ScrollSmoother doesnt adds smoothing on touch devices by default. Therefore ScrollSmoother is adding something else, and i wanted to know what this "else" is and why it is added ? But than i will go with my plan B and ger rid of all pinned elements. Thank you very much for all your great job Best wishes Fabio

Hello everyone, its been a while since my last post and although i've read multiple threads dealing with iOS and ScrollTrigger/Smoother in the past, i haven't found the answer i'm looking for. The basic issue is on the beloved iOS devices, i use an iPhone 13, the pinned element is jittering only if ScrollSmoother is created. So i have only the issues with scrollSmoother and only with pinning. I've always read, that ScrollSmoother automatically disables smoothing on touch devices by default, but still something is interferencing. When removing the ScrollSmoother Init code, the pining works flawless - I added a simple Codepen Demo. Why does it behave like this? i know about normalizeScroll, but I don't like the sporadically unnatural scrollfeeling and the last 80px of the Page remains always under the bottom adressbar. I also know, that i could only add ScrollSmoother on non-touch devices, but this would be my Plan C. Plan B would be to get rid of all pinned elements, since i like the ScrollSmoother parallax effects more. As always, thank you for the excellent work with every gsap-update and the flawless forum-help. Fabio

Hello everybody, it's me again im running into a little Problem. I've got a draggable area(red slide), which also can be animated by click. If i click on the button und catch the Slide mid tween, the tween breaks. I cant restart it, like its being killed from the timeline. How can i avoid this behaviour? Thank you very much in advance!!

perfect, thank you very much for clearing things up.

Hello everybody, just a little understanding question, why it behaves like that. I need the start and end values of multiple ScrollTrigger, which works, if no animation is attached to it. But if an animation is attached, the calculation seams to have a delay. I can force it to calculate immediately by refresh, or wait with timeout, but it seams a bit odd to me, since i have multiple ScrollTriggers. if there is another way, i always appreciate your help Thank you very much.

If even you have no fix, then we have no choice but to wait ? Thank you for your quick answer @GreenSock

Hello @SteveS thanks for your answer, but only because it looks the same as on your browser, doesn't necessarily mean, that this is right. FF ist known for rendering issues and weird bugfixes – And maybe there is also a fix for this. Thank you and best regards.

Hello everybody, while browsertesting i noticed some jitter in Firefox, but only when open on my non-retina Display. its like the whole website is shaking after mouserelease a bit, unable to decide which half pixel to use. It doesn't matter which Project, even the ScrollSmoother product page is jittering. I know about the rotate 0.01 bugfix for FF, but even applying this fix to each element doesn't work. For the possibility of a workaround i startet this topic, since i couldn't find any related threads. Thank you and best regards ffhjitter.mp4

Hello @akapowl again, thank you very much for your help! - it solves the problem creating the STs in the way you described. Even though I understood the problem, that the new pinning ST creates new space and throws of the other STs positions, I couldn't understand, why even STs without a pin causes the same Problem - not so drastic like in the example but the longer i scrolled, the more the ST positions where off little by little. Couldn't find out why. love the help in this forum!

Hello @akapowl Thank you very very much for your time and effort to help me! I really appreciate that, like in another topic from me, you came back to update and optimize your answer even more! that is awesome! you're totally right, that was a dumb question. I was believing, that the end of the last ScrollTrigger would be added to the 500% of the previous Scrolltrigger. So that the End would be at 750% and not being passed way earlier, like you pointed out. Alright, thank you very much. I changed all this points in my Project (3 from 5 Times the first animation seems broken, the blue box dosn't expand - is this a Codepen bug? Need to look in my Project, if its the same) It's very embarrassing for me, but i ran into another Problem which i reproduced on the Codepen. The wished animation, this whole Topic is about, isn't like in the Codepen one after another. Its more like a chapter and there are multiple other Scrolltriggers and Timelines happening on the site, which seem to interfere with "previous()" I forked a new Codepen, where you can see after the image tween, the blue box animation is broken and it just snapps to the scale factor. can't say it often enough, I am and will always be very thankful for any kind of help or advice! https://codepen.io/FDCH/pen/zYReYXL?editors=1010

Hello @akapowl thank you very much for your quick answer and help! Creating the pinning ScrollTrigger first works much better. If I increase the endpoint of the second timeline to, for example, 500%, the first animation is broken, the second and last work perfectly. I don't know why this little code is so screwed up. Do you got any advice? If that are too many questions in one topic, please let me know. https://codepen.io/FDCH/pen/rNJopYb Another small question: since i need to create the pinning ScrollTrigger first, how can i deal with sections that are displayed on pageload "above the fold"? The element gets immediately pinned and the second timeline isn't executed on same time. appreciate your help a lot! https://codepen.io/FDCH/pen/vYdvdKW

Hello Cassie & everybody, unfortunately i ran into another problem. It works fine but breaks if i use ScrollSmoother and i can't find solutions in the forum. Again i would appreciate any help, hint or advice! Best regards working without ScrollSmoother not working with ScrollSmoother

Hey @Cassie thanks for pointing this out, I didn't hat in mind to separate the pin. So previous() and separating did the trick and everything works - thank you very very much for your time and help! Really appreciate it https://codepen.io/FDCH/pen/XWZypOO

Hello @Cassie, i think previous could be the right approach, thank you very much!! Unfortunately, the last timeline pins the wrapper, so if it waits for the previous timeline to end, the pin happens to late ? If i pin the wrapper in the second und third timeline it kinda works, but the second Wrapper scrolls too early into place. Am i missing something? Thank you for your help. single Pin https://codepen.io/FDCH/pen/BaYGjNm double Pin https://codepen.io/FDCH/pen/GRQwpbr

Hey @Cassie thank you for your quick reply – sorry for my bad english skills, i will try to explain it a little better Basically i need the third timeline to start animation after the second timeline is complete. i forked a new codepen, where you can see, what it should look like. The red box should be visible, while the blue box fades in. https://codepen.io/FDCH/pen/abqRgKx Unfortunately i cant use it that way, because the scroll distance for the blue box animation will always be different. If i put everything in one timeline, the different scroll distance would affect the complete timeline, like i did it (extreme) in the forked example on the second pinned element. Only the blue box should have different durations, the red and green box should always have one consistent duration/scroll distance That's why i separated the timelines, like in the first codepen, but the timelines are overlapping and i cant get the correct timing for the third timeline to start, when the second one ist done. Hope i could explain it a little better. Thank you very much.

Hello Everybody, i got a little timing Problem, when using multiple Timelines with dynamic end Values on one pinned Element. The Problem is, that the duration of the first two timelines should always be the same, but the duration of the last timeline is dynamic. The scenario should be: -> green box fades in before Element is pinned -> Element is pinned - following steps are always limited in duration, for example 50% scrolldepth. -> red box translates in -> blue box fades in -> Element is still pinned - following steps have a dynamic duration time. -> red box fades out -> blue box animates. is there any elegant way for an exact timing? Thank you very much for any help! Best Regards

Hello @akapowl thank you very much for your quick answer, I appreciate your help a lot and your time to even optimize it in your edit. I knew I hat to index the Frames in some way and compare them, but I thought(hoped), that maybe the draggable plugin got any method to do it. In the demo i see, that the timelines progress method is used, but unfortunately I don't use any timeline on the draggable slider, I've should have changed the Demo to approach to my code more - sorry, my fault. But I will look tomorrow after some sleep again and i will surley find a way. Thank you again and best regards!

Hello everybody, i cant finde the right way, so I hope someone can give me a hint. I've got a draggable horizontal slider where each slide is a canvas with an animated image sequence – a forward sequence for the active slide & a backward sequence for the leaving slide. Now I need to figure out, if the slider snaps to the next snapping point or just bounces back to the current one. appreciate every hint. Best regards Fabio