Jump to content
Search Community

how can i make each item last longer until its transition is complete?

yeisonvelez11 test
Moderator Tag

Recommended Posts

I have this code with which I hope to make myself understood.

 


     

gsap.registerPlugin(ScrollTrigger);
ScrollTrigger.defaults({
  toggleActions: "restart pause resume none",
  // markers: true,
});
let square = gsap.timeline({
  scrollTrigger: {
    start: "top center",
    end: "200px 100px",
    toggleActions: "restart none reverse none",
    //markers: true,
    scrub: true,
    trigger: ".square1",
    toggleActions: "restart none reverse none",
  },
});


square.from(".square1", {
  autoAlpha: 0,
  duration: 3,
});
square.from(
  ".square2",
  {
    autoAlpha: 0,
    duration: 3,
    x: "-50%"
  },
  "-=3"
);

let circle=gsap.timeline({
  scrollTrigger: {
    start: "top center",
    end: "200px 100px",
    toggleActions: "restart none reverse none",
    //markers: true,
    scrub: true,
    trigger: ".circle",
    toggleActions: "restart none reverse none",
  },
});


circle.from(".circle", {
  autoAlpha: 0,
  duration: 1000,
  rotate:30
});

 

In my real code, I plan to include audios for each animation. For example, the first audio can last 30 seconds, so I would like the first animation to last 30 seconds and when it ends, the next one begins, which will have the same scenario, for example, audio 2 has 20 seconds so I will need my second animation to last a total of  20 seconds.

 

I'm using the `duration` property, but I'm not achieving my goal, I don't know how to delay the next animation or make an animation last longer.

**Note**: eventually I will do something to make the scroll move automatically, but eventually the user will be able to move the scroll and from the point where the scroll stops my animation will continue.
and this offset will be a transition of scroll from position y = 0 to the end in a total number of seconds according to the number of total audios.
I hope to make me understand

 

With this example I would like to simulate that the first animation takes a long time and when it finishes continue the next one and so on.

I hope to make me understand

how can I do it?

this is my live code:

 

http://plnkr.co/edit/PvHLb9b0HHcdX3Er?open=lib%2Fscript.js


 

voc.gif

Link to comment
Share on other sites

Hi,

 

While is possible to achieve what you're trying to do I wouldn't recommend it. Scroll animations inherently depend on the scroll position, which depends on how the user interacts with the site. For example if a user scrolls midway through the first animation and stays there for 3 minutes, the audio would have ended by the time the user starts scrolling again. Also what happens if the user taps the page down key three times? The content would go down super fast so the first animation would never last 30 seconds. The point is that the way scroll is handled is something you cannot totally control without some degree of discomfort for the user. So basically what you need to do is force the user to stay in a specific part of the page for the amount of time you indicated and this is what I wouldn't recommend.

 

To achieve that you would have to hijack the scrolling in order to prevent the user from going beyond that section until you decide it and that is a big NO-NO in terms of UX. To be completely honest, you could have the best animations and content in the world, but I would leave the site and never return. While the need to create fun and engaging content is understandable to create a good experience for the user and at the same time promote what the brand offers, most people won't recommend forcing the user into situations like that. What you can do is add something to your UI in order to allow the user to leave that section whenever they want, at the end is all about flexibility.

 

What I would do is remove the scroll in the main container, then in the particular section the user is in create some sort of scroll proxy (something that can be done with ScrollTrigger) for that particular section in order to allow the particular animation for that section until the audio is completed, then remove allow the scroll in the main container, move onto the next section and do it again.

 

I know a user in the forums who is a UI/UX wizard, I'll contact him in order to see if He can share a few ideas on the subject.

 

Happy Tweening!!!

  • Like 4
Link to comment
Share on other sites

I am really very touched by your great response, and I appreciate it. I know what you are talking about and believe me I will think about the user and the experience.

Believe me I'll know how to handle that. but for now I need to know how to make an animation last longer as indicated in the question.

Link to comment
Share on other sites

1 minute ago, yeisonvelez11 said:

but for now I need to know how to make an animation last longer as indicated in the question.

There is no way to completely achieve that, since the user is the one that has complete control over scroll speed/amount.

1 minute ago, ZachSaucier said:

I'd probably use a video instead :) 

Yep, Zach is actually right about that.

  • Like 1
Link to comment
Share on other sites

1 minute ago, yeisonvelez11 said:

When will you do it?

I think you're misunderstanding what I was saying. I was saying I recommend that you create a video to show users instead since you need to have full control over the animation, audio, and timings. I was not saying I was going to create a video on how to create what you're asking for because what you're asking for is impossible as Rodrigo has explained.

  • Like 2
Link to comment
Share on other sites

3 minutes ago, yeisonvelez11 said:

I have another idea, how about scrolling the scrollbar automatically in an animation faster or slower according to how long the animation should last

Yeah but what actually controls the scroll? The user so you'll always depend on what the user does. A video with no scroll is the only way you can actually achieve a full level of control over it, see this example in the landing page:

https://signifly.com/

 

No scroll and full control of the animation and audio durations.

 

Happy Tweening!!!

  • Like 2
Link to comment
Share on other sites

Again, there is no way to tell a ScrollTrigger with scrub to take a certain duration of time to complete because it is completely dependent on the user's scroll speed. So what you're wanting can't happen.

 

If you make a timeline animation and then scrub then control the progress of said animation on scroll that's doable. But what you're asking for is not.

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