[Gsap | scrollMagic | NextJS]

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

[Scrolltrigger | horizontal scroll]

16 hours ago, akapowl said:

 

In addition to what Zach said:

 

When you incorporate a ScrollTrigger as an object in a tween or a timeline it is supposed to be scrollTrigger:{...} in camelCase.

 

Also toggleActions and scrub won't work alongside each other - when you include both, the scrub will take control of the tween/timeline and the toggleActions becomes redundant.

 

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  

See the Pen NWbXqMz by adithyacodes (@adithyacodes) on CodePen

 

 

and the codepen here 

See the Pen 00806d3c2fe0f4275ec9846196b85919 by akapowl (@akapowl) on CodePen

 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

[Reactjs page transition]

On 2/22/2021 at 2:22 AM, viksa said:

What I want to achieve is, when I change page (route) on my website to have an animation like the rapid image layers animation on the following link (when you click on "Commotion"): https://tympanus.net/Development/RapidLayersAnimation/

 

How can I do it?

Hey ! see if this can help you 

 

 

[Scrolltrigger | horizontal scroll]

Just now, Adithya said:

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 

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

[Scrolltrigger | horizontal scroll]

2 hours ago, ZachSaucier said:

Based on that description it sounds like you're not using the scrub property of ScrollTrigger. But it's impossible to say for sure without a minimal demo.

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 

[Scrolltrigger | horizontal scroll]

7 hours ago, akapowl said:

 

There is no single one-solution-fits-all-needs approach - again, it depends on how exactly you want things to happen.

 

If you want something similar to the video you posted, you would probably first have to set all but the first box (the red one) to invisible.

Based on my approach what you'd want to do instead of using a single tween, is use a timeline and add a second tween for the nextElement to fade in after the first has animated out. Of course you'd have to check for the next element to animate beforehand.

 

If you do it like that though, you will likely run into conflicting tweens on the autoAlpha/opacity, so you could think about wrapping your boxes, set those wraps to invisible initially and in the second tween of your timeline tween on the wraps' autoAlpha to make the next box appear.

 

 

I'd suggest you give it a try based on my demo and we'll see how we can help you from there.

 

 

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

 

[Scrolltrigger | horizontal scroll]

@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 !

[Scrolltrigger | horizontal scroll]

17 hours ago, GreenSock said:

There are many, many ways you could build this. Unfortunately we can't do it all for you but we'd be happy to answer any GSAP-specific questions and I'm also willing to describe a general approach and you can run with it: 

 

You could initially set all the opacities to 0 and have each section sitting on top of each other (position: fixed should be fine, or absolute with top: 0). Then, you could set up individual ScrollTriggers either with specific number values of scroll positions or you could put "dummy" (invisible) <div> elements stacked vertically so that you could just use them as trigger points. 

 

Then, use onToggle callbacks to call a function that manages fading the appropriate elements in and/or out. 

 

Another option is to set up one long timeline that has each element fade in/out at various places along the timeline, and then just link that timeline to the scroll position by setting a scrollTrigger value on that entire timeline, and set scrub: true (or use a number if you want it to be "smooth"). 

 

I would recommend doing just the simplest version using that CodePen you started with, and if you run into trouble post it here with your GSAP-specific question and we'd be happy to jump in and help. 

 

Good luck!

 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

[Scrolltrigger | horizontal scroll]

1 hour ago, Adithya said:

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

 

1 hour ago, Adithya said:

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 ! 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)

[Scrolltrigger | horizontal scroll]

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 

[Scrolltrigger | horizontal scroll]

15 minutes ago, tailbreezy said:

 

I would guess you are using standalone gsap.to() or gsap.from tweens that are not part of a timeline.
This means that all the tweens happen simultaneously, you can use a delay option {delay: 1} in your vars to space them apart, but it is much better with a timeline.

 

Here are the relevant links from the docs.

 

https://greensock.com/docs/v3/GSAP/Timeline

 

 

Try with

var timeline = gsap.timeline()
.to('.target1', {...your code here})
.to('.target2', {...your code here})

 

 

I think they are not embedded like codepen links, but it is easy to follow and check them.

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

[Scrolltrigger | horizontal scroll]

hey ! Do codesandox links work on you forum ?

[Scrolltrigger | horizontal scroll]

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

See the Pen eYBGXyW by adithyacodes (@adithyacodes) on CodePen

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

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

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

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 

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

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 . 

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

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

 

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

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);

});