Jump to content


  • Posts

  • Joined

  • Last visited

ivevil's Achievements

  1. Thank you so much, that is exactly what I needed. And thanks for all explanations, it really helps. Regards,
  2. 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!
  3. 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.
  4. 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.
  5. 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.
  6. 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.
  7. 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.
  8. 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!
  9. 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.
  10. Hello, Thanks for a warm welcome and thanks for a proposal. It seems like this is exactly what I need - Observer. With it I can check what is the number of the section and then I can implement different transitions according to it. The only thing now is left - I can't implement moving of the scroll when come to the third section. It seems like the scroll is not working as I expected over the section with class ".third". It works when you drag scroller down, but not on touchpad or wheel of the mouse. I tried to include it in the "ignore" parameter of the Observer but it seems like it is not registering it. https://codepen.io/ivevil/pen/zYWjNeM Any chance that I can "stop" scrolling with observer on the section in the middle of the html code? Thanks, I really appreciate your help.
  11. Hello, I really appreciate GSAP and really enjoy working with it. It is pretty straight forward and I really like the support community is getting around here. It seems like it came my turn to ask a question here. I started creating a page - on scroll revealing the next section with transition of zoom in effect, which is working fine. There is still place for improvement but overall it works fine. In the other hand I need third section of my scroller-page to have canvas with the effect like airpods (on scroll it looks like image is moving) - which when I isolate works fine on a separate page, but I would really like to include it here on the third section of my page. I was trying to check with if statement - asking is it third section - if it is - then tried new scrollTrigger with pin on the class of the third section. When I do that - weird behaviour starts and I am stuck with resolving it. I would really appreciate your help if you can tell me where am I making a mistake? Thanks!