Pete K

Thanks Rodrigo! In case someone runs into the smiliar case I have done the following which seems to be working both on Android and iOS. 1. I set the main wrapper's touchstart event to "e.preventDefault()". 2. Then all the press, click and drag events are handled by the gsap plugin only. 3. And the rest works like a charm ... as always! Best!

Hi! The issue is this. I made a simple menu, that is being expanded after pressing the button. Then a user is supposed to drag the button ( while still pressing/touching it) onto the desired position. On a desktop - it all works as intended. On mobile - it goes like this ... Once you press/touch the button (and unless you move your finger almost instantly) the draggable object gets disabled. As far as I understand the issue it is related to some native events that get triggered when you press the screen for longer. Has anyone got any idea hot to prevent this from happening ??? Thanks for your help in advance!

Thanks for the detailed info. As always - works like a charm ...

Hi, Here is the scenario for a gsap carousel . I create a timeline for each of the elements ( a slide showing up, sticking around for 2 sec, and sliding out ). Then I stich them together under a mastertimeline and I make a scrolltrigger which starts the slideshow on entering. All works fine so far... Upon leaving I want the mastertimeline to be paused. However pausing the timeline at the moment of transition or when a slideshow's autoAlpha ==0 looks bad, so I made a condition in which I am trying to detect tweening and if the tweening is on I do a delayedCall , if it is off, I want to pause the timeline instantly... As you can see in the demo - the last part of pausing the carousel is not working fully as expected. As always - woudl be greatful for help !!! Best, P.

First of all - thanks so much for your help. I applied your code in my project, and everything works nicely. Regarding your questions: 1 You're using .set() but then using a duration: 0.8 which doesn't make much sense. A .set() is a zero-duration thing. Yes, your are correct, I guess it was a leftover from a ".to" animation. 2 You're animating ALL of the ".elementyAnimacja" elements in that timeline, but if I understand your goal correctly, you want to only animate the ones inside each container ".doAnimacji" as it enters the screen, right? Yes, you are right - my mistake ! 3 Why are you trying to put all the animations into a single timeline like that and then animate between labels? Perhaps I'm missing something obvious but... I was just trying to test using timlines. Again - Thanks a lot !!!

Before I post the webpage ( somehow ) I am working on I decided to try one more option. That is to propagate a timeline into each of the children of the container parents. Perhaps I am wrong but this approach produces smoother results ( so far I was using the animation (gsap.to) ) . It kind of works but I cannot figure out why the elements are triggered by another container parent. The expected outcome would be to make the children of the container A to be affected/triggered by the container A. Now they are triggered by both containers A and B ... I made this tiny demo - hope it demostrates the issue clearly ... I think I am making some silly mistake here that is causing the problem Thank you very much for your support... ! https://codepen.io/janek_marcepan/pen/xxXjoxx

Hi guys, I have been testing animating with gsap only. It works but I do still get jumpy motion after refresh ( with cache clearing ) ... However, after scrolling down past an animation once , the animations start behaving nicely. It is almost like those animations get cached somehow. Have you experienced anything like it before, or perhaps you are aware of solutions to overcome such issues. Thanks for help A LOT, P.

Let me test the gsap-only way and see... Sorry for the errors in the js+html panels - I am fresh, and still learning. As for the performance. In the website I am working on I have a hero banner ( 100vh +100vw ) with some css animations. As I would scroll down past that banner , some other animations were triggered ( this time those were gsap only ) ... and that is where all would become jumpy. After I would scroll down to the bottom and get back to the top suprisingly all the animations would become smooth ... And that is why I decided to try adding classes through Scrolltrigger. This approach produced smoother results , expecially in the first run of scrolling down... Anyway thanks for your remarks - I do appreciate this. I love GSAP and not giving up

Thanks !!! ...It sounds good and I have already had done the same with GSAP animations. But in my case the problem was - the animations were jumpy/laggy. The CSS transfroms perform signifcantly better ... As advised, I made a tiny codepen ... The goal is to add a class when the parent container reaches the start in the Scrolltrigger. Then the target ( here " .box divs" ) get a new class (".box-after ") and should change sequentially. I applied a setTimout while creating Scrolltrigger forEach of the elements ( ".box" divs ). 1. However the trigger ( ".animatein-parent" ) is not working ... 2. The trigger ( ".animatein-parent" ) should be effective only within one section ... until the scroll reaches another ( ".animatein-parent" )... I believe it might sound messy ... Hopefully it makes sense for you https://codepen.io/janek_marcepan/pen/OJxQpbM

Cassie, it worked like a charm. Thanks... One more thing here (if I may ) ... Will this solution work with "stagger" paramater at all? Here are the updated lines ... I am trying to get the intances receive the class one by one ( in case there are more than two... under one parent ) instead of being animated at once. Thanks for your support - that is amazing ! P. gsap.utils.toArray('.scrollin').forEach(function(el,index){ var addClass = $(el); var containerTrigger = addClass.closest('.scrollin-parent'); ScrollTrigger.create({ trigger: containerTrigger[0], start: "top bottom-=100", markers: true, toggleClass: {targets: el, className: "zoom-test"}, stagger:1, /// will that work here??? toggleActions: "play none none reverse", }); });

Hi, it should be fairly easy to fix ( I think ) ... I do believe that I am doing everything correctly, so I set a loop, where I look for the closest div/parent with a class ('scrollin-parent') and then use it as a trigger. But for some reason the class that I am toggling is being attached to the ... parent ( .scrollin-parent ) instead of the actual element ( '.scrollin' instance ) Have a look at these few lines below nad thanks for your feedback in advance. THANKS !!!!! gsap.utils.toArray('.scrollin').forEach(function(el,index){ var addClass = $(el); var containerTrigger = addClass.closest('.scrollin-parent'); ScrollTrigger.create({ trigger: containerTrigger[0], start: "top top", markers: true, toggleClass:"zoom-test", }); });