Lovestoned

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

ok what do you say now? https://codepen.io/ersenturgut/pen/ExmLwbd

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

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

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

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.

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

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

one more a little question here is my pen https://codepen.io/ersenturgut/pen/GRmqXjp 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..

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

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

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

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 https://codepen.io/GreenSock/pen/QWvNOJv 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...

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.

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

is there any way to do it without lottie? something like that; tl5.to(".animobject",{ frame: 17 }); way to play json animation without lottie?

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

good but it is playing once... thanks for your reply..

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.

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

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

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?

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.

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?