Adithya Posted February 18, 2021 Share Posted February 18, 2021 (edited) 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); }); Edited February 18, 2021 by Adithya more clear query Link to comment Share on other sites More sharing options...
tailbreezy Posted February 18, 2021 Share Posted February 18, 2021 22 minutes ago, Adithya said: See the Pen by (@) on CodePen No codepen link is present. Quote the catch here is ' I don't want to focus the parent container containing the elements to move in whole but just the child What is stopping you? Simply offset the children and add a few triggers. Maybe even add a wrapper around them that doesn't include the parent. 1 Link to comment Share on other sites More sharing options...
Adithya Posted February 18, 2021 Author Share Posted February 18, 2021 Hey ! Let me know , if this works . https://ciyew.csb.app/ Link to comment Share on other sites More sharing options...
tailbreezy Posted February 18, 2021 Share Posted February 18, 2021 1 minute ago, Adithya said: Hey ! Let me know , if this works . https://ciyew.csb.app/ Excellent start. But this is just a template, no actual gsap code to review. Link to comment Share on other sites More sharing options...
Adithya Posted February 18, 2021 Author Share Posted February 18, 2021 15 minutes ago, tailbreezy said: No codepen link is present. What is stopping you? Simply offset the children and add a few triggers. Maybe even add a wrapper around them that doesn't include the parent. 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 . Link to comment Share on other sites More sharing options...
tailbreezy Posted February 18, 2021 Share Posted February 18, 2021 This is basically all your code in the sandbox. I don't see any gsap code. Link to comment Share on other sites More sharing options...
Rodrigo Posted February 18, 2021 Share Posted February 18, 2021 Hi, You can create a React app sample with GSAP using Codesandbox, give it a try to create a reduced sample that illustrates the issue you're having. You can even create sandboxes from Git branches if you prefer that approach. Happy Tweening!!! 2 Link to comment Share on other sites More sharing options...
ZachSaucier Posted February 18, 2021 Share Posted February 18, 2021 We at GreenSock don't recommend ScrollMagic and we don't support it in these forums. Instead we recommend the official scroll plugin: ScrollTrigger! It's better in every way. The docs and demos section should get you started. We also highly recommend the GSAP 3 syntax. Upgrading is easy! If you'd like help debugging, please recreate the error in CodeSandbox (and use ScrollTrigger and the GSAP 3 syntax) as Rodrigo suggested. 2 Link to comment Share on other sites More sharing options...
Adithya Posted February 18, 2021 Author Share Posted February 18, 2021 19 minutes ago, ZachSaucier said: We at GreenSock don't recommend ScrollMagic and we don't support it in these forums. Instead we recommend the official scroll plugin: ScrollTrigger! It's better in every way. The docs and demos section should get you started. We also highly recommend the GSAP 3 syntax. Upgrading is easy! If you'd like help debugging, please recreate the error in CodeSandbox (and use ScrollTrigger and the GSAP 3 syntax) as Rodrigo suggested. I totally understand , but i'm finding few difficulties in migrating my code logic from scrollmagic to scrolltrigger Link to comment Share on other sites More sharing options...
Adithya Posted February 18, 2021 Author Share Posted February 18, 2021 35 minutes ago, tailbreezy said: This is basically all your code in the sandbox. I don't see any gsap code. 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 Link to comment Share on other sites More sharing options...
ZachSaucier Posted February 18, 2021 Share Posted February 18, 2021 1 hour ago, Adithya said: this is the link to sandbox https://codesandbox.io/s/ciyew?file=/src/App.js I'm just seeing the default starter files. Make sure to save your work if you haven't already. Link to comment Share on other sites More sharing options...
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment
Create an account
Sign up for a new account in our community. It's easy!
Register a new accountSign in
Already have an account? Sign in here.
Sign In Now