Jump to content
Search Community

Gsap|scrolltrigger|react|horizontal scroll , Issues with accessing individual element in container for horizontal scroll

Adithya test
Moderator Tag

Recommended Posts

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(featTitle0.10, {
      delay: 0,
      opacity: 0,
      xPercent: 40,
      ease: Power1.easeInOut,
    })
    .from(featPara0.10, {
      delay: 0,
      xPercent: 15,
      opacity: 0,
      ease: Power1.easeInOut,
    })
    .from(featImg0.35, {
      delay: 0,
      opacity: 0,
      ease: Power1.easeInOut,
    });
 
  featAnimOut
    .to(featTitle0.10, {
      opacity: 0,
      xPercent: 20,
      ease: Power1.easeInOut,
    })
    .to(featPara0.10, {
      delay: 0,
      xPercent: 10,
      opacity: 0,
      ease: Power1.easeInOut,
    })
    .to(featImg0.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);
});

Screenshot (63)-compressed.jpg

Edited by Adithya
more clear query
Link to comment
Share on other sites

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.

  • Like 1
Link to comment
Share on other sites

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

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.

  • Like 2
Link to comment
Share on other sites

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

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 account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.
×
×
  • Create New...