[lottie with scrolltrigger]

akapowl !

 

thanks for your reply...solved my problem...great!

[lottie with scrolltrigger]

ok what do you say now?

 

 

 

 

[lottie with scrolltrigger]

here is the pen...

If I use lottie animation and pin it true .anotherdiv overlaping animation div...you can see .anotherdiv scrolltrigger markers...

 

what is the problem on this scrolling? About scrolltrigger or lottie?

 

thanks...

 

 

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

[random bars with scrolltrigger]

Ji jack

 

Yes this is what I need exactly. But bars must start from the bottom of the container. And animate like this when scrolling...

[random bars with scrolltrigger]

I want to make all these bars css margin-top:100% at the beginning and set to margin-top:0 randomly via scrolltrigger...

 

how can I do that?

 

thanks...

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

[how to use lottiescrolltrigger with timeline]

do you know is there any way to play animation from zip file...I think there is a way but our lottie code compatible for that? my json file is about 3MB...any idea? I couldn't understand lottie tech yet confused.

 

[how to use lottiescrolltrigger with timeline]

OSUblake and Cassie

 

thank you so much for your replies...duration is the point...solved my problem perfectly...I will share complete animation for to help other people...

 

superheroes!!!

 

[how to use lottiescrolltrigger with timeline]

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

[how to use lottiescrolltrigger with timeline]

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

 

[how to use lottiescrolltrigger with timeline]

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

[how to use lottiescrolltrigger with timeline]

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

 

 

[how to use lottiescrolltrigger with timeline]

Cassie

 

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

[how to use lottiescrolltrigger with timeline]

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

 

[how to use lottiescrolltrigger with timeline]

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

 

 

[how to use lottiescrolltrigger with timeline]

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.

 

[how to use lottiescrolltrigger with timeline]

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

 

[how to use lottiescrolltrigger with timeline]

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

 

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

 

way to play json animation without lottie?

 

[how to use lottiescrolltrigger with timeline]

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

[how to use lottiescrolltrigger with timeline]

good but it is playing once...

 

thanks for your reply..

[how to use lottiescrolltrigger with timeline]

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

[pinned element in a scroller flickering when reach top of the viewport]

on desktop and andorid side there is no problem...only ios browsers have...I think you have nothing to do about that...mobile browsers address bar hiding behavior is very big trouble for developers as you know...I almost made what I need...problem on ios side is acceptable for me...

 

I found a solution about pinType:fixed and pointer-events:none config...I will pass this issue with a little js...pointer events:none to all sections and auto to all children...

 

thanks for your reply...

 

[div scroller flicking issue]

Hey  @akapowl

I've realized now..if I use pointer-events:none I cannot use click events on mobile and desktop...If I use pinType:fixed I cannot scroll...this is not a solution for me...If I remove pinType:fixed there is juddering when I scroll..finally I want to prevent mobile address bar hiding...that's why I opened this topic...

 

thanks

[pinned element in a scroller flickering when reach top of the viewport]

Ok there is nothing to do...but I want to ask one more thing...is it possible to slow down kind of snapping speed of pinned element?

[pinned element in a scroller flickering when reach top of the viewport]

I have a problem about pinned elements in a scroller when reached top of the viewport. This problem about only ios devices. There is flickering. Android devices or desktop browsers there is no problem. Please check it on any ios device.

 

thanks.

 

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

[div scroller flicking issue]

there is only 1problem about this solution...I have iphone5 device and scrolling not smooth...I added -webkit-overflow-scrolling: touch; but nothing changed...I have also iphone6 device and scrolling smooth and working good...what do you think?