scrollTrigger onEnterBack

[Alexandra Spalato]

Hello,

I'm working on this gatsbyjs project https://cadell.netlify.app/ , the problem I have is that when I scrollup from the menu, I need to put back the text at Y:0, for that I use onEnterBack, then another problem appears, if I scroll manually,  then it becomes buggy (try it)

so I tried to put a conditionnal depending on the velocity, but the minumum to make it work with the first menu items is -1200, and it still slow enough to trigger the animation when I scroll manually

...I don't know if it's very clear...in other words I need to trigger the animation to put back the text in place, onEnterBack, only if the event comes from the menu scrolling and not from a manual scroll...

I have tried with velocity, but perhaps there is better ways...

here is the repo https://github.com/alexadark/cadell/blob/master/src/templates/page.js

 

and this is the animation code 

sections.forEach(section => {
      const tl = gsap.timeline({
        scrollTrigger: {
          trigger: section,
          // start: "top-=10% top",
          start: "top top",
          end: "bottom top",
          scrub: true,
          pin: true,
          // markers: true,
          ease: "power4.out",

          onEnterBack: self =>
            self.getVelocity() < -1200 &&
            gsap.to(".text", { duration: 1, y: 0 }) &&
            console.log("anim"),
        },
      })
      tl.fromTo(
        section.querySelector(".text"),
        { y: 0 },
        { duration: 1, y: "-80%" }
      )
    })

 

[ZachSaucier]

Hey Alexandra. It sounds like you're needing to use toggleActions here. Perhaps this is what you're looking for? Or something similar? I recommend the docs for learning how to use toggleActions.

toggleActions: "play none none reset"

It's hard to say for sure given we can't play around with it ourselves. If you could make a minimal demo in a CodePen or something it'd likely get your question answered more quickly.

[Alexandra Spalato]

Thank you, going to look at it!

yes I have seen toggle actions, but didn't understood it very well... this is the occasion!

[Carl]

I tried to break down toggle actions in a simple form in this video. Also there’s a great demo from GreenSock that is great to study

 

 

[Alexandra Spalato]

Thank you!

[Alexandra Spalato]

@Carl I'm a video learner, so I definitely will look at your courses

I have the one from Ihatetomatoes which I like, but it's good to have different sources!

[Alexandra Spalato]

here is a pen that does the same as the site 

See the Pen LYGVJvK by alexadark (@alexadark) on CodePen

I tried the toggleActions, but they don't seem to work when the movement is controlled by scroll

so onEnterback I put back the right side at y 0, for when people use the menu to scroll up, the text need to be in place

but if I scroll up it becomes jumpy

with the velocity < -1200 it's not so bad, but if I scroll up to fast it's jumpy again

[Alexandra Spalato]

Another problem I have is that sometimes when scrolling (specially with the menu) things end up totally messed up like that https://share.getcloudapp.com/xQuDWQ1k

and I really need to prevent this...

[ZachSaucier]

You shouldn't need the onEnterBack, that's what the toggleActions handle for you.

 

6 hours ago, Alexandra Spalato said:

Another problem I have is that sometimes when scrolling (specially with the menu) things end up totally messed up like that https://share.getcloudapp.com/xQuDWQ1k

and I really need to prevent this...

Please make a minimal reproduction of the issue if you'd like us to help with debugging that