Jump to content
GreenSock

Search In
  • More options...
Find results that contain...
Find results in...
_Greg _

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

Recommended Posts

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

Link to comment
Share on other sites

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

Link to comment
Share on other sites

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

  • Like 1
Link to comment
Share on other sites

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!

 

Link to comment
Share on other sites

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,
  ...
});

:) 

  • Like 2
  • Thanks 1
Link to comment
Share on other sites

15 hours ago, GreenSock said:

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

Thank you! This is good example!

Link to comment
Share on other sites

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)

Link to comment
Share on other sites

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 

349983788_Annotation2020-06-18154327.thumb.png.e7ae56623582c3b2d2b12dbb59241784.png

 

 

 

Link to comment
Share on other sites

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.

Link to comment
Share on other sites

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

 

Link to comment
Share on other sites

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.

Link to comment
Share on other sites

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.

  • Thanks 1
Link to comment
Share on other sites

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? 

  • Like 3
Link to comment
Share on other sites

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

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