Adithya

I've been using the scrollmagic syntax without migrating for the scrolltrigger, everything looked good but suddenly i don't see the animation script getting applied whatsoever . Is this because scrollmagic is deprecated. Any light would be of great help.Thanks

hey ! @akapowl and @ZachSaucier Got you ! I've been able to achieve the animation , but even after a forEach loop , why do the text animation all animate at one go , i want the text1 to fade in and out followed by the next and so on , i can target each text individually but that would make my code long , what am i missing exactly ? codepen of the flawed animation https://codepen.io/adithyacodes/pen/NWbXqMz and the codepen here https://codepen.io/akapowl/pen/00806d3c2fe0f4275ec9846196b85919 which was provided from you in the same thread above, I'm bit confused why do we use two scrolltrigger objects ( scrolltrigger and scrolltrigger.create) for the usecase Thanks

Hey ! see if this can help you

This the code snippet which is crashing and the text stack one next to other

Hey ! i was able to fix the scroll issue , the only issue which still persists is , i want the text to appear while it comes in and go off while the next comes ,instead my test gets stacked, is there a better approch here the-idc-google-chrome-2021-02-24-03-14-41_IPNZk7c4.mp4

Hey ! I've been working with animation part , i have implemented the same piece of code same as the boxes codepen , but the animation is not in sync with the scroll , it just happens as a slidehow even without scroll. Just if its possible to tell what is making the animation in sync with scroll here , i have tried refering the docs and playing around the code and implementing it but the animation timeline doesn't sync with scroll. thanks

@akapowl , Hey ! That's some serious breakthrough , this was a simple sample case created to explain my issue , but i was trying to do this in the animation which wasn't happening , Is there an approach where i can hide the other boxes from the dom and make them appear only when they are animating as i scroll ( say : when the red box animates the other boxed stacked without animation shoudn't be visible in the dom ) . I genuinely thank you for the pen , it helped me work on the issue better. Thanks a ton !

Hey ! I've included a codepen here , which is quite similar to my use case , here i want each box ( yellow, red , green ) to fade out one after the other as i scroll . bit confused since they fadein and out at the same view port . glad, if you could help

Hey ! I've tried implemnting the approach but it isn't something that is desired, pain-points : 1. The heading animation should be corresponding to the scroll , as i scroll the first heading comes and vanishes and in the same place the next heading comes ( kind of carousel but it happens as i move the page-scrollbar (nobuttons)

Hey ! i just watched the position video , I've got a bunch of elements like 5 titles to animate , so should i go like ( #title-1, #title-2 ) target and animate them indvidually

Hey ! I've made the same with codepen , so that it would be bit easy to find the catch here . And , initially i have also linked a video of how the animaton is supossed to look . If you can look at it and let me know what is it not working , Meantime, I'm having a look at the video you shared , hoping a breakthrough

hey ! Do codesandox links work on you forum ?

Hey ! I'm newbie to gsap and the journey here as been great so far ! I've been stuck with this animation for quite few days and thought i could seek help , Pain-point : The heading must animate one after the other while I scroll , but everything comes into the viewport at the same instance. desired-output : https://drive.google.com/file/d/1gFJEtuEkhNUfchI3Pgb14h6EOLXyrcjW/view?usp=drivesdk Hereby I attach a video of how it should look while i scroll. Note: The octopus-image and the paragraph down the heading will be animated the same way , I've just made it with the Heading in codesandbox for testing prupose. Thanks

Hey ! this is the link to sandbox https://codesandbox.io/s/ciyew?file=/src/App.js , but the heading and para aren't showing up in the output screen

I totally understand , but i'm finding few difficulties in migrating my code logic from scrollmagic to scrolltrigger

The scrollmagic code i attached here is all fine and works good , but i need to migrate the same into react + scrolltrigger which I'm unable to - for which i have attached a codepen link .

Hey ! Let me know , if this works . https://ciyew.csb.app/

Hey ! let me make it simple and concise , This is the code (screenshots attached) where the animation works fine but is built on Jquery and scrollmagic Task: Need to replicate the same in React(nextjs) + scrolltrigger . What the animation does: You see a container has three elements ( the octopus image , a heading , a parapgraph) each of them must move individually in horizontal manner when i scroll ( I don't want the whole container to move like slides but each element must be accessed , that's how its done with jquery and scrollmagic if u have the look at the code) <div id="feat-container" class="overflow-hidden"> <div class="container"> <div class="row"> <div class="feat-item octoPin" id="feat0"> <div class="col-5"> <div class="feat-img"> <div class="feat-ace"> <img src="images/SVG/ACE_Logo_white_copy-01.svg" alt="ACE armor connect engine" style="width: 360px" /> </div> </div> </div> <div class="col-sm-5"> <div class="feat-txt"> <h1 class="feat-title" id="octo-pin-here"> Why Armor connect engine leads the way in EDI </h1> </div> </div> </div> </div> </div> <div class="container"> <div class="row"> <div class="feat-item octoPin" id="feat1"> <div class="col-5"> <div class="feat-img"> <div class="feat-ace"> <img src="images/SVG/ACE_Logo_white_copy-01.svg" alt="ACE armor connect engine" style="width: 360px" /> </div> </div> </div> <div class="col-sm-5"> <div class="feat-txt"> <h1 class="feat-title">Affordability</h1> <p class="feat-para"> Compared to other EDI options, ACE is much more cost-effective. Use the calculator above to get your exact pricing. </p> </div> </div> </div> </div> </div> var featCtrl = new ScrollMagic.Controller(); // Create scenes in jQuery each() loop $(".feat-item").each(function (i) { var featTitle = $(this).find(".feat-title"); var featPara = $(this).find(".feat-para"); var featImg = $(this).find(".feat-img"); var octoPin = $(this).find(".octoPin"); var featAnimIn = new TimelineMax(); var featAnimOut = new TimelineMax(); // CREATE TWEENS featAnimIn .from(featTitle, 0.10, { delay: 0, opacity: 0, xPercent: 40, ease: Power1.easeInOut, }) .from(featPara, 0.10, { delay: 0, xPercent: 15, opacity: 0, ease: Power1.easeInOut, }) .from(featImg, 0.35, { delay: 0, opacity: 0, ease: Power1.easeInOut, }); featAnimOut .to(featTitle, 0.10, { opacity: 0, xPercent: 20, ease: Power1.easeInOut, }) .to(featPara, 0.10, { delay: 0, xPercent: 10, opacity: 0, ease: Power1.easeInOut, }) .to(featImg, 0.35, { delay: 0, opacity: 0, ease: Power1.easeInOut, }); // CREATE SCENES var featSceneIn = new ScrollMagic.Scene({ triggerElement: this, triggerHook: "onEnter", reverse: true, }) .setTween(featAnimIn) .setPin(octoPin) // .addIndicators({ // colorTrigger: "red", // colorStart: "red", // colorEnd: "red", // indent: 240, // }) .addTo(featCtrl); var featSceneOut = new ScrollMagic.Scene({ triggerElement: this, triggerHook: "onLeave", reverse: true, }) .setTween(featAnimOut) .setPin(octoPin) // .addIndicators({ // colorTrigger: "green", // colorStart: "green", // colorEnd: "green", // indent: 20, // }) .addTo(featCtrl); });