miks

Thanks for all of the response. It help me to narrow the error. I have found the culprit and its below. I see no display: none or any visibility issue. But I have checked all the svg and some of the property has fill to none and try to fill everything but still the error occurs. <svg class="circle" xmlns="http://www.w3.org/2000/svg" width="34.315" height="31.929" viewBox="0 0 34.315 31.929"> <g id="Group_11307" data-name="Group 11307" transform="translate(1623.014 258)"> <path id="circlePath" data-name="Path 10680" d="M15.976.5A15.62,15.62,0,0,1,30.5,10.631,15.481,15.481,0,0,1,8.014,29.25,15.627,15.627,0,0,1,.794,12.957,15.623,15.623,0,0,1,15.976.5Z" transform="translate(-1623.006 -258)" fill="#fff" stroke="#0f294b" stroke-width="1"/> <circle id="whitebg" cx="15.063" cy="15.063" r="15.063" transform="translate(-1622.094 -257.046)" fill="#fff"/> <g id="smallcircle" class="circleSmall" transform="translate(-1623.006 -258)"> <circle id="Ellipse_3" data-name="Ellipse 3" cx="2.5" cy="2.5" r="2.5" transform="translate(29.307 13.954)" fill="#d81c5c"/> <circle id="Ellipse_4" data-name="Ellipse 4" cx="2" cy="2" r="2" transform="translate(29.807 14.454)" fill="#fff" stroke="#fff" stroke-width="1"/> </g> <g id="Group_11306" data-name="Group 11306" transform="translate(-1623.006 -258)"> <path id="Play" d="M19.91,13.731l2.761,1.631,1.9,1.123-4.663,2.549Z" fill="#d81c5c"/> <line id="Line_10" data-name="Line 10" x1="12" transform="translate(8.807 16.454)" fill="#fff" stroke="#d81c5c" stroke-width="1"/> </g> </g> </svg> Many thanks!

Thats quick! Thanks Carl. Basically when you view the site on firefox the error occurs on every first instance of click the main links. But after you refresh the page the error disappears. I am not using DrawSVG. Also it is perfectly working in other browser except Firefox. Thats also the reason why I came here cause I couldn't find the source of error. Cheers!

Hi, I just found out recently that the website that I am developing is having this issue with NS_ERROR_FAILURE in Firefox. http://www.gcreativelab.com/ So basically when you navigate using Firefox it stop on each page. But if you refresh the page it will work. But each first time to change page it will lag/stop due to the error. I hope someone could help me figure out where i the source of this error, cause I just couldn't find a way to find it. Cheers.

Hi Carl, Sorry, I thought it was related to some of the GSAP API. I remember there is a function that we you right the bottom of an container it bounces you back smoothly. I just thought that was it and if that is triggered I can call a new function.

Can anyone give me a hint how to execute this. Whenever you reach the bottom of the page it will push you to the next post. https://adoratorio.studio/filippo-bello https://www.tentwenty.me/cases/dubai-future-talks I saw this WP plugin below, but I'm not sure if it is the same thing that they use to do those i've mentioned above. cause both of them are not in WP. https://wordpress.org/plugins/auto-load-next-post/ Cheers!

c`mon guys i'm still seeing some updates and receiving notifications. Don't sit in-front of your computer today. Have some fun, drink, talk to your love ones & chill. Happy New Year! See you next year! Thank you for GSTeam. ❤️

Hi @PointC, I found out the bug the causes the double triggers of animation on load. First I tried recreating all the scripts and end up the same problem. Then I tried to remove some of the libraries. and the one that fixed it is removing the gsdevtools on my set of libraries that were added on my gulpfile.js.

Hi @PointC, I'm very sorry again. Because I'm still having a problem and can't figure what is really wrong here. var $slideCount = 0; var $animStatus = false; var $oldSlide = 0; var timelines = []; var homeTL = new TimelineMax({paused:true,id:'homeTL',onComplete: onComplete,onReverseComplete: newAnim}); var aboutTL = new TimelineMax({paused:true,id:'aboutTL',onComplete: onComplete,onReverseComplete: newAnim}); var servicesTL = new TimelineMax({paused:true,onComplete: onComplete,onReverseComplete: newAnim}); var caseStudy = new TimelineMax({paused:true,onComplete: onComplete,onReverseComplete: newAnim}); var team = new TimelineMax({paused:true,onComplete: onComplete,onReverseComplete: newAnim}); var contact = new TimelineMax({paused:true,onComplete: onComplete,onReverseComplete: newAnim}); homeTL.to('.left-home .header',0.5,{x:300}) $aboutHeader = $('.left-about h1'); $aboutHeader3 = $('.left-about h3'); $aboutDescription = $('.left-about .description'); $aboutSplitText = new SplitText([$aboutHeader,$aboutHeader3], {type:"words"}) $aboutSplitTextDescription = new SplitText([$aboutDescription], {type:"words"}) $aboutSplitText.split({type:"chars, words"}) $aboutSplitTextDescription.split({type:"chars, words,lines"}) aboutTL.staggerFromTo($aboutSplitText.chars, 0.6, {y:80, autoAlpha:0},{y:0, autoAlpha:1,ease: Expo.easeInOut}, 0.03) aboutTL.staggerFromTo($aboutSplitTextDescription.lines, 0.5, {y:50, autoAlpha:0},{y:0, autoAlpha:1,ease: Expo.easeInOut}, 0.04); $servicesHeader = $('.left-services h1'); $servicesHeader3 = $('.left-services h3'); $servicesDescription = $('.left-services .description'); $servicesSplitText = new SplitText([$servicesHeader,$servicesHeader3], {type:"words"}) $servicesSplitTextDescription = new SplitText([$servicesDescription], {type:"words"}) $servicesSplitText.split({type:"chars, words"}) $servicesSplitTextDescription.split({type:"chars, words,lines"}) servicesTL.staggerFromTo($servicesSplitText.chars, 0.6, {y:80, autoAlpha:0},{y:0, autoAlpha:1,ease: Expo.easeInOut}, 0.03) servicesTL.staggerFromTo($servicesSplitTextDescription.lines, 0.5, {y:50, autoAlpha:0},{y:0, autoAlpha:1,ease: Expo.easeInOut}, 0.04); timelines.push(homeTL,aboutTL,servicesTL,caseStudy,team,contact); timelines[0].play(); // GSDevTools.create(); function newAnim(){ TweenLite.set($slides, {autoAlpha: 0,className:'-=active'}); TweenLite.set($slides[$slideCount], {autoAlpha: 1,className:'+=active'}); timelines[$slideCount].play(); } function onMouseWheel1(e){ if($animStatus===true){ $animStatus = false; $slideCount = e.originalEvent.deltaY < 0 ? ($slideCount-=1) : ($slideCount+=1); $slideCount = $slideCount < 0 ? $slides.length - 1 : $slideCount; $slideCount = $slideCount > $slides.length - 1 ? 0 : $slideCount; timelines[$oldSlide].reverse(); }else{ return; } } function onComplete(){ $animStatus = true; $oldSlide = $slideCount; console.log('complete') } When you scroll next/down the page it should reverse the old slide/current and play the next slide. But the animation isn't seem right. Here is the live demo https://dev.gcreativelab.com/ As you can immediately notice. That it just snap to the next slide without animation. But if you scroll back up and scroll down again the animation is playing the right animation and the snap to next slide is gone. Also I added a console.log on my onComplete function and whenever refreshes the browser the after the first animation timelines[0].play it is showing 2 console.log that is complete after the page loaded that is also confusing me. Again sorry. Hope you understand. Thank you!

@PointC, please correct me if I'm wrong. I added ,0 at the last parameter of the tween and it seems to fix it.

@PointC, challenge is not over yet. I failed. I tried separating it in different timelines but still the duration increases.

Hi @alfianridwan, I just managed to do it. lol. here you go buddy. https://codepen.io/miksv/project/full/DkPbev/

Hi, Disregard what I just written hahaha. I just saw the video on the phone and comment on the phone. I saw that its more on transition. What I did is only animation. Now I need to try barba.js

Sorry I forgot to add of course it possible with GSAP. im not so good at coding yet but its something like this i assume. .logoContainerActive{ position:absolute; height: 100vh; width: 100vw; right:0; left:0; bottom:0; top:0; display: flex; justify-content: center; align-content: center; } $(‘a’).onclick(function(){ var tl = new Timelinelite({onComplete: reversedContainer}) tl.to(‘.logo.container’,0.7,{className:’logoContainerActive’} }); function reversedContainer(){ // reverse animation code here } sorry i know this might not work but you get the point. im also just learning and i think if I help and learn with others it will help me learn fast. ?

Yo! I think you can just add a listener on every link on your page that would trigger the animation. You can even use bodymovin for your animation or the best solution is use barba.js or smoothstate.js?

OMG!. Challenge over. Hahaha. Thank you so much!