Jump to content
GreenSock

Search In
  • More options...
Find results that contain...
Find results in...

miks

Members
  • Content Count

    57
  • Joined

  • Last visited

Everything posted by miks

  1. miks

    NS_ERROR_FAILURE

    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!
  2. miks

    NS_ERROR_FAILURE

    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!
  3. miks

    NS_ERROR_FAILURE

    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.
  4. 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.
  5. 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!
  6. 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. ❤️
  7. miks

    #WIP Website

    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.
  8. miks

    #WIP Website

    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!
  9. miks

    #WIP Website

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

    #WIP Website

    @PointC, challenge is not over yet. I failed. I tried separating it in different timelines but still the duration increases.
  11. Hi @alfianridwan, I just managed to do it. lol. here you go buddy. https://codepen.io/miksv/project/full/DkPbev/
  12. 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
  13. 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. ?
  14. 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?
  15. miks

    #WIP Website

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

    #WIP Website

    Thank you. I will try this asap.
  17. miks

    #WIP Website

    Here is a new version of what I wanted to achieve. But I still feel some lag even though the code is shorter. I know every animation should run at the same speed forward or reverse because they all have the same property animation but on this one, it doesn't.
  18. miks

    #WIP Website

    I'm not sure how can I implement the each() function for my next and previous function. Thanks!
  19. miks

    #WIP Website

    I really wanted to simplify code cause I think it affects the speed of my animation. My goal here is that whenever I scroll on the active slide it should reverse the animation first before it goes to the next slide and plays the next slide animation. I wonder if I could store all the animation in 1 function. Cause right now I have a previous and next function that duplicates all the animation for each slide.
  20. miks

    #WIP Website

    Thanks for pointing it out. But as you can see on this http://dev.gcreativelab.com/ I have a different animation for each slide. On the pen, I just did an h1 just to see whats happening on every scroll.
  21. miks

    #WIP Website

    I also wonder what would be the best approach on this on animation each section? Cause I feel some delay cause it was running throughout the if statement before running it.
  22. miks

    #WIP Website

    Hi @GreenSock, I wonder if this is correct? Hahaha, I was like I wanna give up. Then I try again and this I think I solved it? Now I wonder how to implement DRY function on this.
  23. miks

    #WIP Website

    Doing it now. It makes more sense now. Hopefully, I can figure this out myself.
  24. miks

    #WIP Website

    Actually, Im struggling on reversing the animation to go to previous slide scroll function. Cause whenever I assign the current animation to reverse it will go to the onReverseComplete which is the function below. I will try to make a pen for this. var leftContent = new TimelineLite({paused:true, onReverseComplete:pushNext});
  25. Thank you for all this information.
×