Jump to content
Search Community

Pradeep KS

Members
  • Posts

    7
  • Joined

  • Last visited

Recent Profile Visitors

The recent visitors block is disabled and is not being shown to other users.

Pradeep KS's Achievements

0

Reputation

  1. Oh wow... That is great... Thank you so much for the support.
  2. Hey thanks for the replay. I have sorted the above issue by reordering my scripts. Im using pug, that's why the script tag looks like that. I use ScrollMagic for scroll animation. If you dont support it what else can be used instead of it ? Thanks
  3. Getting this error "Uncaught TypeError: Cannot read property 'easeInOut' of undefined" I have added all the necessary scripts as follows: script(src='/node_modules/gsap/src/minified/TweenMax.min.js') script(src='/node_modules/gsap-drawsvg/drawsvgmin.js') script(src='/node_modules/scrollmagic/scrollmagic/minified/ScrollMagic.min.js') script(src='/node_modules/scrollmagic/scrollmagic/minified/plugins/animation.gsap.min.js') script(src='/node_modules/scrollmagic/scrollmagic/minified/plugins/debug.addIndicators.min.js') and Initialization as follows: // Scroll Magic // init controller let controller = new ScrollMagic.Controller(); // build tween TweenLite.set('.st0',{visibility: 'visible'}); let tween = TweenMax.from('.st0', 4, {drawSVG:0, ease:Power1.easeInOut}); // build scene var scene = new ScrollMagic.Scene({ triggerElement: '.test', duration: 96, triggerHook: 0.75, }) .setTween(tween) .setPin('.test', {pushFollowers: false}) .addIndicators() // add indicators (requires plugin) .addTo(controller); Could someone help on this please? Any help appreciated !
  4. Hey, Thank you so much for the hint. I spent a lot of time to fix this issue. After listening to you hint , did some research and finally I got the solution as follows: Included this : <script src=" https://cdn.jsdelivr.net/npm/js-cookie@2/src/js.cookie.min.js"></script> if (Cookies.get('noPreloader') === 'true') { $('.overlay').hide(); $('.overlay2').hide(); } else { $(window).on('load', function() { Cookies.set('noPreloader', 'true', {expires: 1}); // 1 day cookie // Animate loader off screen $(".overlay").show().delay(4000).fadeOut(); $(".overlay2").show().delay(4000).fadeOut(); }); }
  5. Actually, I started learning Javascript a few months ago, maybe that's why I couldn't understand cookie and local storage terms. If you don't mind could you please help me to sort this using cookies and local storage? Thanks
  6. Thanks, Shaun, Is there any other way to tackle this using frontend side ie, writing javascript?
  7. Hello team, I have added my animation code below. This code is running fine. But my client doesn't want to run this on each page refresh. ie, This animation has to play only when the user visits the first time. Now what is happening is when the user opens the site, the animation loads, then the user goes to any other internal pages, and later when he comes back to the index page, this animation will start loads again. I want to run my green sock animation only when the page load first time, When i refresh the page second time, this animation should not run. Thanks and regards, Pradeep KS const tl = new TimelineMax(); tl.to(".overlay", 2,{ y: -1000, opacity: 0, ease: Power4.easeIn, delay: 0.5, }) .from(".logo-icon", 0.8,{ y: 200, opacity : 0, scale: 1.2, ease: Power2.easeOut, delay: 0.2 }) .from(".logo-icon", 0.8,{ rotation: 360, ease: Power2.easeOut, delay: 0.2 }) .from(".logo-text", 0.5,{ y: 200, opacity : 1, ease: Power2.easeOut, delay: 0.2 }) .to(".logo-icon", 0.5,{ y: -200, opacity : 0, ease: Expo.easeIn, delay: 0.2 }) .to(".logo-text", 0.5,{ y: 200, opacity : 0, ease: Power2.easeInOut, delay: 0.2 }) .to(".overlay2", 0.8,{ y: -1000, opacity: 0, ease: Power2.easeInOut, delay: 0.2, onComplete: function(){ TweenMax.set("body", {overflow:"visible"}); } });
×
×
  • Create New...