Jump to content
Search Community

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

_Greg _ test
Moderator Tag

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

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

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

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

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

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