Jump to content

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

Gaurav Prabhu

  • Posts

  • Joined

  • Last visited

Recent Profile Visitors

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

Gaurav Prabhu's Achievements



  1. Really thanks for the prompt reply. Will try that out. I was having another problem where all the elements were getting animated at once instead of animating when in the viewport. Could you please check the pen, look at the ScrollTrigger create function and tell me if there's anything wrong that I'm doing?
  2. Hey Zach, Thanks for the reply. Really sorry for not attaching the pen before. I have created a pen below. I'm still not sure if you could understand what I want exactly. I'll describe it for you. Once the loader animation is complete, I want to fade in the elements for the first section. I want the same fade in animations to happen for rest of the section elements on scroll whenever they are in the viewport. Right now I guess the first section animation doesn't happen because it is also controlled by the ScrollTrigger plugin. I'm using refs instead of classes as I'm using react. Help appreciated. https://codepen.io/gauravp15-the-encoder/pen/PoNgQMP
  3. Hello guys, Just started my first gsap project using react js. There is a loader which is visible at the initial load and I pass a flag prop to the main component once the loader disappears. Once this flag is received by the main component, I play the timeline using the play method. In the timeline I'm fading in multiple elements present in the section. I'm facing a problem where this timeline is a part of the ScrollTrigger animation which happens on every section scroll. So for the first screen, as soon as the loader disappears the animation is already complete as the ScrollTrigger considers it in the viewport. //Main component this.timeline = gsap.timeline().pause(); //sections, sectionRight, descriptions are refs of sections and elements which fade in. sections.forEach((section, index) => { const tl = gsap.timeline({ paused: true }); tl.to(sectionRight, { autoAlpha: 1, duration: 0.5 }).to(descriptions, { autoAlpha: 1, duration: 0.5, y: 0 }, 1); ScrollTrigger.create({ trigger: section, animation: tl, start: "top +=70", end: "bottom top", scrub: 0.5 }); }); //this.timeline is same as above tl which is played when the loader flag is received. But the animation is already played due to being in the viewport. Also, I want the timeline (tl) to play on each section scroll when in viewport but doesn't work properly. Not able to figure out where is it going wrong. Help very much appreciated. Thanks in advance.