Jump to content
GreenSock

Search In
  • More options...
Find results that contain...
Find results in...
Lovestoned

how to use lottiescrolltrigger with timeline

Recommended Posts

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

Link to comment
Share on other sites

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

Link to comment
Share on other sites

good but it is playing once...

 

thanks for your reply..

Link to comment
Share on other sites

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!
 

  • Like 1
Link to comment
Share on other sites

Or just add a toggleActions

toggleActions: "play none reverse none"

 

Link to comment
Share on other sites

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

Link to comment
Share on other sites

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

 

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

 

way to play json animation without lottie?

 

Link to comment
Share on other sites

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

 

  • Like 1
Link to comment
Share on other sites

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

 

Link to comment
Share on other sites

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.

  • Like 1
Link to comment
Share on other sites

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.

 

Link to comment
Share on other sites

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. 


 

Link to comment
Share on other sites

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

 

 

Link to comment
Share on other sites

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

Link to comment
Share on other sites

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

 

  • Like 2
Link to comment
Share on other sites

Cassie

 

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

Link to comment
Share on other sites

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

 

 

  • Like 2
Link to comment
Share on other sites

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

Link to comment
Share on other sites

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

 

Link to comment
Share on other sites

 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.

 

Link to comment
Share on other sites

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

Link to comment
Share on other sites

You can use durations and how far something should scroll.

 

 

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