Akash Ranjan

Hello Cassie, Thanks a lot for the help. This worked. The only issue I am seeing is that the images are not aligned to path when i load the page but when I refresh they appear correctly. The same this I am noticing with the pen you shared. Can you please help me with that. Thanks

Hello Guys, I am having trouble creating an circular animation with motion path. Basically what I am trying to achieve is that all the 4 images rotate in even manner. for example First image should start from 0%, second from 25%, third from 50% and fourth from 75%. Here is the code sandbox for my code https://codesandbox.io/s/orbit-motion-path-mb6ns?file=/src/App.js:1339-1344 Please see attached screenshot for what I am trying to achieve Please help me. Thanks

Thanks you so much Rodrigo. This worked perfectly fine. Although I am facing a strange issue only on my local machine, i.e the start and end points of the elements does not seem to be at correct position at page load but if I resize my browser window or open browser's inspector they jump to their correct positions. This is not happening on live server that's why I am unable to replicate this. Do you have any idea why this is happening. I think it is something to do with useEffect or react

Hi, I tried creating my first codesandbox thanks to you I figured out how to do it. https://codesandbox.io/s/test-gsap-template-mb6ns?file=/src/App.js I hope this will help you solve my issue

Hello Rodrigo, Thanks alot for the reply. I tried creating a codesandbox but it is giving me error dont know why. However I have created this public repo in github. https://github.com/akashrwx/testbulls Please see if this help. ☺️

Hello Guys, I am a newbie to this awesome scrolltrigger plugin. I somehow managed to get it worked the way I wanted but I am stuck at the very last part. As you can check in the below example link the entire block shrinks and move on x axis at start and at the end I want it to come back to center and become the normal size but it is not happening smoothly. You can check live example here: https://algobulls.netlify.app/ecosystem-2/ Sorry I cant upload Codepen as I am not able to replicate entire thing there. I request you guys to please help me out. I will really appreciate it. const sectionFirst = useRef() const mainIllustrationContainer = useRef() const firstHeading = useRef() const ecoCore = useRef() const ecoMarkets = useRef() const ecoOms = useRef() const ecoBrokers = useRef() const ecoclients = useRef() const ecoStrategist = useRef() const ecoChannelPartner = useRef() const ecoDataVendor = useRef() const videoBlock = useRef() const sectionSecond = useRef() const sectionThird = useRef() const sectionFourth = useRef() useEffect(() => { let tl = new TimelineMax() tl.fromTo( ecoCore.current, { autoAlpha: 0, }, { scrollTrigger: { trigger: mainIllustrationContainer.current, start: "0 300", end: "center 100", scrub: true, //markers: true, }, //y: 450, duration: 2, autoAlpha: 1, ease: "power2.out", } ) .fromTo( firstHeading.current, { autoAlpha: 0, y: 0, }, { scrollTrigger: { trigger: sectionFirst.current, start: "600 300", end: "800 150", // markers: true, scrub: true, pinSpacing: false, }, //y: 450, duration: 3, autoAlpha: 1, y: -100, ease: "power2.out", } ) .to(firstHeading.current, { scrollTrigger: { trigger: mainIllustrationContainer.current, start: "80% 300", end: "90% 100", // markers: true, scrub: true, pinSpacing: false, }, //y: 450, duration: 1, scale: 0, ease: "power2.out", }) .to(sectionFirst.current, { scrollTrigger: { trigger: mainIllustrationContainer.current, start: "0 0", endTrigger: videoBlock.current, end: "center center", // markers: true, pin: true, scrub: true, pinSpacing: false, }, //y: 450, duration: 3, ease: "power2.out", }) tl.fromTo(sectionFirst.current, { scale:1, x: 0, }, { scrollTrigger: { trigger: sectionSecond.current, start: "top-=400 300", end: "200 200", markers: true, scrub: true, }, scale: 0.53, x: -290, duration: 3, ease: "power2.out", }) // this is the one which makes it scale 1 ///////// .to(sectionFirst.current, { scrollTrigger: { trigger: "#data-vendor", start: "bottom+=150 300", end: "bottom+=250 150", // markers: true, scrub: true, }, scale: 1, x: 0, duration: 3, ease: "power2.out", }) tl.fromTo( ecoMarkets.current, { autoAlpha: 0, y: 300, }, { scrollTrigger: { trigger: sectionSecond.current, start: "top 400", end: "200 100", // markers: true, scrub: true, }, y: 0, duration: 2, autoAlpha: 1, ease: "power2.out", } ) .fromTo( ecoOms.current, { autoAlpha: 0, y: 300, }, { scrollTrigger: { trigger: sectionThird.current, start: "-300 200", end: "-100 100", // markers: true, scrub: true, }, y: 0, duration: 2, autoAlpha: 1, ease: "power2.out", } ) .fromTo( ecoBrokers.current, { autoAlpha: 0, y: 300, }, { scrollTrigger: { trigger: sectionFourth.current, start: "-300 200", end: "-100 100", // markers: true, scrub: true, }, y: 0, duration: 2, autoAlpha: 1, ease: "power2.out", } ) .fromTo( ecoclients.current, { autoAlpha: 0, y: 300, }, { scrollTrigger: { trigger: "#clients", start: "-300 200", end: "-100 100", // markers: true, scrub: true, }, y: 0, duration: 2, autoAlpha: 1, ease: "power2.out", } ) .fromTo( ecoStrategist.current, { autoAlpha: 0, y: 300, }, { scrollTrigger: { trigger: "#pro-strategist", start: "-300 200", end: "-100 100", // markers: true, scrub: true, }, y: 0, duration: 2, autoAlpha: 1, ease: "power2.out", } ) .fromTo( ecoChannelPartner.current, { autoAlpha: 0, y: 300, }, { scrollTrigger: { trigger: "#channel-partner", start: "-300 200", end: "-100 100", // markers: true, scrub: true, }, y: 0, duration: 2, autoAlpha: 1, ease: "power2.out", } ) .fromTo( ecoDataVendor.current, { autoAlpha: 0, y: 300, }, { scrollTrigger: { trigger: "#data-vendor", start: "-300 200", end: "-100 100", // markers: true, scrub: true, }, y: 0, duration: 2, autoAlpha: 1, ease: "power2.out", } ) .fromTo( '#eco-video', { autoAlpha: 0, }, { scrollTrigger: { trigger: "#data-vendor", start: "bottom 200", end: "bottom+=200 100", // markers: true, scrub: true, }, duration: 2, autoAlpha: 1, ease: "power2.out", } ) }, [])