ivevil

Thank you so much, this was really helpful, I am playing around now with different solutions to see which one fits the needs of the animations I need the best.

Hello, I have a question regarding the pinning inside of the horizontal scroll. I read somewhere that it is a big mistake to have nested pins - and I tried it but I saw that it is really a bad idea to have it - they are not working as expected. What I want to achieve? I want like on the codepen attached to have pinned section where box is moving, so basically to stop horizontal scrolling and on scroll to move the box rather than to trigger it when it comes to the viewport. In short: I want to have horizontal scroll of ie 5 sections and when the viewport hits the third section to stop horizontal scrolling between the sections, to do the animation on scroll and then after finishing animation on scroll to continue horizontal scrolling. I saw examples like this for vertical scroll but I haven't seen them for horizontal scroll. Is that anyhow possible to achieve? Thanks,

Well thanks for adviceing me and sharing that video! The best tip that I could got for this issue was the one from Cassie's video where she says - first create animations and then connect it to the scrollTrigger. That solved my issue! Here is the output: https://codepen.io/ivevil/pen/bGMZVpj

Wow, thanks! The answer was so simple and obvious, but I wasn't sure about "repeating" the same timeline, but now I see. Thanks Rodrigo. I have two more questions - so, I wanted to add a text with transition like here: https://codepen.io/ivevil/pen/rNvPpRv And it is perfectly working but only on the first section, the rest of them are short and not showing the text as expected. (Expectation is to have more sections with the same text animation, some of them are going to have different text animation). Should I proceed with adding different classes to them and then separate them, or can I have still the same code for all of them? The other question is regarding the fade in-fade out effect - now the whole section just blinks and not show the section as expected or sometimes you can see the edge of the section, so should I make longer duration of the particular sections or what do you suggest here? I really appreciate your help and answers!

Hello, I need an advice about my codepen. I want to have a few sections with scrollTrigger and in between them to have fade in-fade out effect so you don't actually see that they are positioned from top to bottom. I want to achieve a feeling for a user when scrolling that sections are more like over each other just appearing and disappearing than to see edges of the sections and have a feeling that they are positioned like they are from top to bottom. The thing is when I set my ScrollTrigger like this - also the first section is having fade in effect from beginning and I want it - if first to be shown immediately and the last section not to have fadeout at the end of the scrollbar. I tried to achieve that with selectors :first-child and :last-child like added in the code but then not whole timeline is working in a proper way. Total goal of my page should be - having multiple sections with fade in/fade out transition in between.

Hello @BebDev, Unfortunately the video that I used for my showcase is not my video - I took it from here: https://codepen.io/wisearts/pen/ExZGrbZ where it says that encoding must be done like this: ffmpeg -i input.mp4 -vf scale=960:-1 -movflags faststart -vcodec libx264 -crf 20 -g 1 -pix_fmt yuv420p output.mp4 I tried the existing encoding method but it wasn't helping me much with my video. After a while I realise that also aspect ratio is important - so the video can't be too wide, it must be 960x540 and also duration of video is important - if the video is longer then it seems more choppy. Also please take a look at this thread too: And please let me know also if you find something new that can also help me in revealing this mistery about scrolling video - although I have second thoughts about this approach at all and thinking to give up. Maybe I will just go for image burst instead like this:

Thank you so much, that is exactly what I needed. And thanks for all explanations, it really helps. Regards,

Hello Rodrigo, Thanks a lot for your response and suggested improvements. I really appreciate it. The codepen you improved looks really great! but it seems like I didn't explain really good what I wanted to achieve. I wanted to have the paragraphs come one after another - one by one. So basically something like this: https://codepen.io/ivevil/pen/poVLKNW But as you can see in my example - once I added them one by one, video is blocked in the background while they are playing. I wanted to have video moving and paragraphs moving one by one at the same time. That is the reason why I was doing two timelines in my first codepen, but maybe you know better solution? Thanks!

Hello, I wanted to have video controlled on scroll which I found a good an example and I just took it for testing purposes. I am happy with how it is working. What I wanted to achieve is - to add a text appearing and dissappearing so you have feeling that you are flying through the text - one paragraph by one. I added a codepen as an example - but the thing is - my first paragraph is not shown at all and the second and third are for the short period shown - I tried to control them with the duration parameter but it seems like it is not working. I assume that stagger is giving me troubles, but if I set it lower, then all texts are showing at the same time - overlapping each other. Can somebody help me please with this one? Thanks.

Thank you, I will check it out, I was reading documentation but wasn't sure how to use it exactly. I decided to pick onStop because that one is taking the "whole" scroll of the user no matter how much they grab the screen or scroll of the mouse. It worked perfect until I realised it is triggering on mobile also every touch. And for example if I have menu for the above code to switch between sections - on open of the menu or selecting the item - it is triggering next scroll + opening that section, so instead of going to the section 5 as expected it would do one more click to the section 6. Observer.create({ trigger: "section", type: "wheel, touch", wheelSpeed: -1, onDown: () => { indicator = "down"; }, onUp: () => { indicator = "up"; }, onStop: () => { if(indicator == "down" && scrollingUp) { gotoSection(currentIndex - 1, 1); } else if (indicator == "up" && scrollingDown && currentIndex < sections.length - 1) { gotoSection(currentIndex + 1, -1) } }, // ignore: ".navigation", }); I tried ignore but it wasn't working to set it to ignore my navigation while scrolling or touching there. Can you please help me here - how to resolve that issue and get rid of on every touch getting triggered touch on mobile.

Hello, I have one more question regarding this topic. When using observer is there a way to check how much user scrolled? Because currently I am not getting smooth scroll since on different hardness of scroll it is differently acting for different users. Is there any out of box solution for solving this issue? Sometimes for some users the sections are skipping in showing because of the scroll "too much" it went from first, flies over the second and goes to the third section and not holding on the second section for some time.

I found the reason - when I set overflow hidden to body on mobile for safari - it is working fine, because like it seems sections are a little bit bigger than the window view, but on the other hand for mobile users in chrome it is not scrolling airpods section. - Now I just added check if browser is safari then add overflow hidden to body.

Hello, thanks for the feedback, I appreciate it. I improved a little bit my code with your suggestions, so now for Observer I am checking onDown: () => { if(scrollingUp) { gotoSection(currentIndex - 1, -1) } }, onUp: () => { if(currentIndex < sections.length - 1 && scrollingDown) { gotoSection(currentIndex + 1, 1); } }, and in gotoSection() I am passing true or false to currentIndex sections where I need them to scroll with observer or not. And because every section has different transition - for each of them I am checking is index == that-section (ie 3). For airpods section I set them to false both while scrolling and revealing the images in that section. The thing is now - when I switch to mobile phone - the behaviour is not the same as for desktop. On desktop everything is working fine, but on mobile, it is not switching good between sections, probably because of the tolerance - which I now set to 200. What do you think would be the best tolerance for switch between the sections? I don't want for user to scroll too much, nor to fly over two or three sections at the same time? Thanks for your support, I appreciate it. I even convinced our clients to take the license (Business Green) for this year to support your work.

That worked as a charm, thank you so much. I was successful to remove the forever loop. And now one final question - when using scroller in the middle of observer I "stoped" third section to use observer and trigger scroller to get the animation like Airpods - but I got the on scroll this blinking effect which is causing issues on mobile and on safari and not showing animation smooth. I see in developer tools that inline style for pin element is adding constantly and I am suspecting that is the reason why the animation is not running smooth. Is there any option to remove styling for pinned section? Or you think something else is blocking having smooth animation - frame by frame? https://codepen.io/ivevil/pen/zYWjNeM Thanks!

Thank you very much! That was exactly what I needed. I really appreciate it. Can you also try giving me a hint on the disabling forever loop. In my on scroll effect with observer like here https://codepen.io/GreenSock/pen/XWzRraJ I want to disable forever loop, basically after the last slide is shown - I want to on scroll down to stop showing the first one again, and also on the first slide I want to disable on scroll up showing the last one. I tried adding on Observer repeat: 1 because I saw that is usually for disabling it, but it is not working like that. I assume I need to work on checking if it is the last of the slides then to disable scroll down? Or there is some easier approach? Thanks for your help.