how to use lottiescrolltrigger with timeline

[Lovestoned 11 Likes (Newbie)]

As you see on codepen animation working with gsap.to... function

I want to make it with timeline. for example my other scrolltrigger codes like that:

 

           let tl = gsap.timeline({
                scrollTrigger: {
                    scroller:".allsite",
                    trigger:".s2",
                    scrub: true,
                    pin: true,
                    anticipatePin:true,
                    start: "top top",
                    end:"100%",
                    pinType: 'fixed'
                }
            });

            tl.to(".div1", {
                opacity:1
            });
            tl.to(".div2", {
                marginTop:0,
                opacity:1
            },0);

 

this is simple timeline usage. How can I use timeline with lottie code?

 

thanks.

 

See the Pen jOmWRWz by ersenturgut (@ersenturgut) on CodePen

[Cassie 3,980 Likes (Superhero)]

You can play a Lottie animation with .play()

So you can add that to callbacks like this. Does that help or do you need it to scrub? (what are you trying to achieve?)

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

[Lovestoned 11 Likes (Newbie)]

good but it is playing once...

 

thanks for your reply..

[Cassie 3,980 Likes (Superhero)]

These are the methods you can use on Lottie animations - https://airbnb.io/lottie/#/web?id=usage

You'll likely need to pair them with GSAP's callbacks to achieve whatever it is you're trying to do!
 

[GreenSock 16,604 Likes (Superhero)]

Or just add a toggleActions: 

toggleActions: "play none reverse none"

 

[Lovestoned 11 Likes (Newbie)]

I used;

 

       let lottieAnim = lottie.loadAnimation({
              container: container,
              renderer: "svg",
              loop: false,
              autoplay: false,
              path: "../../videos/aboutarya.json"
            });
            
            let tl5 = gsap.timeline({
                scrollTrigger: {
                    scroller:".allsite",
                    trigger:".s3",
                    scrub: true,
                    pin: true,
                    anticipatePin:true,
                    start: "top top",
                    end:"100%",
                    pinType: 'fixed',
                    toggleActions: "play none reverse none"
                }
                
            });
            
            let playhead = {frame:0};
            
            tl5.to(playhead,{
                frame: lottieAnim.totalFrames - 1,
                ease: "none",
                onUpdate: () => lottieAnim.playSegments([0,17], true)
            });

 

animation playing from 0 to 17 frame...but when I scroll back playing same because of onUpdate function...how can I do that without onUpdate?

 

thanks...

[Lovestoned 11 Likes (Newbie)]

is there any way to do it without lottie? something like that;

 

tl5.to(".animobject",{
    frame: 17
});

 

way to play json animation without lottie?

 

[Cassie 3,980 Likes (Superhero)]

There's no such thing as a json animation really. JSON is just data - the Lottie player uses that data to create the animation

Can you add your code snippet in to a minimal demo and explain what you're trying to achieve?

It's hard to get an idea of what's happening visually by just looking at code

 

[Lovestoned 11 Likes (Newbie)]

It is harder to make minimal demo...now my page is very complicated...I just want to animate my object in timeline on reverse and forward...so simple! everyone can understand what I need...

 

thanks for your reply anyway...

 

[Cassie 3,980 Likes (Superhero)]

There's no need to be snippy - not everyone can understand.

There are lots of ways to want to 'animate' -  I'm not asking to be obtuse. I'm trying to work out whether you want to scrub through frames on scroll or just trigger an animation at a certain scroll point. Did you want to play it in reverse when scrolling up? Where are the trigger points?

There are a lot of unknowns that would shape the solution.

Also - I'm not asking for you to add your whole page to a demo. Just simplify it down to a couple of tweens and the Lottie animation with the triggers in the correct place.

[Lovestoned 11 Likes (Newbie)]

as I said before...code something like this can explain what I want to make...

 

tl.to(".animobject",{
    frame: 17
});

tl.to(".textobject",{
    top: 0,

    opacity:1
});

tl.to(".animobject",{
    frame: 27
});

.......

 

there are some objects in my timeline...one of them is my json object made with bodymovin...and I want to add this animation to my timeline...

 

at the beginning I want to animate my object to frame 17...and than my text will apppear..than my object will animate to frame 27...etc...

 

anyway I will find a way to do it...it is always been like this I am sure there is easy way to do it or someone will tell me.

 

[Cassie 3,980 Likes (Superhero)]

That snippet explains what you want a little more clearly - but you didn't post that before.

Here's an example of playing to and from certain frames, this is probably the simplest option as you're just using callbacks to ask Lottie to play certain frames.

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

If you want to have more finite control over frames you'll probably have to use a proxy object - this thread might point you in the right direction but we don't have the capacity in these forums to draft you a custom solution. 

 

[Lovestoned 11 Likes (Newbie)]

Cassie

See the Pen QWvNOJv by GreenSock (@GreenSock) on CodePen

 

this pen is good but it is not scroll based as you know...I couldn't give my animation path url...I don't know why but this animation is ok...no problem...I want to make it with scrolltrigger...reverse and forward animation...

 

 

[Cassie 3,980 Likes (Superhero)]

It's a simple enough process to add scrollTrigger to this timeline - please refer to the previous examples.

[OSUblake 18,364 Likes (Superhero)]

Hi Lovestoned!

 

How about this?

 

See the Pen LYyNJPo by GreenSock (@GreenSock) on CodePen

 

[Lovestoned 11 Likes (Newbie)]

Hi OSUblake

 

My problem is solved with your code...Really Superhero! thanks.

 

But I want to ask one more question. I give 100% to end value of scrolltrigger and as you know when animation end my page goes on...Is there any way to tell scroller to wait after animation end? Becauase I will put some texts to my container and want to people read them before they disappear with scroll down...

 

I want to say "Hey scrolltrigger wait 2 seconds after all animation end"

 

thanks...

 

[Cassie 3,980 Likes (Superhero)]

The position parameter may help if you need space in between items: http://greensock.com/position-parameter

 

You could also add an empty callback if you need the extra space at the end of a timeline.

tl.add(function(){}, "+=2");

 

[Lovestoned 11 Likes (Newbie)]

Cassie

 

If I add this code to timeline, animation playing faster than normal.

[Lovestoned 11 Likes (Newbie)]

Ok I found solution;

 

            gsap.timeline({    
                scrollTrigger: {
                    scroller:".allsite",
                  trigger: ".s3",
                  start: "top top",
                  end: "150%",
                  scrub: 1,
                  pin: true
                }
              })
              .to(proxy, {
                  scrollTrigger: {
                      scroller:".allsite",
                        trigger:".s3",
                        start:"top top",
                        end:"100%",
                        scrub:true
                    },
                frame: proxy.lastFrame
              });

 

I used different end values for timeline and proxy...waiting for to complete scrolltrigger 50% more...

 

thanks all for now...

 

 

[Lovestoned 11 Likes (Newbie)]

@OSUblake

 

How can I use frame parameter? for example;

from 17th frame to 27th frame

something like that : frame:[17,27] ???

I couldn't find syntax...

 

thank you...

[Cassie 3,980 Likes (Superhero)]

A fromTo tween will be what you're looking for.

https://greensock.com/docs/v3/GSAP/gsap.fromTo()

See the Pen JjNKKdO by svganimationworkshop (@svganimationworkshop) on CodePen

[Lovestoned 11 Likes (Newbie)]

one more a little question

 

here is my pen

 

See the Pen GRmqXjp by ersenturgut (@ersenturgut) on CodePen

 

Why text1 opacity not working correctly? Disappearing fast...

 

Finally I want to make : on the left side my 3d product animation with 3 steps...and on the right side I want to slide some texts about for these 3 steps...Just trying to synchronize right and left side animations...

 

thanks..

 

[Cassie 3,980 Likes (Superhero)]

 let tl2 = gsap.timeline({
    scrollTrigger: {
      trigger: ".container",
      start: "top top",
      end: "100%",
      markers: true,
      scrub: 1,
      pin: true
    }
  });

  tl2.to(".text1", {
    scrollTrigger: {
      trigger: ".container",
      start: "top top",
      end: "50%",
      scrub: true,
      markers: { startColor: "yellow", endColor: "yellow" }
    },
    marginTop: 0,
    opacity: 1
  });
  tl2.to(".text1", {
    scrollTrigger: {
      trigger: ".container",
      start: "50% top",
      end: "100%",
      scrub: true,
      markers: { startColor: "blue", endColor: "blue" }
    },
    opacity: 0
  });

Hi again! - In the snippet above you've added in ScrollTrigger to all of your tweens and timelines. You don't need to do that.

A scrollTrigger can be either standalone, added to a timeline *or* a tween. In your case -
 

 let tl2 = gsap.timeline({
    scrollTrigger: {
      trigger: ".container",
      start: "top top",
      end: "100%",
      markers: true,
      scrub: 1,
      pin: true
    }
  });

  tl2.to(".text1", {
    marginTop: 0,
    opacity: 1
  })
  .to(".text1", {
    opacity: 0
  });

I'd suggest going back to the docs and giving them a little read.

 

[Lovestoned 11 Likes (Newbie)]

Ok Cassie I know...but I want to set my text objects timing...I have 3 text objects...for example;

 

text1 : from 0% to 40%

text2 : from 40% to 70%

text3 : from 70% to 100%

 

I mean what if my objects timing not equal? I want to learn that. That is why I am asking...

 

thanks for your reply...

[OSUblake 18,364 Likes (Superhero)]

You can use durations and how far something should scroll.