Jump to content
Search Community

Different animation in the same scrollTrigger.

JackiChan test
Moderator Tag

Recommended Posts

Hi,
I have 2 classes that share the same scroltrigger (.main):
 

gsap.fromTo(".ls, .rs", {
        y: "0", opacity: 1}, {y: '-100%', opacity: 0,
        scrollTrigger: {
            trigger: ".main",
            scrub: true, pin: true,
            start: 'top top',
            end: '+=50%',
           
        }
    })

Both has y:'-100%', is there a way for .rs class to be animated y:'100%' instead? So .ls will go up on scroll, and .rs should go down.
Thanks you for any help.

Link to comment
Share on other sites

It's pretty tough to troubleshoot without a minimal demo - the issue could be caused by CSS, markup, a third party library, your browser, an external script that's totally unrelated to GSAP, etc. Would you please provide a very simple CodePen or CodeSandbox that demonstrates the issue? 

 

Please don't include your whole project. Just some colored <div> elements and the GSAP code is best (avoid frameworks if possible). See if you can recreate the issue with as few dependancies as possible. If not, incrementally add code bit by bit until it breaks. Usually people solve their own issues during this process! If not, then at least we have a reduced test case which greatly increases your chances of getting a relevant answer.

 

Here's a starter CodePen that loads all the plugins. Just click "fork" at the bottom right and make your minimal demo

See the Pen aYYOdN by GreenSock (@GreenSock) on CodePen

 

If you're using something like React/Next/Nuxt/Gatsby or some other framework, you may find CodeSandbox easier to use. 

 

Once we see an isolated demo, we'll do our best to jump in and help with your GSAP-specific questions. 

Link to comment
Share on other sites

We love seeing minimal demos around here, because that way we can just jump into the code and change a few things. Sharing a minimal demo will increase your chance of getting an answer (faster) and will result in better (more visual) answers.

 

Personally I like to always start with a timeline in GSAP, definitely in the beginning when you're starting out. With a timeline you get so much more control and it is easier to modify your tweens if you want to add or change something at a later time.

 

You could do this several ways, but I like to write out my tweens, so that it will be easy to change them later. As you can see I've changed your single tween to a timeline with all the logic of your ScrollTrigger in it. Then I've created two tweens on that timeline, one for your .rs and one for your .ls, and one moves up and one moves down.

 

The best thing to do with ScrollTrigger is to remove it! This seems counter intuitive, but ScrollTrigger is just animating something on scroll, so just focus on the animation at first and only when you're happy with the animation add ScrollTrigger back in.

 

See the Pen mdKByEL?editors=0010 by mvaneijgen (@mvaneijgen) on CodePen

 

But wait, they are not moving at the same time!? That is where the position parameter comes in. You can define a label, tell the next tween to start at the same time as the previous tween or tell them to start on a specific time of the timeline. Take a look at the docs if you want to learn more. 

 

See the Pen OJExJeE?editors=0010 by mvaneijgen (@mvaneijgen) on CodePen

 

Hope it helps and happy tweening! And please include a minimal demo next time 😀

  • Like 1
Link to comment
Share on other sites

Perfect, thanks. I was not aware about this solution.

BTW: Is it possible to have a callback only for one item as shown? This is not working and raise alert on page load, so i suspect there is a way. Thanks a lot !

 

tl.to(".ls", {
        yPercent: -100,
        opacity: 0,
    }, "myLabelStartSameTime")

    tl.to(".rs", {
        yPercent: 100,
        opacity: 0,
        onLeave: () => alert (1)
    }, "myLabelStartSameTime")

Link to comment
Share on other sites

20 minutes ago, JackiChan said:

BTW: Is it possible to have a callback only for one item as shown? This is not working and raise alert on page load, so i suspect there is a way. Thanks a lot !

 

Yes, just wrap your tweens in a normal Javascript if statement and check if the element is on the page. 

 

See the Pen eYKGmav?editors=0010 by mvaneijgen (@mvaneijgen) on CodePen

Link to comment
Share on other sites

5 minutes ago, mvaneijgen said:

 

Quote

Yes, just wrap your tweens in a normal Javascript if statement and check if the element is on the page. 

Thank you, but below you will see onLeave callback, that fires when page is loaded, now then element is onLeave. Is ia a good place to have this callback?

 

if (document.querySelector('.ls')) {
        tl.to(".ls", {
            yPercent: -100,
            opacity: 0,
            onLeave: () => alert (1)
        })
    }

 

 

Link to comment
Share on other sites

8 minutes ago, mvaneijgen said:

I think you want onLeave to be in the ScrollTrigger object it self, because the tween isn't leaving, but the ScrollTrigger is leaving. Again minimal demo would really help instead of dropping code in comments. 

Bro, wihout any minimal codepen, you helped me, this code is such silly easy for you, and also explained, that doing codepen with isolation will take more time than our conversation.

Regarding my last Q i found that to() has callback, and this one helped me:
tl.to(".ls", {
        yPercent: -100,
        opacity: 0,
        onComplete: () => // Action that i needed,
    })

 

Thank you.

Link to comment
Share on other sites

7 minutes ago, JackiChan said:

that doing codepen with isolation will take more time than our conversation.

 

Ha, no. It takes more time for me (or the one helping).

 

We strive to help anyone here on the forum, whether or not they are paying for a Greensock license, but we ask a little effort from anyone to make it easier to help you, by providing a minimal demo (see our forum guide lines). Out of curtesy I answered your question, seen that you're new here. 

 

Glad you've found a solution, but in the future please provide a minimal demo, even if you think it's the most easy code in the world. That makes it a lot easier for anyone to jump in and help you. 

 

Hope it helps and happy tweening! 

  • Like 1
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...