Shehzad Asif

Hey all, Thanks for your advice and suggestions and this is one of the reasons I love this forum. People are always ready to help each other. I just made a minimal demo to show the problem. It looks like an applicable solution what pawl mentioned for few animation or tweens but not for bigger picture where you have a website have like 3 to 5 pages and on each page you have like more or less of 50 tweens or animation mix of text and images or some other stuff and sometime complex timelines for different breakpoints. Doing CSS work for each element in this way is like doubling or tripling your work and may be impossible in some cases where you are setting the things only with JavaScript or dynamically. @akapowl I forked your demo and commented out "all: function" media query. It is causing the scroll effect on resize as in my demo. Now that window scroll effect is gone. But I am just thinking, Is it the most efficient way to revert to original position of elements ?. https://codepen.io/ShehzadAsif/full/YzZPEEo @Cassie Thanks for sharing the post. I already tested the "immediate Render: false, save Styles" both comes with the same result like you mentioned. The elements will remain at their initial state until they are triggered. Below is the demo with "immediate Render: false". https://codepen.io/ShehzadAsif/full/BaWyrXW Let's see what Greensock says on how to tackle this. Regards, Shehzad Asif

Hi There I am observing that scrolltrigger based animation does not revert to their original values on window resize. For example, my animations are for only desktop size devices (e.g " from ypercent 100, opacity: 0), using ST matchmedia function for this purpose. On first load everything works fine but as you resize the window, animation based elements disappeared (elements go back to "ypercent 100, opaity 0) on non-desktop devices while they should be at "ypercent 0, opacity 1". That can be seen in attached demo. I used the following code for tracing ST progress from a post but does not seems to help instead it takes the window to top each time on window resize. // code for tracing scrolltrigger progress in check const ST = ScrollTrigger.create({ trigger: "body", scroller: "[data-scroll-container]", start: 0, end: "bottom bottom" }); // The relevant part to keeping the progress ScrollTrigger.addEventListener("refreshInit", () => (progress = ST.progress)); ScrollTrigger.addEventListener("refresh", () => ST.scroll(progress * ScrollTrigger.maxScroll(window)) ); How this thing can be avoided so that they remain in their original position on resize on all devices. Regards Shehzad Asif

All the relevant info available in the loco dos in data-attributes section. For your convenience the syntax is as following for pin effect: // for example you want to pin div, give an id to the parent of div, bcs loco pin the elements through ID <section id="sticky"> <div data-scroll data-scroll-sticky data-scroll-target="it will trigger the pin effect/ #sticky" data-scroll-offset="it will decide the pin element position like top or bottom etc"></div> </section> Also check this link: "https://locomotivemtl.github.io/locomotive-scroll/" Regards, Shehzad Asif

Hey I would just add a bit of my experience with locomotive and GSAP pinning. The thing is locomotive's way of pinning is quite different from gsap and the way it is implemented it over rules the some things of GSAP like pinning. I faced the same issue recently. Here is what I will suggest. 1- Use locomotive pinning method, it is quite easy and flexible to implement when using locomotive (although gsap is far more easy and flexible). But this is the caveat of using locomotive. 2- Do not use data-scroll-section attribute if your page is not too long. If you do so it may create some complexity with other things and you will have to use some hacks to overcome these complexity. 3- In case you are using data-scroll-section attribute and want to use GSAP pin effect. Then use a div inside that section to pin things through this div bcs pin does not work on data-scroll-section itself. Regards, Shehzad Asif

Hi Zach I already tried the scroller on local machine but it did not work out. Anyhow thanks for the help. Regards, Shehzad Asif

Hi Zach With the help of this awesome library author we made the code workable with gsap. Now scroll trigger works as supposed to be, not in one area that we could not solve. Now the thing that is not working is the pin as of now. Can u pls look into this and help the pin working. Below is the sandbox without pin just to show that it is working as supposed to work without pin but ASA I will use pin, it will not work properly. https://codesandbox.io/s/dry-cherry-r6cgf?file=/index.html Regards, Shehzad Asif

yes, you are right. I am very happy it is solved. Thanks again.

Many Many thanks to you Tailbreezy. What a silly mistake I made and could not figure out myself. You solved it man. I really appreciate it.

Hi Rodrigo Thanks for directing me towards right platform for this kind of query to sandbox. Below is the sandbox link: https://codesandbox.io/s/silent-lake-g12e3?file=/src/about.js:826-840 Regards, Shehzad Asif

Hi there First of all thanks to all who have supported me through all my problems and I can't thanks enough. The main problem is my animation starts with a delay (not from the code). I do not know what causing it. But when I reverse the animation it just reverse at the right time without any delay. project involves some page transition but there is a delay weather I reload the page or make the page transition in both cases there is delay. I attached the required files as I am using parcel bundler so could not make a demo on codepen. Can someone pls explain why there is delay on start and not on reverse and how to to solve it. Any suggestions if I am doing something in the wrong way, other then problem above will be highly appreciated. Regards, Shehzad Asif package.json about.html about.js home.js index.html style.css index.js

Hi Zach I attached videos for better understanding of the issue. I hope my issue is now more clear. Pls check 1st video. Pls check 2nd video I have no idea what "home" or "end" button you're talking about as there is nothing like that in your pen. By home and end button, I meat these button on keyboard. I apologize I did not mention it before. Pls check last video. Lastly all videos are from my last demo and of bad quality just to keep the size below 500kb but serves the purpose and explain my issues in much better way. Regards, Shehzad Asif animation reversing on enter back before animation completes (1).mp4 enter and leave animation triggering at same time (1).mp4 animation not complete by pressing home and end button on keyboard (1).mp4

Hi Zach I was implementing the solution but got few other issues, kind of same as before (animation not completing & overlapping over each other). 1- In my project both elements are coming from the same direction and vice versa. In that case enter and leave animation plays on the same time. So I put a delay so that coming element enters only after leaving element leaves. I tried different methods to delay to entering tween as mentioned in docs but nothing worked except what is in the below demo ( repeating it for every tween). Is there any better way to use delay for this kind of work. 2- If I scroll back before leave animation completes then animation is reversed instead of playing from start (like at box-1). 3- If you scroll fast where enter and leave animation are triggered at the same point (like at box-6), you will notice that most of the time animation will not be completed and both elements will remain in the viewport overlapping over each other. 4- And lastly if you press the home or end button then animation will not be completed as well like my first demo. Why is it happening and how this can solved?. fhttps://codepen.io/ShehzadAsif/pen/zYovRNo?editors=0110 Regards, Shehzad Asi

Thanks Zach I always learn something new from you when get stuck. And I am surprised by the power of "label", how efficient it can be. WAO! Again thanks for the great support as always. Regards, Shehzad Asif

Hi Zach Today I understood the concept of the addlabel before that I was confused about that how it works and what is that was not fully clear. Thanks to you it is clear now to me. I think my issue is not understood correctly. Your animation is quite different then mine. My animation: 1- Element entering whenever will enter from 100% down from its original position. No matter whether it is entering or entering back it will come from 100% down from original position and it will not scale up or down. 2- When leaving the element is going up 100% from original position and only when leaving it is scaling up. No matter whether it is leaving or leaving back it will go up 100% down from original position and scale up. Your animation: But in your demo you are playing or reversing the animations when leaving or entering not what I am doing. I tried to make it more clear what is the issue. If you see your demo with the below demo (removed "autowrite: true" from the first demo(forked) ) side by side, will get the point what I am talking about. https://codepen.io/ShehzadAsif/full/qBqEdOK Regards, Shehzad Asif

Hi there I have set up some animation based on scroll through "enter & leave" state. Everything works as expected except when I scroll the page fast like by pressing the home or end button then animation will not complete and elements will overlap over each other. I searched on the forum and found the partial solution by using "overwrite: true". It made the animation complete but I am using scaling of elements in it that does not go back to it's original scale 1. Attached is the codepen for better understanding. Can someone pls explain what causing this behavior and how to prevent it so that when page is scrolled fast, the animation works all the way as supposed. Regards, Shehzad Asif

Hi @SPR1NG9 Here are few things to be noted. 1- Explain your issue clearly so it is understandable and provide a minimal demo as paul suggested. 2- Your code looks a bit messy to me. I don't understand why you are using "tl1" again after "tlcs" while it should be at one place or you can make another timeline to do the same. 3- If you are using your timeline with "scrolltrigger" then you should use following syntax to make it work correctly. Always pause your animation or it will be played on page load. Always mention animation or timeline name as mentioned below. const tl1 = gsap.timeline({ paused: true, // so it will be paused initially and will trigger on trigger, otherwise it will trigger on load scrollTrigger: { animation: tl1, // name of timeline is important to trigger the relative animation scroller: ".scrollContainer", trigger: '.header', start: "top top", end: "bottom 60%", scrub: 3, markers: false, id: 'header', pin: '.header', } }); tl1.to('.top__logo', { scale: 4, opacity: 1, ease: "none" }) // paste other tl1 animations here to make to your code clear and efficient I think it will solve your issue if it does not, provide a demo to help us better understand your issue. Happy coding

Thanks Paul, You made it so clear to me. Now I understand the problem much clearer then before. Yes, you are right I should had forked the pen. I will keep in mind that Insha Allah. Thanks.

Hi Paul Thanks for the clarification, The reason I want to use data-attributes is to make my long page more smoother and without this data-attr page feels sluggish a bit. So this has to be there. Second thing I am not using any locomotive built-in parallax effect aside from smooth-scroll specifically in that section. Third, I am trying to make it workout by wrapping the inner section of that section under a div and then pin it but it kind of solve the issue by pinning it correctly but brings another issue. It is that the next section just cover it and behaves like pinSpacing is set to false. I tried different things like "put margin-top: 100vh to next section, used locomotive data-scroll-sticky and used z-index:-1 to put it behind the parallax section. But It still comes to the front of pin section. Is there any way It can be resolved in this way by somehow managing the next section to detain at its position until parallax section is scrolled fully. I tried it, so far failed. I updated my codepen to make it clear what I am saying.

Hi there With reference to attached codepen url, the problem is pinning is not working on the section with parallax background with locomotive scroll and the section gets blank and all content is hidden. Does anyone knows what's causing this issue and how to solve it. Regards, Shehzad Asif

Hi Carl Sir Thanks for making it clear. Regards, Shehzad Asif

Hi Pawl Great advices and suggestions are always welcome. Well, the reason I am doing the fading so fast because I do not want to see the fading effect instead just wanted to change the number like suddenly getting visible without showing any fading (just like the stacking images effect where images are just stacking over each other with 1 opacity). Ah, special thanks regarding the "seizures" due to fast fading effect (now I may drop/ alter this effect due to that kind of effect or prompt the visitor before showing the page). I was not aware of that, Insha Allah, will keep in mind for the rest of my life. Regards, Shehzad Asif

Hi Carl Sir, Thanks and Glad to receive a solution from you being your student. Actually the thing I am trying to implement are not numeric values but with the help of your above examples and from one of your "GSAP 3 Express" course's lecture, now figured out the solution to achieve the continuous stacking effect. Apart from that, I am curious to understand that when I mentioned the duration in defaults of timeline then why it was not reflecting on the .set timelines. Regards, Shehzad Asif

Hi there Can anyone help to me to understand and solve the issue why my timeline is not being played. What I am trying to achieve is the effect of numbers like countdown stacking over and I want to see one number at a time. I think my timeline is setup correctly (may be missing something). But I want to know why my timeline is not playing and what is the missing part to get this effect. I really appreciate the support of you guys. Regards, Shehzad Asif

Hi Jack I am using locomotive for some time and did not face any problem like yours. All things scrolling, scrubbing and pinning works perfectly but a demo would be good thing to explore the problem. Regards, Shehzad Asif

Hi Zach, This is just an update for locomotive scroll working with gsap specifically for touch screen and pinning. If you find it valuable pls update it on scroller proxy page. Before update: https://codepen.io/GreenSock/pen/1dc38ca14811bc76e25c4b8c686b653d After update: https://codepen.io/ShehzadAsif/pen/dypyRoQ To activate smooth on touch screen: This code is required in the locomotive object // for tablet smooth tablet: { smooth: true } // for mobile smartphone: { smooth: true } Following line is no more required to work pinning on touch screen /* pinType: document.querySelector(".smooth-scroll").style.transform ? "transform" : "fixed"*/ After the update of 4.0.4 recently, now scroll is much smoother then before. Why not have a look at both demos above and feel the difference. Regards, Shehzad Asif