What is the best practice of tween few times one element (with ScrollTrigger)

[_Greg _]

Hi!

Can you explain what is the best practice animate one element with multiply triggers (ScrollTrigger) (different animations for one element)?

Example (watch codepen):
1. pin parent div and fade-in box animation

2. if we scroll to 1/3 of parent height of pinned element - move box to right

3. if we scroll to 2/3 of parent height of pinned element - rotate box

 

On my codepen demo i have some issues:
1. onRefresh (switch tabs on your browser) - broke my animation

2. i try to use toggleActions, but can't specify play("label") and reverse("label"), seek('label') or duration(1)

3. i think that control one timeline (nested timelines) harder than three timelines, but i try to use three timelines and three ScrollTrigger's and have much more issues with animation

 

What i do wrong?

What is the best practice to animate one element with different triggers?

Thank you!

 

 

See the Pen ZEQOqgr by -greg- (@-greg-) on CodePen.

[_Greg _]

Maybe somone have examples with few animation to one element with controlled with ScrollTrigger

[ZachSaucier]

Hey Nekiy2. I'd a few things about your approach.

• I'm not sure why you're trying to use a master timeline and seek through it. If you want different animations to fire at different points, then use different animations that aren't connected?
• You can use percents with start/end so you don't need to calculate things yourself. In fact, calculating things yourself like you did is likely to not work well on resize.
• I'd separate your fade in and pinning into two ScrollTriggers.

Something like this:

See the Pen zYrKqqw?editors=0010 by GreenSock (@GreenSock) on CodePen.

[_Greg _]

Thank you!

11 minutes ago, ZachSaucier said:

You can use percents with start/end so you don't need to calculate things yourself. In fact, calculating things yourself like you did is likely to not work well on resize.

Wow, greate, i don't know about that!

 

13 minutes ago, ZachSaucier said:

I'm not sure why you're trying to use a master timeline and seek through it. If you want different animations to fire at different points, then use different animations that aren't connected?

i read https://css-tricks.com/tips-for-writing-animation-code-efficiently/#tip-8-modularize-your-animations that's why i write this post, i don't understand how to better use. Thank you, at last i find the answer!

 

[GreenSock]

Typically you wouldn't need something like this because you'd engineer things differently like Zach pointed out, but just for the record if you really need to wire up a ScrollTrigger so that it just animates between two labels, you can pause() the master timeline and use a tween of that timeline's playhead!

let master = gsap.timeline({paused: true});
master.to(...); // do whatever
master.addLabel("label1", 2).addLabel("label2", 5);

let labelTween = master.tweenFromTo("label1", "label2");
ScrollTrigger.create({
  animation: labelTween,
  ...
});

 

[_Greg _]

15 hours ago, GreenSock said:

master.tweenFromTo("label1", "label2");

Thank you! This is good example!

[_Greg _]

On 6/14/2020 at 11:45 PM, Nekiy2 said:

but i try to use three timelines and three ScrollTrigger's and have much more issues with animation

If i use two timeline for one element, second timeline overwrite attributes 

 

Timeline on view:

tl_inview
  .fromTo('.slide01 .box1', {autoAlpha: 0, y: "+=50"}, {autoAlpha: 1, y: 0})
  .fromTo('.slide01 .box2', {autoAlpha: 0, y: "+=50"}, {autoAlpha: 1, y: 0}, "-=0.5")

 

Timeline for chage slides:

tl_slides
  .fromTo('.slide01 .box1', {autoAlpha: 1, y: 0}, {autoAlpha: 0, y: '+=50'})
  .fromTo('.slide01 .box2', {autoAlpha: 1, y: 0}, {autoAlpha: 0, y: '+=50'})
  .addLabel('start')
  .fromTo('.slide02 .box1', {autoAlpha: 0, y: "+=50"}, {autoAlpha: 1, y: 0}, "start")
  .fromTo('.slide02 .box2', {autoAlpha: 0, y: "+=50"}, {autoAlpha: 1, y: 0}, "start")

 

On page load i have 

<div class="slide01">
  <div class="box1" style="transform: translate(0px, 0px); opacity: 1; visibility: inherit;"></div>
  <div class="box2" style="transform: translate(0px, 0px); opacity: 1; visibility: inherit;"></div>
</div>

 

See the Pen qBbqvPQ by -greg- (@-greg-) on CodePen.

 

I want that tl_inview play only once (only if scroll from top)

[ZachSaucier]

I think you're looking to use immediateRender: false?

See the Pen XWXNLYY?editors=0010 by GreenSock (@GreenSock) on CodePen.

[_Greg _]

1 minute ago, ZachSaucier said:

I think you're looking to use immediateRender: false?

@ZachSaucier thank you for your answer. Something like that, but in your codepen demo if you scroll from bottom to top, boxes inside .slide01disappearing 

 

 

 

[ZachSaucier]

In general it's easiest if you affect different elements so there's no conflict. I'd create an empty container around each box and use that for the into animation.

[_Greg _]

12 minutes ago, ZachSaucier said:

In general it's easiest if you affect different elements so there's no conflict. I'd create an empty container around each box and use that for the into animation.

Like that?

<div class="slide01">
  <div class="box1-wrapper">
    <div class="box1"></div>        
  </div>
  <div class="box2-wrapper">
    <div class="box2"></div>
  </div>
</div>

I think i understand it wrong 

See the Pen dyGOxYP by -greg- (@-greg-) on CodePen.

 

[ZachSaucier]

No, you are understanding it correctly. You should remove the immediateRender: false that was added and then you just have to fix the CSS:

See the Pen xxZRvjb?editors=0100 by GreenSock (@GreenSock) on CodePen.

[_Greg _]

Thank you, @ZachSaucier!

Sorry for my Newbie questions
So better use wrapper than try to kill tween and clear property for prevent conflict?
I try to learn GSAP i want to know how to do it right.

[ZachSaucier]

There's usually multiple ways to do things when it comes to frontend. I think it's cleaner to use a container than to try and manage the state of different animations in situations like this.

 

Ultimately if it works then do what makes the most sense to you.

[GreenSock]

On 6/14/2020 at 3:45 PM, Nekiy2 said:

On my codepen demo i have some issues:
1. onRefresh (switch tabs on your browser) - broke my animation

This was indeed an issue for non-scrub ScrollTriggers that had an animation associated with them. If you scrolled to a point where the animation was played and switch tabs and came back, the animation would have reset. That should be resolved in the upcoming release which you can preview at https://assets.codepen.io/16327/ScrollTrigger.min.js (you might need to clear your cache). 

 

Better? 

[_Greg _]

Thank you @GreenSock 

On @ZachSaucier demo its broken again 

 

[GreenSock]

Should be resolved now in the latest beta. Sorry about any confusion there.