Jump to content


  • Posts

  • Joined

  • Last visited

Everything posted by Sameer_mishraa

  1. Thanks @akapowl I'll keep that in mind. Thank You so much.
  2. https://codepen.io/sameer-mishra1/pen/MWrJPBr Here is a codepen demo, as you can see, when you will scroll to the bottom, the download button present there in the desktop view, does not work. I am unable to understand why though. @OSUblake
  3. Hey @OSUblake Could you help me out one more time please? Here is my repository : https://github.com/Sameer-mishra1/Dbait-website As you can see in a desktop, when you scroll all the way to the bottom, the Download button doesn't seem to be working. When I inspected it a bit, I realised that there's some kind of overlap between the animation view and the button and that's why nothing happens on clicking the button. I am not able to figure out the exact reason though, please let me know what you think could be the plausible reason. https://drive.google.com/file/d/1iOcjNoqBP9sOtw6aJxG47Ldlgib293xj/view?usp=sharing
  4. Hey @OSUblake , so after hours of inspecting and isolating elements, I figured out a work around. Removing the onload fadeout callback for the second animation div (the #desktopAnimation one) from the js file. I don't know why though, whether it's a bug or something which was causing a conflict, but now after removing that line, the animation and preloader both are displaying perfectly in all the viewports and also in all the network throttling conditions. And your help is deeply appreciated. Thanks a lot. p.s Attaching the js code below just in case if anyone finds it helpful. gsap.registerPlugin(ScrollTrigger) LottieScrollTrigger({ target: "#animation", path: " ", // Attach the animation file speed: "slow", scrub: 2, // seconds it takes for the playhead to "catch up" // you can also add ANY ScrollTrigger values here too, like trigger, start, end, onEnter, onLeave, onUpdate, etc. See https://greensock.com/docs/v3/Plugins/ScrollTrigger onLoad() { $('.spinner-wrapper').fadeOut('slow'); } }); LottieScrollTrigger({ target: "#desktopAnimation", path: " ", // Attach the animation file speed: "slow", scrub: 2, // seconds it takes for the playhead to "catch up" // you can also add ANY ScrollTrigger values here too, like trigger, start, end, onEnter, onLeave, onUpdate, etc. See https://greensock.com/docs/v3/Plugins/ScrollTrigger onLoad() { // $('.spinner-wrapper').fadeOut('slow'); } }); function LottieScrollTrigger(vars) { let playhead = {frame: 0}, target = gsap.utils.toArray(vars.target)[0], speeds = {slow: "+=3000", medium: "+=1000", fast: "+=500"}, st = {trigger: target, pin: true, start: "top top", end: speeds[vars.speed] || "+=1000", scrub: 1}, animation = lottie.loadAnimation({ container: target, renderer: vars.renderer || "svg", loop: false, autoplay: false, path: vars.path }); for (let p in vars) { // let users override the ScrollTrigger defaults st[p] = vars[p]; } animation.addEventListener("DOMLoaded", function() { gsap.to(playhead, { frame: animation.totalFrames - 1, ease: "none", onUpdate: () => animation.goToAndStop(playhead.frame, true), scrollTrigger: st }); // in case there are any other ScrollTriggers on the page and the loading of this Lottie asset caused layout changes ScrollTrigger.sort(); ScrollTrigger.refresh(); vars.onLoad() && vars.onLoad(); }); return animation; }
  5. Here is the updated Codepen @OSUblake . Sorry, making it took a little bit of time. Also, the greensock site is apparently preventing to upload a size of bigger image, but as here you can see, the button is appearing before the lottie animation gets rendered. And sir this is occuring only when I am adding an extra div to the html (the one with #desktopAnimation and it points to a different animation as mentioned in js). Why is this happening? I am unable to figure it out. Do I need to add anything else if there's going to be another animation in a different viewport (as I have written in codepen) If you can't observe the appearance of button, set throttling to a lower network then see (mind you, this is happening in devices as well, not only in dev tools) Thanks and regards.
  6. Hey @OSUblake just one more thing Sorry to disturb you one last time... <div id="animation"></div> // This div through css media query is set to be visible only in mobiles <div id="desktopAnimation"> // This div through css media query is set to be visible only in desktops <div> <div class="spinner-wrapper"> <div class="spinner"></div> </div> <button class="btn" onclick="location.href='http://www.google.com'" type="button"> <i style="margin-right: 10px" class="fab fa-google-play"></i> Download</button> </div> // Button is common in both, both point to different json files which is linked to same js file The js code is exactly how you guided me @OSUblake but the moment I add this #desktopAnimation, the button starts appearing before #animation loads in mobile. What extra according to you needs to be added to the onload callback ? Or anything else ?
  7. Yeah I'll try isolating the issue here as you said
  8. See, preset is on Fast 3G and I just have a button next to the lottie div. At this moment, button has already appeared and preloader has faded out but the lottie has not rendered yet. @OSUblake this might help (I have a fontawesome icon attached to the button). What possibly is the issue here ?
  9. @OSUblake Sir I checked it on a live tunnel and it seems to work in my mobile BUT I just had one doubt, when I test the code in through developer tools by setting Throttling to Fast 3G then it doesn't (I have a button as well beneath that lottie div so that button appears on the screen and after a few seconds the lottie appears) Why could it be so ? Also, thanks a lot for that onLoad addition I couldn't figure it out! Edit: I just checked and that button seems to appear beforehand in mobile as well (It just loads faster in it so wasn't visible for the first time).
  10. Thanks in advance @OSUblake. After browser caching the interval becomes very small but it still can be seen or can be clearly observed in incognito mode).
  11. Hi, So I basically have a div which has my Lottie Animation which I have hooked with ScrollTrigger using one of the helper functions as mentioned here. Everything is working fine except I want to add a preloader to my website. I deployed the entire code using jQuery and am firing the preloader on window load but the Lottie animation doesn't seem to follow that. My Lottie file loads after everything has loaded and preloader has been hidden due to window load. What should I do ? I'm stuck. Thanks in advance.
  12. Hey, I have a lottie animation which I have hooked with LottieScrollTrigger function as mentioned in the helper functions sections and it's working fine as well but the issue is that it takes too long to load first time on a mobile as compared to when I test it in mobile viewport of chrome dev tools (By disabling cache). If it helps, my animation is approx 94MB in size and I have a blazing fast internet connection. The animation is basically a bodymovin json file of a png sequence. What possibly could be the issue here ?
  13. Thanks @akapowl ! Actually I figured it out just few hours ago. AS mentioned I'm pretty new to Web development so I was just confused whether there is a possibility of this kind of conflict, although I had a gut feeling that z-index could aslo be the reason. After trying different values of z-index, it started working perfectly. Sorry for your time. And I appreciate your reply and effort. Thanks a lot.
  14. Hi, I am fairly new to web development, so this may be a silly problem but please help me out: Using GreenSock | Docs | Helper Functions as a reference, I have animated two of my divs, which were animating perfectly on scroll in the page, until I tried to add a navigation bar to the page. For a mobile, it is a hamburger menu which when clicked, opens up the navigation bar on the right side of the page. It works perfectly as long as the viewport has anything but my scrolltrigger hooked divs. The moment one of the scrolltrigger related div comes in the viewport, the navigation stops displaying. Is it possible that there is some kind of conflict between the click EventListener of Navigation & DOMLoaded Eventlistener of the scrolltrigger as mentioned in the GreenSock | Docs | Helper Functions ? What should I do ? YOU WILL SEE THE NAVIGATION BAR ONLY IN SMALL SIZED VIEWPORTS. I have attached a sample codepen link and also 2 images which I hope will help you understand the issue. (Although a button is not visible but it works & is placed on top right of the codepen, please bear) Thanks in advance.