Jump to content
Search Community

the animation crashes after using the stagger

olr777 test
Moderator Tag

Go to solution Solved by Cassie,

Recommended Posts

maybe I'm doing it wrong, the thing is that after using the stagger to open the lid when he wants to add another animation .to (...) it stops working on the scroll, when I remove the lines responsible for opening the lid, it works fine. Did not work .to(".anim-bin__img__item--3")..as if transform x is performed immediately without using a scroll

let bin = new gsap.timeline({
        // defaults: {
        //     ease: "none",
        // },
        scrollTrigger: {
            trigger: ".sec-anim-wrap",
            start: "top top",
            end: () => window.innerHeight,
            scrub: true,
            markers: true,
            pin: ".sec-anim-wrap",

        }
    })

    .to(".anim-bin__img__item-plat--10", {
        opacity: 0,
        // stagger:100
    })
    .from(".anim-bin__img__item-plat--all", {
        opacity: 0,
        stagger: 100
    }, -1)
    .to(".anim-bin__img__item-plat--all", {
        opacity: 0,
        stagger: 100
    }, 100)
    .set(".anim-bin__img__item-plat--1", {
        opacity: 1,
    })
    .to(".anim-bin__img__item--3",{
        y: -850,
    })

 

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

Ok, I posted it on codpen.
At the end, these two containers are to flow smoothly into this basket on the scroll, now they appear there immediately.
When I remove the code responsible for opening the flaps, where there is a stagger, it works smoothly.
Link to codpen:

See the Pen gOvgvwR by olr777 (@olr777) on CodePen

Link to comment
Share on other sites

Looks like you need to work on your timings a bit though

 

If I were you I would get rid of ScrollTrigger and just focus on getting the timing on your timeline feeling right. Then add scrollTrigger afterwards

 

This will help!
 

 

  • Like 1
Link to comment
Share on other sites

41 minutes ago, Cassie said:


Adjusted to use 1 instead of 100 like Trapti's suggested -

 

 

 


Hmm, that's not what I meant, the flap lifted well, smoothly and quickly - now it's like an opacity clearance, now there is no smooth . My point is that when the flap is raised, these two containers are supposed to fall from the top into the middle, but they do it so quickly that you can't see the animation. I would like to write .to(...) because there will be a few more sequences, but after doing the stagger I can't move on, everything happens quickly, I think I need to separate it somehow .. maybe someone can help me quickly separate it and write it down correctly so that I can understand it

Link to comment
Share on other sites

58 minutes ago, Cassie said:

Looks like you need to work on your timings a bit though

 

If I were you I would get rid of ScrollTrigger and just focus on getting the timing on your timeline feeling right. Then add scrollTrigger afterwards

 

This will help!
 

 

hmm

Link to comment
Share on other sites

Your just need to tweak your timings - your stagger was spaced over 100 seconds and the drop down of one of the bins was 0.12 seconds. That's a huge difference.

You're almost there! Is there a GSAP specific question we can help with? Are you struggling to understand a particular part of this?

See the Pen YzeNLoy?editors=1010 by GreenSock (@GreenSock) on CodePen

  • Like 1
Link to comment
Share on other sites

50 minutes ago, Cassie said:

@Cassie
Your just need to tweak your timings - your stagger was spaced over 100 seconds and the drop down of one of the bins was 0.12 seconds. That's a huge difference.

You're almost there! Is there a GSAP specific question we can help with? Are you struggling to understand a particular part of this?
 

 

ok, I understand :) but I still have a question, is there an option to accelerate the opening of this cover? to make the disappearance of subsequent img faster? (like at the beginning when I sent the link)? when I change the stagger or delay, the next stage stops working (falling containers) and this is the main problem that I cannot deal with.

Link to comment
Share on other sites

1 minute ago, olr777 said:

ok, I understand :) but I still have a question, is there an option to accelerate the opening of this cover? to make the disappearance of subsequent img faster? (like at the beginning when I sent the link)?so that there is no glow when loading the next img of the cover.when I change the stagger or delay, the next stage stops working (falling containers) and this is the main problem that I cannot deal with.

 

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...